feat: add april fools styling

Adding these files locally under IDE config. They have no need to part of the solution itself

Gulpfile.js

@@ -47,5 +47,8 @@ function copyImages() {
         .pipe(gulp.dest(`${destDir}/img`));
 }
 
-exports.default = compileSCSS;
-exports.default = gulp.parallel(compileSCSS, gulp.series(compileTS, bundleJS), copyCSS, copyJS, copyImages);
+exports.assets = copyImages;
+exports.styles = gulp.parallel(compileSCSS, copyCSS);
+exports.scripts = gulp.parallel(copyJS, gulp.series(compileTS, bundleJS));
+
+exports.default = gulp.parallel(exports.styles, exports.scripts, exports.assets);

OliverBooth.sln

@@ -1,4 +1,4 @@
-
+
 Microsoft Visual Studio Solution File, Format Version 12.00
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "OliverBooth", "OliverBooth\OliverBooth.csproj", "{A58A6FA3-480C-400B-822A-3786741BF39C}"
 EndProject
@@ -13,37 +13,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		global.json = global.json
 	EndProjectSection
 EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{8A323E64-E41E-4780-99FD-17BF58961FB5}"
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "scss", "scss", "{822F528E-3CA7-4B7D-9250-BD248ADA7BAE}"
-	ProjectSection(SolutionItems) = preProject
-		src\scss\app.scss = src\scss\app.scss
-		src\scss\prism.vs.scss = src\scss\prism.vs.scss
-		src\scss\prism.css = src\scss\prism.css
-		src\scss\ribbon.scss = src\scss\ribbon.scss
-	EndProjectSection
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ts", "ts", "{BB9F76AC-292A-4F47-809D-8BBBA6E0A048}"
-	ProjectSection(SolutionItems) = preProject
-		src\ts\app.ts = src\ts\app.ts
-		src\ts\prism.js = src\ts\prism.js
-		src\ts\API.ts = src\ts\API.ts
-		src\ts\BlogPost.ts = src\ts\BlogPost.ts
-		src\ts\Author.ts = src\ts\Author.ts
-		src\ts\TimeUtility.ts = src\ts\TimeUtility.ts
-		src\ts\UI.ts = src\ts\UI.ts
-		src\ts\Input.ts = src\ts\Input.ts
-		src\ts\BlogUrl.ts = src\ts\BlogUrl.ts
-	EndProjectSection
-EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "img", "img", "{8996BEBA-0D9C-4D76-9117-8E4E89148A1A}"
-	ProjectSection(SolutionItems) = preProject
-		src\img\favicon.png = src\img\favicon.png
-		src\img\headshot_512x512_2023.jpg = src\img\headshot_512x512_2023.jpg
-		src\img\ob-256x256.png = src\img\ob-256x256.png
-		src\img\oliverbooth-704x330.png = src\img\oliverbooth-704x330.png
-	EndProjectSection
-EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -56,8 +25,5 @@ Global
 		{A58A6FA3-480C-400B-822A-3786741BF39C}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
-		{822F528E-3CA7-4B7D-9250-BD248ADA7BAE} = {8A323E64-E41E-4780-99FD-17BF58961FB5}
-		{BB9F76AC-292A-4F47-809D-8BBBA6E0A048} = {8A323E64-E41E-4780-99FD-17BF58961FB5}
-		{8996BEBA-0D9C-4D76-9117-8E4E89148A1A} = {8A323E64-E41E-4780-99FD-17BF58961FB5}
 	EndGlobalSection
 EndGlobal

OliverBooth/Pages/Blog/Index.cshtml

@@ -8,74 +8,88 @@
 @{
     ViewData["Title"] = "Blog";
     MastodonStatus latestStatus = MastodonService.GetLatestStatus();
+    bool doAprilFools = DateOnly.FromDateTime(DateTime.UtcNow) == new DateOnly(2024, 04, 01) || Environment.GetEnvironmentVariable("DO_AF") == "1";
 }
 
-<div class="card text-center mastodon-update-card">
-    <div class="card-body">
-        @Html.Raw(latestStatus.Content)
-        @foreach (MediaAttachment attachment in latestStatus.MediaAttachments)
-        {
-            switch (attachment.Type)
+@if (doAprilFools)
+{
+    <h1>UNDER CONSTRUCTION</h1>
+    <div style="text-align: center">
+        <img src="~/img/construction_90x85.gif">
+        <img src="~/img/underconstruction_323x118.gif">
+        <img src="~/img/construction_90x85.gif">
+        <p>Coming soon WATCH THIS SPACE</p>
+    </div>
+}
+else
+{
+    <div class="card text-center mastodon-update-card">
+        <div class="card-body">
+            @Html.Raw(latestStatus.Content)
+            @foreach (MediaAttachment attachment in latestStatus.MediaAttachments)
             {
-                case AttachmentType.Audio:
-                    <p><audio controls="controls" src="@attachment.Url"></audio></p>
-                    break;
+                switch (attachment.Type)
+                {
+                    case AttachmentType.Audio:
+                        <p><audio controls="controls" src="@attachment.Url"></audio></p>
+                        break;
 
-                case AttachmentType.Video:
-                    <p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
-                    break;
+                    case AttachmentType.Video:
+                        <p><video controls="controls" class="figure-img img-fluid" src="@attachment.Url"></video></p>
+                        break;
 
-                case AttachmentType.Image:
-                case AttachmentType.GifV:
-                    <p><img class="figure-img img-fluid" src="@attachment.Url"></p>
-                    break;
+                    case AttachmentType.Image:
+                    case AttachmentType.GifV:
+                        <p><img class="figure-img img-fluid" src="@attachment.Url"></p>
+                        break;
+                }
             }
-        }
+        </div>
+        <div class="card-footer text-muted">
+            <abbr title="@latestStatus.CreatedAt.ToString("F")">@latestStatus.CreatedAt.Humanize()</abbr>
+            &bull;
+            <a href="@latestStatus.OriginalUri" target="_blank">View on Mastodon</a>
+        </div>
     </div>
-    <div class="card-footer text-muted">
-        <abbr title="@latestStatus.CreatedAt.ToString("F")">@latestStatus.CreatedAt.Humanize()</abbr>
-        &bull;
-        <a href="@latestStatus.OriginalUri" target="_blank">View on Mastodon</a>
+
+    <div id="all-blog-posts">
+        @await Html.PartialAsync("_LoadingSpinner")
     </div>
-</div>
 
-<div id="all-blog-posts">
-    @await Html.PartialAsync("_LoadingSpinner")
-</div>
-
-<script id="blog-post-template" type="text/x-handlebars-template">
-    <div class="card-header">
-        <span class="text-muted">
-            <img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
-            <span>{{author.name}}<span>
-            <span> &bull; </span>
-            <abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
-            {{#if post.enable_comments}}
+    <script id="blog-post-template" type="text/x-handlebars-template">
+        <div class="card-header">
+            <span class="text-muted">
+                <img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
+                <span>{{author.name}}<span>
                 <span> &bull; </span>
-                <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
-                    Loading comment count &hellip;
-                </a>
+                <abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
+                {{#if post.enable_comments}}
+                    <span> &bull; </span>
+                    <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
+                        Loading comment count &hellip;
+                    </a>
+                {{/if}}
+            </span>
+        </div>
+        <div class="card-body">
+            <h2>
+                <a href="{{post.url}}"> {{post.title}}</a>
+            </h2>
+
+            <p>{{{post.excerpt}}}</p>
+
+            {{#if post.trimmed}}
+                <p>
+                    <a href="{{post.url}}">
+                        Read more...
+                    </a>
+                </p>
             {{/if}}
-        </span>
-    </div>
-    <div class="card-body">
-        <h2>
-            <a href="{{post.url}}"> {{post.title}}</a>
-        </h2>
-
-        <p>{{{post.excerpt}}}</p>
-
-        {{#if post.trimmed}}
-            <p>
-                <a href="{{post.url}}">
-                    Read more...
-                </a>
-            </p>
-        {{/if}}
-    </div>
-    <div class="card-footer">
-        {{#each post.tags}}
-            <a href="?tag={{urlEncode this}}" class="badge text-bg-dark">{{this}}</a>
-        {{/each}}
-    </div>
-</script>
+        </div>
+        <div class="card-footer">
+            {{#each post.tags}}
+                <a href="?tag={{urlEncode this}}" class="badge text-bg-dark">{{this}}</a>
+            {{/each}}
+        </div>
+    </script>
+}

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -4,6 +4,7 @@
 @{
     HttpRequest request = Context.Request;
     var url = new Uri($"{request.Scheme}://{request.Host}{request.Path}{request.QueryString}");
+    bool doAprilFools = DateOnly.FromDateTime(DateTime.UtcNow) == new DateOnly(2024, 04, 01) || Environment.GetEnvironmentVariable("DO_AF") == "1";
 }
 <!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
@@ -61,12 +62,28 @@
     <link rel="stylesheet" href="~/css/prism.vs.min.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true">
     <link rel="stylesheet" href="~/css/ribbon.min.css" asp-append-version="true">
+    @if (doAprilFools)
+    {
+        <link rel="stylesheet" href="~/css/af-app.min.css" asp-append-version="true">
+    }
 </head>
 <body>
 <header class="container" style="margin-top: 20px;">
     <div id="site-title" class="text-center">
         <h1>
-            <a href="/"><img src="~/img/ob-256x256.png" alt="Oliver Booth" height="128"> Oliver Booth</a>
+            @if (doAprilFools)
+            {
+                <marquee>
+                    <a href="/">
+                        <img src="~/img/ob-af-256x256.png" alt="Oliver Booth" height="128">
+                        <img src="~/img/af-oliverbooth-1236x293.png" alt="Oliver Booth" height="128">
+                    </a>
+                </marquee>
+            }
+            else
+            {
+                <a href="/"><img src="~/img/ob-256x256.png" alt="Oliver Booth" height="128"> Oliver Booth</a>
+            }
         </h1>
     </div>
 </header>
@@ -95,7 +112,7 @@
 
 <div style="margin:50px 0;"></div>
 
-@if (DateTimeOffset.UtcNow < new DateTime(2024, 03, 08))
+@if (!doAprilFools && DateTimeOffset.UtcNow < new DateTime(2024, 03, 08))
 {
     <div id="usa-countdown" class="container">
         <div class="row">
@@ -110,6 +127,13 @@
 <div style="margin:50px 0;"></div>
 
 <div class="container">
+    @if (doAprilFools)
+    {
+        <h1 style="text-decoration: underline; color: #0f0 !important; margin: 20px 0;">
+            <img src="~/img/af-homepage_500x383.jpg" alt="WELCOME TO MY HOMEPAGE!!!!111SHIFT+1">
+        </h1>
+    }
+
     <main role="main" class="pb-3">
         @RenderBody()
     </main>
@@ -127,7 +151,7 @@
         </ul>
 
         <ul class="footer-nav" style="margin-top: 20px;">
-            <li>&copy; @DateTime.UtcNow.Year</li>
+            <li>@(doAprilFools ? "(C) 2003" : $"&copy; {DateTime.UtcNow.Year}")</li>
             <li><a asp-page="/privacy/index">Privacy</a></li>
         </ul>
     </div>

src/scss/af-app.scss

@@ -0,0 +1,59 @@
+$font: "Comic Sans MS", cursive !important;
+
+html, body {
+  background: #c7e7ff url("/img/cloud_672x148.gif") repeat !important;
+}
+
+html, body, * {
+  font-family: serif !important;
+  color: #f00;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font;
+  text-transform: uppercase !important;
+}
+
+a:link {
+  color: #00f !important;
+  text-decoration: underline !important;
+}
+
+a:visited {
+  color: #909 !important;
+  text-decoration: underline !important;
+}
+a:hover {
+  color: #00f !important;
+  text-decoration: underline !important;
+}
+a:active {
+  color: #909 !important;
+  text-decoration: underline !important;
+}
+
+footer, footer *{
+  color: #000 !important;
+}
+
+.rounded-circle {
+  border-radius: 0 !important;
+}
+
+main.container {
+  background: #ff0 !important;
+}
+
+.alert {
+  border-radius: 0 !important;
+}
+
+input.form-control, textarea.form-control {
+  background: #fff !important;
+  color: #000 !important;
+  font-family: $font;
+  
+  &::placeholder {
+    color: #9e9e9e !important;
+  }
+}