tooling update

apps/cms/src/components/shared/SideBar.astro

@@ -20,13 +20,15 @@ const navigation = [
 
 <aside class="p-4 bg-gray-800 h-screen dark:bg-gray-900">
   <a class="text-4xl mb-6 mt-2 block text-center text-gray-100 font-bold">🌺</a>
-  {navigation.map((item) => (
-    <a
-      class="block py-2 px-3 rounded mb-2 text-md font-bold text-gray-300 tracking-tight hover:bg-gray-700 hover:text-gray-100"
-      href={item.link}
-    >
-      <span class="mr-1 text-lg">{item.icon}</span>
-      {item.name}
-    </a>
-  ))}
+  {
+    navigation.map((item) => (
+      <a
+        class="block py-2 px-3 rounded mb-2 text-md font-bold text-gray-300 tracking-tight hover:bg-gray-700 hover:text-gray-100"
+        href={item.link}
+      >
+        <span class="mr-1 text-lg">{item.icon}</span>
+        {item.name}
+      </a>
+    ))
+  }
 </aside>

apps/princesseuh.dev/adopt-ts.d.ts

@@ -1,15 +1,5 @@
+/// <reference types="astro/client" />
+
 // Unfortunately, some packages don't have types available.
 
 declare module "quicklink"
-
-declare namespace astroHTML.JSX {
-  interface HTMLAttributes {
-    /**
-     * The HTMLElement property inert is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events
-     * and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs
-     * such as modals where you would want to "trap" the focus inside the modal when it's visible.
-     * @see https://github.com/WICG/inert
-     */
-    inert?: boolean | string | undefined | null
-  }
-}

apps/princesseuh.dev/package.json

@@ -12,13 +12,13 @@
     "copy:images": "cp -r static/assets/images dist/assets/"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^0.2.5",
-    "astro": "1.0.0-rc.1",
+    "@astrojs/tailwind": "^1.0.0",
+    "astro": "1.1.5",
     "astro-auto-import": "^0.1.2",
     "astro-eleventy-img": "^0.5.0",
     "astro-icon": "0.7.3",
     "netlify-plugin-cache": "^1.0.3",
     "quick-score": "^0.2.0",
-    "quicklink": "^2.2.0"
+    "quicklink": "^2.3.0"
   }
 }

apps/princesseuh.dev/src/components/MarkdownImage.astro

@@ -12,16 +12,7 @@ interface Props {
   placeholderOptions?: PlaceholderOptions
 }
 
-const {
-  src,
-  alt,
-  caption,
-  options = {},
-  sizes = "",
-  classes = undefined,
-  quality = 90,
-  placeholderOptions = {},
-} = Astro.props as Props
+const { src, alt } = Astro.props
 
 const url = new URL(Astro.request.url).pathname
 

apps/princesseuh.dev/src/components/MarkdownNoteBlock.astro

@@ -3,10 +3,10 @@ export interface Props {
   title?: string
 }
 
-const { title } = Astro.props as Props
+const { title } = Astro.props
 ---
 
 <div class="block-note">
   <span class="block-title">{title}</span>
-  <slot></slot>
+  <slot />
 </div>

apps/princesseuh.dev/src/components/articleList/ArticleListAside.astro

@@ -1,5 +1,5 @@
 ---
-import { Article } from "$data/articles"
+import type { Article } from "$data/articles"
 
 const articles = await Astro.glob<Article>("/content/articles/**/*.md")
 const tags: Array<[string, number]> = [
@@ -23,21 +23,25 @@ const years: Array<[string, number]> = [
   <section>
     <h2 class="mb-3">Tags</h2>
     <ul class="list-none m-0 p-0">
-      {tags.map((tag) => (
-        <li>
-          <a href={"/articles/tags/" + tag[0] + "/"}>{tag[0]}</a> ({tag[1]})
-        </li>
-      ))}
+      {
+        tags.map((tag) => (
+          <li>
+            <a href={"/articles/tags/" + tag[0] + "/"}>{tag[0]}</a> ({tag[1]})
+          </li>
+        ))
+      }
     </ul>
   </section>
   <section>
     <h2 class="mb-3">Year</h2>
     <ul class="list-none m-0 p-0">
-      {years.map((year) => (
-        <li>
-          <a href={"/articles/years/" + year[0] + "/"}>{year[0]}</a> ({year[1]})
-        </li>
-      ))}
+      {
+        years.map((year) => (
+          <li>
+            <a href={"/articles/years/" + year[0] + "/"}>{year[0]}</a> ({year[1]})
+          </li>
+        ))
+      }
     </ul>
   </section>
 </aside>

apps/princesseuh.dev/src/components/layout/Header.astro

@@ -1,6 +1,6 @@
 ---
-import Socials from "$components/layout/Socials.astro"
 import MobileMenuToggle from "$components/layout/MobileMenuToggle.astro"
+import Socials from "$components/layout/Socials.astro"
 
 import { headerMenu as menu } from "$data/headerMenu"
 ---
@@ -13,11 +13,13 @@ import { headerMenu as menu } from "$data/headerMenu"
       </h1>
 
       <nav class="hidden ml-2 sm:inline-block">
-        {menu.map((item) => (
-          <a class="header-link" href={`/${item.toLowerCase()}/`}>
-            {item}
-          </a>
-        ))}
+        {
+          menu.map((item) => (
+            <a class="header-link" href={`/${item.toLowerCase()}/`}>
+              {item}
+            </a>
+          ))
+        }
       </nav>
     </div>
 

apps/princesseuh.dev/src/components/layout/MobileMenu.astro

@@ -1,9 +1,9 @@
 ---
 import { headerMenu as globalMenu } from "$data/headerMenu"
-import Socials from "./Socials.astro"
-import { getWikiItemsByCategory, WikiItem, postProcessWikiItem } from "$data/wiki"
+import type { MarkdownInstance, WikiItemInstance } from "$data/shared"
+import { getWikiItemsByCategory, postProcessWikiItem, WikiItem } from "$data/wiki"
 import { wikiCategories, WikiCategory } from "$data/wikiCategories"
-import { MarkdownInstance, WikiItemInstance } from "$data/shared"
+import Socials from "./Socials.astro"
 
 let rawWikiItems: MarkdownInstance<WikiItem>[] = []
 let wikiItems: MarkdownInstance<WikiItem>[] = []
@@ -27,31 +27,35 @@ if (isWikiPage) {
 >
   <div class="p-3 flex flex-col gap-4">
     {/* Global header menu */}
-    {globalMenu.map((item) => (
-      <a class="header-link bg-fin-lanka mr-0 p-3 text-xl" href={`/${item.toLowerCase()}/`}>
-        {item}
-      </a>
-    ))}
+    {
+      globalMenu.map((item) => (
+        <a class="header-link bg-fin-lanka mr-0 p-3 text-xl" href={`/${item.toLowerCase()}/`}>
+          {item}
+        </a>
+      ))
+    }
   </div>
 
   {/* Wiki-exclusive menu */}
-  {isWikiPage && (
-    <div class="flex flex-col gap-3 p-3">
-      {wikiCategories.map((category: WikiCategory) => (
-        <>
-          <span class="text-sugar-cane block font-bold">{category.title}</span>
-          {getWikiItemsByCategory(wikiItems, category.key).map((item: WikiItemInstance) => (
-            <a
-              class="header-link bg-fin-lanka mr-0 p-2 text-lg"
-              href={item.frontmatter.url.pathname}
-            >
-              {item.frontmatter.navigation.label || item.frontmatter.title}
-            </a>
-          ))}
-        </>
-      ))}
-    </div>
-  )}
+  {
+    isWikiPage && (
+      <div class="flex flex-col gap-3 p-3">
+        {wikiCategories.map((category: WikiCategory) => (
+          <>
+            <span class="text-sugar-cane block font-bold">{category.title}</span>
+            {getWikiItemsByCategory(wikiItems, category.key).map((item: WikiItemInstance) => (
+              <a
+                class="header-link bg-fin-lanka mr-0 p-2 text-lg"
+                href={item.frontmatter.url.pathname}
+              >
+                {item.frontmatter.navigation.label || item.frontmatter.title}
+              </a>
+            ))}
+          </>
+        ))}
+      </div>
+    )
+  }
 
   <Socials classes="mt-4 justify-center gap-7 mb-8" size={45} />
 </div>

apps/princesseuh.dev/src/components/shared/ArticlePreview.astro

@@ -1,12 +1,12 @@
 ---
-import { Article } from "$data/articles"
+import type { Article } from "$data/articles"
 import { readableDate } from "$utils"
 
 export interface Props {
   article: Article
 }
 
-const { article } = Astro.props as Props
+const { article } = Astro.props
 ---
 
 <section class="mb-3">
@@ -17,9 +17,11 @@ const { article } = Astro.props as Props
   <div class="mb-2 text-creative-work text-sm">
     {readableDate(article.date)}
     ·
-    {article.tags
-      .map((tag) => <a href={"/articles/tags/" + tag + "/"}>{tag}</a>)
-      .reduce((prev: string, curr: string) => (prev === null ? [curr] : [prev, ", ", curr]))}
+    {
+      article.tags
+        .map((tag) => <a href={"/articles/tags/" + tag + "/"}>{tag}</a>)
+        .reduce((prev: string, curr: string) => (prev === null ? [curr] : [prev, ", ", curr]))
+    }
   </div>
 
   {article.tagline || null}

apps/princesseuh.dev/src/components/shared/ContentHeader.astro

@@ -1,8 +1,8 @@
 ---
-import { readableDate } from "$utils"
 import type { Article } from "$data/articles"
-import type { WikiItem } from "$data/wiki"
 import type { Project } from "$data/projects"
+import type { WikiItem } from "$data/wiki"
+import { readableDate } from "$utils"
 
 export interface Props {
   item: Article | WikiItem | Project
@@ -13,18 +13,20 @@ const isArticle = (item: Article | WikiItem | Project): item is Article => {
   return (item as Article).date !== undefined || (item as Article).tags !== undefined
 }
 
-const { item, includeTags } = Astro.props as Props
+const { item, includeTags } = Astro.props
 ---
 
 <header class="mb-4 mt-4">
   <h1 class="text-4xl sm:text-[3.5rem] mb-4 mt-0 leading-none">{item.title}</h1>
-  {item.tagline && <h2 class="relative top-[-5px] m-0 text-xl">{item.tagline}</h2>}
-  {isArticle(item) && includeTags && (
-    <div class="text-creative-work">
-      {readableDate(item.date)} ·{" "}
-      {item.tags
-        .map((tag) => <a href={"/articles/tags/" + tag + "/"}>{tag}</a>)
-        .reduce((prev: string, curr: string) => (prev === null ? [curr] : [prev, ", ", curr]))}
-    </div>
-  )}
+  {item.tagline ? <h2 class="relative top-[-5px] m-0 text-xl">{item.tagline}</h2> : <></>}
+  {
+    isArticle(item) && includeTags ? (
+      <div class="text-creative-work">
+        {readableDate(item.date)} ·{" "}
+        {item.tags
+          .map((tag) => <a href={"/articles/tags/" + tag + "/"}>{tag}</a>)
+          .reduce((prev: string, curr: string) => (prev === null ? [curr] : [prev, ", ", curr]))}
+      </div>
+    ) : null
+  }
 </header>

apps/princesseuh.dev/src/components/wiki/WikiNavigation.astro

@@ -1,7 +1,7 @@
 ---
-import { getWikiItemsByCategory, WikiItem, postProcessWikiItem } from "$data/wiki"
+import type { WikiItemInstance } from "$data/shared"
+import { getWikiItemsByCategory, postProcessWikiItem, WikiItem } from "$data/wiki"
 import { wikiCategories, WikiCategory } from "$data/wikiCategories"
-import { WikiItemInstance } from "$data/shared"
 
 const rawWikiItems = await Astro.glob<WikiItem>("/content/wiki/**/*.md")
 const wikiItems = rawWikiItems.map((item) => ({
@@ -13,19 +13,21 @@ const url = new URL(Astro.request.url)
 ---
 
 <ul class="m-0 list-none p-0 wiki-navigation hidden sm:block">
-  {wikiCategories.map((category: WikiCategory) => (
-    <li>
-      <span class="text-sugar-cane block font-bold">{category.title}</span>
-      {getWikiItemsByCategory(wikiItems, category.key).map((item: WikiItemInstance) => (
-        <a
-          class={`block ${
-            url.pathname == item.frontmatter.url.pathname ? "text-pinky-unicorny font-bold" : ""
-          }`}
-          href={item.frontmatter.url.pathname}
-        >
-          {item.frontmatter.navigation.label || item.frontmatter.title}
-        </a>
-      ))}
-    </li>
-  ))}
+  {
+    wikiCategories.map((category: WikiCategory) => (
+      <li>
+        <span class="text-sugar-cane block font-bold">{category.title}</span>
+        {getWikiItemsByCategory(wikiItems, category.key).map((item: WikiItemInstance) => (
+          <a
+            class={`block ${
+              url.pathname == item.frontmatter.url.pathname ? "text-pinky-unicorny font-bold" : ""
+            }`}
+            href={item.frontmatter.url.pathname}
+          >
+            {item.frontmatter.navigation.label || item.frontmatter.title}
+          </a>
+        ))}
+      </li>
+    ))
+  }
 </ul>

apps/princesseuh.dev/src/components/wiki/WikiTOC.astro

@@ -1,22 +1,24 @@
 ---
-import { MarkdownHeader } from "$data/shared"
+import type { MarkdownHeading } from "$data/shared"
 
 export interface Props {
-  headers: MarkdownHeader[]
+  headers: MarkdownHeading[]
   maxDepth: number
 }
 
-const { headers, maxDepth } = Astro.props as Props
+const { headers, maxDepth } = Astro.props
 const filteredHeaders = headers.filter((header) => header.depth > 1 && header.depth < maxDepth + 1)
 ---
 
 <span class="font-semibold mb-2">On this page</span>
 <nav class="toc">
   <ol>
-    {filteredHeaders.map((header) => (
-      <li class={`toc-depth-${header.depth}`}>
-        <a href={`#${header.slug}`}>{header.text}</a>
-      </li>
-    ))}
+    {
+      filteredHeaders.map((header) => (
+        <li class={`toc-depth-${header.depth}`}>
+          <a href={`#${header.slug}`}>{header.text}</a>
+        </li>
+      ))
+    }
   </ol>
 </nav>

apps/princesseuh.dev/src/data/articles.ts

@@ -20,4 +20,5 @@ function postProcessArticle(article: Article, file: string): Article {
   return article
 }
 
-export { Article, postProcessArticle }
+export { postProcessArticle }
+export type { Article }