Better CSS compilation

- scripts/build-sass.mts is much faster than Gulp - Made `details` require a `.details` class to apply default styling, so it doesn't clash with when it needs to be styled more specifically - Fixed user page not displaying stories they are the author of - Styled the credits a tad better, albeit still not perfect
Genfic · Sep 18, 2024 · 38dd155 · 38dd155
1 parent b7e1f43
commit 38dd155
Show file tree

Hide file tree

Showing 20 changed files with 237 additions and 101 deletions.
diff --git a/tools/sass-migrate.py → Documentation/Tips/legacy-tools.md b/tools/sass-migrate.py → Documentation/Tips/legacy-tools.md
@@ -1,3 +1,10 @@
+# Legacy tools
+
+All the tools and scripts that were used once, but now are mere clutter
+
+## Migrate SASS to SCSS
+
+```py
 import os
 import re
 
@@ -47,4 +54,22 @@
         f.write(new)
         print('Done!')
 
-print('Exiting')
+print('Exiting')
+```
+
+## Silence nullability warnings in all files
+
+```py
+import glob
+
+files = glob.glob('Ogma3/Areas/Identity/**/*.cshtml.cs', recursive=True)
+
+for file in files:
+	print(file)
+	with open(file, 'r+', encoding='utf8') as f:
+		old = f.read()
+		f.seek(0)
+		f.write(f'#nullable disable\n\n{old}')
+	print('Nullability disabled')
+
+```
diff --git a/Ogma3/Areas/Admin/Pages/Faq.cshtml b/Ogma3/Areas/Admin/Pages/Faq.cshtml
@@ -29,7 +29,7 @@
 
 	<br>
 
-	<details v-for="f in faqs">
+	<details class="details" v-for="f in faqs">
 		<summary>{{f.question}}</summary>
 		<div class="actions">
 			<button class="small inline action-btn" v-on:click="deleteFaq(f)">

diff --git a/Ogma3/Areas/Admin/Pages/Quotes.cshtml b/Ogma3/Areas/Admin/Pages/Quotes.cshtml
@@ -10,7 +10,7 @@
 <form class="form" v-on:submit.prevent="this.$event.preventDefault()">
 	@if (User.IsInRole("Admin"))
 	{
-		<details>
+		<details class="details">
 			<summary>Load from Json</summary>
 			<div class="o-form-group">
 				<textarea class="o-form-control active-border" rows="1" v-model="json" placeholder="Json"></textarea>

diff --git a/Ogma3/Areas/Admin/Pages/Users.cshtml b/Ogma3/Areas/Admin/Pages/Users.cshtml
@@ -79,7 +79,7 @@
 	{
 		var isDone = i.ActiveUntil < DateTime.Now || i.RemovedAt is not null;
 
-		<details class="infraction">
+		<details class="infraction details">
 			<summary class="@(isDone ? "passed" : null)">
 				<b class="type @i.Type.ToString().ToLower()">@i.Type</b> issued <time datetime="@i.IssueDate.ToString("o")">@i.IssueDate.ToString("dd.MM.yyyy HH:mm")</time>, expires <time datetime="@i.ActiveUntil.ToString("o")">@i.ActiveUntil.ToString("dd.MM.yyyy HH:mm")</time>
 			</summary>

diff --git a/Ogma3/Areas/Identity/Pages/Account/Manage/Infractions.cshtml b/Ogma3/Areas/Identity/Pages/Account/Manage/Infractions.cshtml
@@ -17,7 +17,7 @@
 {
 	var isDone = i.ActiveUntil < DateTime.Now || i.RemovedAt is not null;
 
-	<details class="infraction">
+	<details class="infraction details">
 		<summary class="@(isDone ? "passed" : null)">
 			<b class="type @i.Type.ToString().ToLower()">@i.Type</b> until <time datetime="@i.ActiveUntil.ToString("o")">@i.ActiveUntil.ToString("dd.MM.yyyy HH:mm")</time>
 		</summary>

diff --git a/Ogma3/Pages/Ban.cshtml b/Ogma3/Pages/Ban.cshtml
@@ -22,7 +22,7 @@
 {
 	var isDone = i.ActiveUntil < DateTime.Now || i.RemovedAt is not null;
 
-	<details class="infraction">
+	<details class="infraction details">
 		<summary class="@(isDone ? "passed" : null)">
 			<b class="type @i.Type.ToString().ToLower()">@i.Type</b> issued <time datetime="@i.IssueDate.ToString("o")">@i.IssueDate.ToString("dd.MM.yyyy HH:mm")</time>, expires <time datetime="@i.ActiveUntil.ToString("o")">@i.ActiveUntil.ToString("dd.MM.yyyy HH:mm")</time>
 		</summary>

diff --git a/Ogma3/Pages/Docs.cshtml b/Ogma3/Pages/Docs.cshtml
@@ -26,7 +26,7 @@
 		@Model.Document.Body
 	</markdown>
 
-	<details>
+	<details class="details">
 		<summary>Version history</summary>
 		<ul class="my-list">
 			@foreach (var ver in Model.Versions)

diff --git a/Ogma3/Pages/Faq.cshtml b/Ogma3/Pages/Faq.cshtml
@@ -11,7 +11,7 @@
 <div id="faqs">
 	@foreach (var faq in Model.Faqs)
 	{
-		<details>
+		<details class="details">
 			<summary>
 				<h4>@faq.Question</h4>
 			</summary>

diff --git a/Ogma3/Pages/Stories/Create.cshtml b/Ogma3/Pages/Stories/Create.cshtml
@@ -136,13 +136,13 @@
 			{
 				<tr>
 					<td>
-						<input list="credit-roles" type="text" name="Input.Credits[@i].Role">
+						<input list="credit-roles" type="text" asp-for="@Model.Input.Credits[@i].Role">
 					</td>
 					<td>
-						<input type="text" name="Input.Credits[@i].Name">
+						<input type="text" asp-for="@Model.Input.Credits[@i].Name">
 					</td>
 					<td>
-						<input type="text" name="Input.Credits[@i].Link">
+						<input type="text" asp-for="@Model.Input.Credits[@i].Link">
 					</td>
 				</tr>
 			}

diff --git a/Ogma3/Pages/Stories/Edit.cshtml b/Ogma3/Pages/Stories/Edit.cshtml
@@ -26,6 +26,39 @@
 		<span>Please correct the following errors</span>
 	</div>
 
+	<div class="o-form-group status-select">
+		<label asp-for="Input.Status"></label>
+		<p class="desc">Choose the status of your story</p>
+
+		<div class="selector active-border">
+			@foreach (var s in Enum.GetValues<EStoryStatus>().Reverse())
+			{
+			<input type="radio"
+			       asp-for="Input.Status"
+			       id="sel_@s"
+			       value="@((int)s)"
+			       checked="@(Model.Input.Status == s)">
+			<label for="sel_@s" tabindex="0">@s</label>
+			}
+		</div>
+	</div>
+
+	<div class="o-form-group keep-size">
+		<label asp-for="Input.Published"></label>
+		<p class="desc">Control whether your story is visible or not</p>
+
+		<div class="toggle-input">
+			<input asp-for="Input.Published">
+
+			<label asp-for="Input.Published">
+				<span class="toggle"></span>
+				<span class="label-on">On</span>
+				<span class="label-off">Off</span>
+			</label>
+
+		</div>
+	</div>
+
 	<div class="o-form-group">
 		<label asp-for="Input.Title"></label>
 		<p class="desc">Try something catchy</p>
@@ -140,40 +173,6 @@
 		</div>
 	</div>
 
-	<div class="o-form-group status-select">
-		<label asp-for="Input.Status"></label>
-		<p class="desc">Choose the status of your story</p>
-
-		<div class="selector active-border">
-			@foreach (var s in Enum.GetValues<EStoryStatus>().Reverse())
-			{
-				<input type="radio"
-				       asp-for="Input.Status"
-				       id="sel_@s"
-				       value="@((int)s)"
-				       checked="@(Model.Input.Status == s)">
-				<label for="sel_@s" tabindex="0">@s</label>
-			}
-		</div>
-	</div>
-
-	<div class="o-form-group keep-size">
-		<label asp-for="Input.Published"></label>
-		<p class="desc">Control whether your story is visible or not</p>
-
-		<div class="toggle-input">
-			<input asp-for="Input.Published">
-
-			<label asp-for="Input.Published">
-				<span class="toggle"></span>
-				<span class="label-on">On</span>
-				<span class="label-off">Off</span>
-			</label>
-
-		</div>
-	</div>
-
-
 	<div class="o-form-group">
 		<label>Credits</label>
 		<table>

diff --git a/Ogma3/Pages/Story.cshtml b/Ogma3/Pages/Story.cshtml
@@ -118,48 +118,48 @@
 			<div class="description" itemprop="abstract">
 				<markdown preset="Basic">@Model.Story.Description</markdown>
 			</div>
-
 		</div>
 
 		@* </cache> *@
-		@if (Model.Story.Credits is { Count: > 0 })
-		{
-			<details class="credits">
-				<summary>Credits</summary>
-				<table>
-					<tr>
-						<th>Role</th>
-						<th>Name</th>
-					</tr>
-					@foreach (var credit in Model.Story.Credits)
+	</div>
+
+	@if (Model.Story.Credits is { Count: > 0 })
+	{
+	<details class="credits">
+		<summary>Credits</summary>
+		<table>
+			<tr>
+				<th>Role</th>
+				<th>Name</th>
+			</tr>
+			@foreach (var credit in Model.Story.Credits)
+			{
+			<tr>
+				<td>@credit.Role</td>
+				<td>
+					@if (credit.Link is not null)
 					{
-						<tr>
-							<td>@credit.Role</td>
-							<td>
-								@if (credit.Link is not null)
-								{
-									<a href="@credit.Link" target="_blank" noopener noreferrer>@credit.Name</a>
-								}
-								else
-								{
-									@credit.Name
-								}
-							</td>
-						</tr>
+					<a href="@credit.Link" target="_blank" noopener noreferrer>@credit.Name</a>
 					}
-				</table>
-			</details>
-		}
-	</div>
+					else
+					{
+					@credit.Name
+					}
+				</td>
+			</tr>
+			}
+		</table>
+	</details>
+	}
 
 	<a class="start active-border" asp-controller="Chapter" asp-action="FirstChapter" asp-route-sid="@Model.Story.Id">Start reading</a>
 
 	<div class="info">
 		<span class="word-count">@Model.Story.WordCount.ToString("N0") words</span>
 		<span class="chapter-count">@Model.Story.ChaptersCount chapters</span>
 		<span class="comment-count">@Model.Story.CommentsCount comments</span>
-		<time class="release-date" datetime="@Model.Story.ReleaseDate.ToString("yyyy-MM-dd HH:mm", CultureInfo.InvariantCulture)" itemprop="datePublished">
-			published @Model.Story.ReleaseDate.ToString("dd MMMM yyyy", CultureInfo.InvariantCulture)
+		<time class="release-date" title="Publication date" datetime="@Model.Story.ReleaseDate.ToString("yyyy-MM-dd HH:mm", CultureInfo.InvariantCulture)" itemprop="datePublished">
+			@Model.Story.ReleaseDate.ToString("dd MMMM yyyy", CultureInfo.InvariantCulture)
 		</time>
 
 		<div class="spacer"></div>

diff --git a/Ogma3/Pages/User/Stories.cshtml.cs b/Ogma3/Pages/User/Stories.cshtml.cs
@@ -32,7 +32,7 @@ public async Task<ActionResult> OnGetAsync(string name, [FromQuery] int page = 1
 		var query = context.Stories
 			.Where(b => b.AuthorId == ProfileBar.Id);
 
-		if (name != User.GetUsername())
+		if (!User.GetUsername()?.Equals(name, StringComparison.InvariantCultureIgnoreCase) ?? false)
 		{
 			// If the profile page doesn't belong to the current user, apply additional filters
 			query = query

diff --git a/Ogma3/bun.lockb b/Ogma3/bun.lockb
diff --git a/Ogma3/gulpfile.mjs b/Ogma3/gulpfile.mjs
@@ -28,7 +28,7 @@ const roots = {
 };
 const paths = {
 	styles: {
-		src: `${roots.css}/*.{sass,scss}`,
+		src: `${roots.css}/**/*.{sass,scss}`,
 		dest: `${roots.css}/dist`
 	},
 	js: {

diff --git a/Ogma3/package.json b/Ogma3/package.json
@@ -20,8 +20,11 @@
     "@types/node": "^20.14.10",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
+    "ansi-colors": "^4.1.3",
     "autoprefixer": "10.4.19",
+    "browserslist": "^4.23.3",
     "concurrently": "^8.2.2",
+    "convert": "^5.4.0",
     "esbuild": "^0.23.0",
     "esbuild-minify-templates": "^0.11.0",
     "eslint": "^9.7.0",
@@ -35,6 +38,7 @@
     "gulp-sourcemaps": "3.0.0",
     "gulp-terser": "2.1.0",
     "lighthouse": "^12.1.0",
+    "lightningcss": "^1.27.0",
     "lit-web-types": "0.1.5",
     "npm-commands": "1.2.1",
     "picocolors": "^1.0.1",