Add base home page contents and fix navbar

PancakesWeb/Components/Pages/Home.razor

@@ -1,7 +1,80 @@
 @page "/"
+@using PancakesWeb.Data
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
+<main class="container">
+    <h1 id="pancakes">pancakes</h1>
+    <p>I'm a cat <abbr title="non-binary">enby</abbr> (<abbr
+            title="they/them/their/theirs/themself or it/it/its/its/itself in English">they/it</abbr>) from Australia
+        that likes cats, Linux, and programming. You can find my links, projects, and other pages here.</p>
 
-Welcome to your new app.
+    <h2 id="accounts">Accounts</h2>
+    <p>Other places you can find me</p>
+
+    <ul class="accounts">
+        @foreach (var link in Links.Accounts)
+        {
+            <li class="account card">
+                <img src="@Assets[$"imgs/icons/{link.Icon}"]" alt="" aria-hidden="true"
+                     class="@(link.IconInvert ? "account-img img-invert" : "account-img")">
+                <span class="account-details">
+                    @if (link.Href != null)
+                    {
+                        <a href="@link.Href" target="_blank">@link.Name</a>
+                    }
+                    else
+                    {
+                        <span>@link.Name</span>
+                    }
+                    <span class="account-username">@link.Description</span>
+                </span>
+            </li>
+        }
+    </ul>
+
+    <h2 id="blog-posts">Blog Posts</h2>
+    <p>Things I've written. Licensing can be found in the appropriate page footers</p>
+
+    @* TODO: Add blog index *@
+
+    <h2 id="projects">Projects</h2>
+    <p>Projects that I have created</p>
+
+    <ul class="links">
+        @foreach (var link in Links.Projects)
+        {
+            <li class="link card">
+                @if (link.Href != null)
+                {
+                    <a href="@link.Href" target="_blank" class="link-heading">@link.Name</a>
+                }
+                else
+                {
+                    <span class="link-heading">@link.Name</span>
+                }
+                <p>@link.Description</p>
+            </li>
+        }
+    </ul>
+
+    <h2 id="contributions">Contributions</h2>
+    <p>Projects that I do not maintain but have contributed to</p>
+    
+    <ul class="links">
+        @foreach (var link in Links.Contributions)
+        {
+            <li class="link card">
+                @if (link.Href != null)
+                {
+                    <a href="@link.Href" target="_blank" class="link-heading">@link.Name</a>
+                }
+                else
+                {
+                    <span class="link-heading">@link.Name</span>
+                }
+                <p>@link.Description</p>
+            </li>
+        }
+    </ul>
+</main>

PancakesWeb/Components/Pages/Home.razor.css

@@ -0,0 +1,61 @@
+.accounts {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding-left: 0;
+    list-style: none;
+}
+
+.account {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 0;
+}
+
+.account-img {
+    width: 2em;
+    height: 2em;
+    object-fit: contain;
+}
+
+.account-details {
+    display: flex;
+    flex-direction: column;
+    
+    text-wrap: wrap;
+    word-break: break-word;
+}
+
+.account-username {
+    font-size: 0.9em;
+}
+
+.links {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-left: 0;
+    list-style: none;
+}
+
+.link :last-child {
+    margin-bottom: 0;
+}
+
+.link-heading {
+    font-size: large;
+    font-weight: bold;
+}
+
+@media screen and (max-width: 768px) {
+    .accounts {
+        flex-direction: column;
+    }
+
+    .account-username {
+        font-size: inherit;
+    }
+}

PancakesWeb/Components/UI/Navbar.razor

@@ -1,6 +1,6 @@
 @using PancakesWeb.Data
 
-<nav class="container">
+<nav>
     <ul class="nav-content">
         <li class="nav-item brand">
             <a class="nav-link" href="/">
@@ -12,8 +12,8 @@
         @foreach (var link in Links.Accounts.Where(p => p is { Href: not null, HomePageOnly: false }))
         {
             <li class="nav-item">
-                <a class="nav-link can-hide-label" href="@link.Href">
+                <a class="nav-link can-hide-label" href="@link.Href" target="_blank">
-                    <img class="@(link.IconInvert ? "nav-img invert-icon" : "nav-img")"
+                    <img class="@(link.IconInvert ? "nav-img img-invert" : "nav-img")"
                          src="@Assets[$"imgs/icons/{link.Icon}"]" alt="@link.Name icon" aria-hidden="true">
                     <span class="nav-label">@link.Name</span>
                 </a>

PancakesWeb/Components/UI/Navbar.razor.css

@@ -1,3 +1,8 @@
+a::after {
+    display: none;
+    content: none;
+}
+
 .nav-content {
     display: flex;
     flex-direction: row;
@@ -45,10 +50,6 @@
     object-fit: contain;
 }
 
-.nav-img.invert-icon {
-    filter: invert() hue-rotate(180deg);
-}
-
 @media screen and (max-width: 768px) {
     /* Hide labels while still being accessible by screen readers */
     .nav-link.can-hide-label {

PancakesWeb/Data/Link.cs

@@ -4,8 +4,8 @@ public class Link
 {
     public required string Name { get; set; }
     public required string? Href { get; set; }
-    public required string Username { get; set; }
+    public required string Description { get; set; }
-    public required string Icon { get; set; }
+    public string? Icon { get; set; }
     public bool IconInvert { get; set; }
     public bool HomePageOnly { get; set; } = true;
 }
@@ -18,28 +18,28 @@ public static class Links
         {
             Name = "Bluesky",
             Href = "https://bsky.app/profile/pancakes.gay",
-            Username = "@pancakes.gay",
+            Description = "@pancakes.gay",
             Icon = "bluesky.webp"
         },
         new Link
         {
             Name = "Codeberg",
             Href = "https://codeberg.org/pancakes",
-            Username = "pancakes",
+            Description = "pancakes",
             Icon = "codeberg.webp"
         },
         new Link
         {
             Name = "Discord",
             Href = null,
-            Username = "pancakesmeow",
+            Description = "pancakesmeow",
             Icon = "discord.webp"
         },
         new Link
         {
             Name = "Fediverse",
             Href = "https://shrimp.meow.company/@pancakes",
-            Username = "@pancakes@meow.company",
+            Description = "@pancakes@meow.company",
             Icon = "iceshrimp.webp",
             IconInvert = true,
             HomePageOnly = false
@@ -48,7 +48,7 @@ public static class Links
         {
             Name = "Forgejo",
             Href = "https://git.meow.company/pancakes",
-            Username = "pancakes",
+            Description = "pancakes",
             Icon = "forgejo.webp",
             HomePageOnly = false
         },
@@ -56,7 +56,7 @@ public static class Links
         {
             Name = "GitHub",
             Href = "https://github.com/pancakesmeow",
-            Username = "pancakesmeow",
+            Description = "pancakesmeow",
             Icon = "github.webp",
             IconInvert = true
         },
@@ -64,14 +64,14 @@ public static class Links
         {
             Name = "pronouns.cc",
             Href = "https://pronouns.cc/@pancakes",
-            Username = "@pancakes",
+            Description = "@pancakes",
             Icon = "pronouns_cc.webp"
         },
         new Link
         {
             Name = "Signal",
             Href = null,
-            Username = "pancakes.80",
+            Description = "pancakes.80",
             Icon = "signal.webp",
             IconInvert = true
         },
@@ -79,9 +79,43 @@ public static class Links
         {
             Name = "YouTube",
             Href = "https://youtube.com/@trypancakes",
-            Username = "@trypancakes",
+            Description = "@trypancakes",
             Icon = "youtube.webp",
             HomePageOnly = false
         }
     ];
+
+    public static readonly List<Link> Projects =
+    [
+        new Link
+        {
+            Name = "fedifeeds",
+            Href = "https://git.meow.company/pancakes/fedifeeds",
+            Description =
+                "RSS feeds to Mastodon API. Supports multiple feeds per account, Markdown, and automatic threading (split into multiple notes to fit character limit)."
+        },
+        new Link
+        {
+            Name = "Iceshrimp Updates Bot",
+            Href = "https://shrimp.meow.company/@iceshrimp_updates",
+            Description =
+                "This bot automatically checks for Iceshrimp-js and Iceshrimp.NET releases and posts them. Based on fedifeeds."
+        },
+        new Link
+        {
+            Name = "SCP Wiki Pages Bot",
+            Href = "https://shrimp.meow.company/@scp_pages",
+            Description = "Posts random pages from the SCP Foundation wiki on the Fediverse."
+        }
+    ];
+
+    public static readonly List<Link> Contributions =
+    [
+        new Link
+        {
+            Name = "Iceshrimp.NET",
+            Href = "https://iceshrimp.dev/iceshrimp/Iceshrimp.NET",
+            Description = "The .NET rewrite of the Iceshrimp server software for the Fediverse."
+        }
+    ];
 }

PancakesWeb/wwwroot/style.css

@@ -20,6 +20,7 @@
     --background: light-dark(#f3dffc, #16051d);
     --foreground: light-dark(#faf0ff, #08020b);
     --text: light-dark(#0f0f0f, #efefef);
+    --border-color: color-mix(in srgb, var(--background) 70%, var(--text));
 
     --success: #9ece6a;
     --warn: #e0af68;
@@ -60,8 +61,55 @@ a:visited {
     color: var(--accent);
 }
 
+a[target="_blank"]:not(:has(>img))::after {
+    display: inline-block;
+    margin-left: 0.25em;
+    content: "↗";
+}
+
+abbr {
+    cursor: help;
+}
+
 .container {
     margin-left: auto;
     margin-right: auto;
+    padding: 1rem;
     max-width: var(--container-width);
+}
+
+.card {
+    display: block;
+    padding: 1rem;
+
+    background-color: var(--foreground);
+    border-radius: var(--radius);
+}
+
+.img-invert {
+    filter: invert() hue-rotate(180deg);
+}
+
+@keyframes title-fade-in {
+    0% {
+        margin-top: 0;
+        opacity: 0;
+    }
+}
+
+@media (pointer: coarse), (hover: none) {
+    [title]:hover::after, [title]:focus::after {
+        display: block;
+        position: absolute;
+        width: max-content;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        content: attr(title);
+        z-index: +10;
+
+        background-color: var(--foreground);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius);
+        animation: 0.3s ease-out title-fade-in;
+    }
 }