Misc things

.vscode/settings.json

@@ -4,5 +4,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "prettier.documentSelectors": ["**/*.astro"],
+  "prettier.documentSelectors": ["**/*.astro"]
 }

src/components/ContentHeader.astro

@@ -1,12 +1,13 @@
 ---
 const { item, includeTags } = Astro.props
+import { readableDate } from "$utils"
 ---
 
 <header class="mb-4 mt-4">
   <h1 class="text-[3.5rem] mb-4 mt-0 leading-none">{item.title}</h1>
   {item.tagline && <h2 class="text-xl m-0 relative top-[-5px]">{item.tagline}</h2>}
   {includeTags && <div class="text-creative-work">
-      {item.dateString}·{item.tags
+      {readableDate(item.date)} · {item.tags
         .map((tag) => <a href="{ '/articles/tags/' + tag}">{tag}</a>)
         .reduce((prev, curr) => (prev === null ? [curr] : [prev, ", ", curr]))}
     </div>}

src/content/projects/games/sinarun.md

@@ -0,0 +1,7 @@
+---
+  title: "SinaRun"
+  description: "Minimalist 3D platform/racing game, available on Steam"
+  featured: true
+---
+
+Hello

src/content/projects/websites/fairedesjeux.md

@@ -0,0 +1,7 @@
+---
+  title: "fairedesjeux.fr"
+  description: "French website to learn how to make games"
+  featured: true
+---
+
+hello

src/content/projects/websites/wiki.fairedesjeux.md

@@ -0,0 +1,7 @@
+---
+  title: "wiki.fairedesjeux.fr"
+  description: "A wiki for fairedesjeux.fr"
+  featured: true
+---
+
+hello

src/content/wiki/computers/dailyannoyances/dailyannoyances.md

@@ -7,7 +7,7 @@
     category: computers
 ---
 
-I like my setup, I've put a lot of time into it, making sure everything is just like how I want. Sure, not everything about is is perfect, there's a few things that I notice once in a while but that doesn't bother me too much
+I like my setup. After all, I've put a lot of time into it, making sure everything is just like how I want. Sure, not everything about is is perfect, there's a few irks and quirks that I notice once in a while but usually, nothing that really ruins my experience, however some issues are.. a bit too much
 
 On this page, I'll be listing the daily annoyances I have that I notice everytime and annoys me a lot. Some issues are fixable - I just haven't gotten to it. Some.. not so much, either I couldn't find a fix, a fix doesn't exist or a fix has other implications that I don't like. Some issues have workaround that I don't necessarily mind using until a find a proper solution (or a proper solution exists)
 

src/data/catalogue.ts

@@ -50,15 +50,14 @@ function postProcessCatalogueItem(item: CatalogueItem): CatalogueItem {
   item = postProcessBase(item) as CatalogueItem
 
   item.type = getCatalogueTypeFromURL(item.file.pathname)
-  item.url = getCatalogueURL(item.file.pathname)
+  item.url = getCatalogueURL(item)
   item.cover = new URL(item.url + ".jpg")
 
   switch (item.type) {
     case CatalogueType.GAME:
       break
     case CatalogueType.BOOK:
       item.formatType = item?.volumes ? "multiple" : "single"
-
       break
   }
 
@@ -69,8 +68,8 @@ function getCatalogueTypeFromURL(path: string): CatalogueType {
   return basename(dirname(path)).slice(0, -1) as CatalogueType
 }
 
-function getCatalogueURL(path: string, add: string = ""): URL {
-  return new URL("/" + path.split("/content/")[1].split(".")[0] + add, "http://localhost:3000/")
+function getCatalogueURL(item: CatalogueItem): URL {
+  return new URL(`/catalogue/${item.type}s/${item.slug}`, "http://localhost:3000/")
 }
 
 export { postProcessCatalogueItem, CatalogueItem, CatalogueType }

src/data/projects.ts

@@ -0,0 +1,44 @@
+import { BaseObject, postProcessBase } from "./shared"
+import { basename, dirname } from "path"
+
+interface Project extends BaseObject {
+  type: ProjectType
+  title: string
+  startDate: Date
+  endDate?: Date
+  logo?: URL
+  miniLogo?: URL
+  githubRepo?: URL
+  featured: boolean
+}
+
+enum ProjectType {
+  GAME = "game",
+  WEBSITE = "website",
+  SOFTWARE = "software",
+}
+
+function postProcessProject(project: Project): Project {
+  project = postProcessBase(project) as Project
+
+  project.type = getProjectTypeFromURL(project.file.pathname)
+  project.url = new URL(`/projects/${project.type}s/${project.slug}`, "http://localhost:3000")
+  project.miniLogo = new URL(project.url + "/mini-logo.png")
+
+  // NOTE: Workaround an Astro bug regarding dates in frontmatter, see data/articles.ts for more info
+  if (typeof project.startDate === "string") {
+    project.startDate = new Date(project.startDate)
+  }
+
+  if (typeof project.endDate === "string") {
+    project.endDate = new Date(project.endDate)
+  }
+
+  return project
+}
+
+function getProjectTypeFromURL(path: string): ProjectType {
+  return basename(dirname(path)).slice(0, -1) as ProjectType
+}
+
+export { Project, ProjectType, postProcessProject }

src/layouts/BaseLayout.astro

@@ -46,9 +46,9 @@ const { title, description } = Astro.props
           <Socials />
 
           <div>
-            Made with <a href="https://www.11ty.dev/">Eleventy</a><br />
+            Powered by <a href="https://astro.build/">Astro</a><br />
             <a href="https://github.com/Princesseuh/princesseuh.dev">Source Code</a><br />
-            <a href="/">Settings</a>
+            <a href="/settings">Settings</a>
           </div>
         </section>
       </footer>

src/pages/catalogue.json.astro → src/pages/catalogue/content.json.astro

@@ -1,7 +1,7 @@
 ---
 import { postProcessCatalogueItem, CatalogueItem } from "$data/catalogue"
 
-let catalogueItems = await Astro.fetchContent("../content/catalogue/**/*.md")
+let catalogueItems = await Astro.fetchContent("../../content/catalogue/**/*.md")
 catalogueItems = catalogueItems.map((item) => postProcessCatalogueItem(item as CatalogueItem))
 
 const json = JSON.stringify(

src/pages/catalogue.astro → src/pages/catalogue/index.astro

@@ -3,7 +3,7 @@ import BaseLayout from "$layouts/BaseLayout.astro"
 import Catalogue from "$components/Catalogue.astro"
 ---
 
-<BaseLayout>
+<BaseLayout title="Catalogue">
   <article class="w-wiki mx-auto mt-4 sm:mt-6 px-6 sm:px-0">
     <p class="w-index mx-auto">
       Welcome to my catalogue! This page contains (mostly) all the pieces of media I've played,

src/pages/index.astro

@@ -26,7 +26,7 @@ wikiItems = wikiItems
 ---
 
 <BaseLayout>
-  <article class="w-index mx-auto mt-4 sm:mt-6">
+  <article class="w-index mx-auto mt-2 sm:mt-6">
     <h2 class="mb-4 mt-0 text-4xl">Hello! 💐</h2>
 
     <p>

src/pages/projects/index.astro

@@ -0,0 +1,56 @@
+---
+import BaseLayout from "$layouts/BaseLayout.astro"
+import { postProcessProject, Project, ProjectType } from "$data/projects"
+
+let projects = Astro.fetchContent("../../content/projects/**/*.md")
+projects = projects.map((project) => postProcessProject(project))
+
+// Create an object with sub-objects corresponding to the different types of projects that exist
+// The cool part about this: it's 100% automated based on types and content, we'll practically never have to touch this
+type ProjectList = {
+  [projectType in ProjectType]?: Project[]
+}
+
+const projectsPerType: ProjectList = {}
+Object.values(ProjectType).forEach((projectType) => {
+  projectsPerType[projectType] = projects.filter((project) => project.type === projectType)
+})
+
+// Utils
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+---
+
+<BaseLayout title="Projects">
+  <article class="w-index mx-auto mt-4 sm:mt-6">
+    <h2>Projects</h2>
+
+    <p>
+      A list of my projects, it isn't necessarily exhaustive and mostly contain the projects I'm the
+      most proud of. Additionally, projects marked with a star (🌟) are featured projects I'm even
+      more proud of!
+    </p>
+
+    To see more projects, feel free to visit my <a href="https://github.com/Princesseuh">GitHub</a> or
+    for games, my <a href="https://princesseuh.itch.io/">Itch.io</a>
+
+    {Object.entries(projectsPerType)
+      .filter((type) => type[1].length > 0)
+      .map((type) => <div>
+          <h3>{capitalizeFirstLetter(type[0]) + "s"}</h3>
+          <div class="flex gap-4">
+            {type[1].map( (project) => <a href={project.url} class={project.featured ? "project-box project-featured" : "project-box"}>
+                  {project.featured && <span class="absolute right-2 top-1 w-5 h-5 fill-current" title="Featured project">
+                      🌟
+                    </span>}
+                  <img src={project.miniLogo} class="w-[48px] h-[48px] mr-4" />
+                  <div>
+                    <h4 class="block font-bold m-0">{project.title}</h4>
+                    <span class="text-sm text-creative-work">{project.description}</span>
+                  </div>
+                </a>, )}
+          </div>
+        </div>)}
+  </article>
+</BaseLayout>

src/pages/settings.astro

@@ -0,0 +1,49 @@
+---
+import BaseLayout from "$layouts/BaseLayout.astro"
+---
+
+<BaseLayout>
+  <article class="post">
+    <h1>Settings</h1>
+
+    <p>Trying to make it feel more like home, eh?</p>
+
+    <div>
+      <input type="checkbox" id="cb--spa" />
+      <label for="cb--spa"> Disable SPA (page will reload) </label><br />
+
+      <input type="checkbox" id="cb--transitions" />
+      <label for="cb--transitions"> Disable page transitions </label><br />
+
+      <input type="checkbox" id="cb--prefetch" />
+      <label for="cb--prefetch">
+        Disable page prefetch (using <a href="https://getquick.link/">Quicklink</a>)
+      </label><br />
+    </div>
+  </article>
+
+  <script>
+    ;(function () {
+      const disableSPA = document.getElementById("cb--spa")
+      const disableTransitions = document.getElementById("cb--transitions")
+      const disablePrefetch = document.getElementById("cb--prefetch")
+      disableSPA.checked = localStorage.getItem("spaDisabled") == "true"
+      disableTransitions.disabled = disableSPA.checked
+      disableTransitions.checked = localStorage.getItem("transitionsDisabled") == "true"
+      disablePrefetch.checked = localStorage.getItem("prefetchDisabled") == "true"
+
+      disableSPA.addEventListener("change", () => {
+        localStorage.setItem("spaDisabled", disableSPA.checked ? "true" : "false")
+        location.reload()
+      })
+
+      disableTransitions.addEventListener("change", () => {
+        localStorage.setItem("transitionsDisabled", disableTransitions.checked ? "true" : "false")
+      })
+
+      disablePrefetch.addEventListener("change", () => {
+        localStorage.setItem("prefetchDisabled", disablePrefetch.checked ? "true" : "false")
+      })
+    })()
+  </script>
+</BaseLayout>

src/pages/wiki.astro → src/pages/wiki/index.astro

@@ -2,7 +2,7 @@
 import WikiLayout from "$layouts/WikiLayout.astro"
 import { postProcessWikiItem } from "$data/wiki.ts"
 
-let wikiIndex = await Astro.fetchContent("../content/wiki/index.md")[0]
+let wikiIndex = await Astro.fetchContent("../../content/wiki/index.md")[0]
 wikiIndex = postProcessWikiItem(wikiIndex)
 ---
 

src/scripts/catalogue.ts

@@ -34,7 +34,7 @@ function buildLibrary(subset: CatalogueJSONItem[] = fullElements) {
 }
 
 ;(function initCatalogue() {
-  fetch("/catalogue.json")
+  fetch("/catalogue/content.json")
     .then((response) => response.json())
     .then((data) => {
       fullElements = data

tailwind.config.js

@@ -54,6 +54,9 @@ module.exports = {
       gridTemplateColumns: {
         wiki: "16% 61% 17%",
       },
+      opacity: {
+        15: "0.15",
+      },
     },
   },
 
@@ -72,6 +75,27 @@ module.exports = {
             marginBottom: "1rem",
           },
         },
+        ".project-box": {
+          padding: "1em",
+          position: "relative",
+          background: "transparent",
+          color: theme("colors.white"),
+          opacity: "0.85",
+          transition: "all 0.1s ease-out",
+          display: "flex",
+          width: "431px",
+          "&.project-featured": {
+            opacity: "1",
+          },
+          "&:hover": {
+            // NOTE: When applied through the CSS-in-JS syntax, opacity information doesn't stay on colors, this workaround it
+            "@apply bg-beach-watermelon hover:bg-opacity-15": {},
+            opacity: "1",
+            color: theme("colors.white"),
+            textDecoration: "none",
+            transition: "all 0.1s ease-out",
+          },
+        },
         // TODO: Figure out a way to simplify this perhaps? This is by far the most complex element on the website
         ".cover-title": {
           position: "absolute",
@@ -82,7 +106,6 @@ module.exports = {
           textAlign: "center",
           fontSize: theme("fontSize.3xl"),
           lineHeight: "180px",
-          // NOTE: When applied through the CSS-in-JS syntax, opacity information doesn't stay on colors, this workaround it
           "@apply bg-pinky-unicorny bg-opacity-80 transition-opacity": {},
           opacity: "0",
           borderRadius: theme("borderRadius.sm"),