some better html templating

Signed-off-by: Vu Van Dung <[email protected]>
joulev · Jun 14, 2024 · 71fd659 · 71fd659
1 parent 2dcd1db
commit 71fd659
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 102 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "dotenv": "16.4.5",
     "drizzle-kit": "0.22.7",
     "drizzle-orm": "0.31.2",
+    "github-slugger": "2.0.0",
     "graphql": "16.8.1",
     "graphql-request": "7.0.1",
     "immer": "10.1.1",

diff --git a/src/app/(public)/(home)/github-stats.tsx b/src/app/(public)/(home)/github-stats.tsx
@@ -62,7 +62,10 @@ function BackgroundPattern() {
     .fill(null)
     .map(_ => colours[Math.floor(seededRandom() * colours.length)]);
   return (
-    <div className="absolute -left-6 -top-6 -z-10 grid grid-cols-7 grid-rows-7 gap-1">
+    <div
+      className="absolute -left-6 -top-6 -z-10 grid grid-cols-7 grid-rows-7 gap-1 not-sr-only"
+      aria-hidden="true"
+    >
       {days.map((c, i) => (
         <div key={i} className="size-3 rounded-[0.2rem]" style={{ background: c }} />
       ))}
@@ -72,9 +75,9 @@ function BackgroundPattern() {
 
 function GitHubStatsData({ label, value }: { label: React.ReactNode; value: number }) {
   return (
-    <div>
-      <span className="mr-1 text-sm text-text-secondary">{label}:</span>
-      {value}
+    <div className="flex flex-row items-baseline">
+      <dt className="mr-1 text-sm text-text-secondary">{label}:</dt>
+      <dd>{value}</dd>
     </div>
   );
 }
@@ -90,10 +93,10 @@ export async function GitHubStats() {
         </>
       }
       right={
-        <div className="flex flex-row flex-wrap gap-x-6 sm:gap-x-4 md:gap-x-6">
+        <dl className="flex flex-row flex-wrap gap-x-6 sm:gap-x-4 md:gap-x-6">
           <GitHubStatsData label="Issues" value={issues} />
           <GitHubStatsData label="PRs" value={prs} />
-          <hr className="w-full border-none" />
+          <div className="w-full border-none" />
           <GitHubStatsData
             label={
               <>
@@ -102,7 +105,7 @@ export async function GitHubStats() {
             }
             value={contribs}
           />
-        </div>
+        </dl>
       }
       title="GitHub Stats"
       icon={GitHub}

diff --git a/src/app/(public)/(home)/metadata-card.tsx b/src/app/(public)/(home)/metadata-card.tsx
@@ -18,9 +18,9 @@ export function MetadataCard({
       {left}
       <div className="flex min-w-0 flex-grow flex-col">
         <div className="flex flex-grow flex-row justify-between">
-          <div className="text-xs font-light uppercase tracking-widest text-text-tertiary">
+          <h3 className="text-xs font-light uppercase tracking-widest text-text-tertiary">
             {title}
-          </div>
+          </h3>
           <LinkButton
             href={href}
             variants={{ variant: "ghost", size: "icon-sm" }}

diff --git a/src/app/(public)/(home)/music-data.tsx b/src/app/(public)/(home)/music-data.tsx
@@ -19,10 +19,12 @@ export async function MusicData() {
         <img src={thumbnail?.url} alt={song.name} className="size-18 rounded-[0.5rem] opacity-80" />
       }
       right={
-        <>
-          <div className="truncate text-lg font-semibold">{song.name}</div>
-          <div className="truncate text-sm text-text-secondary">{song.artist.name}</div>
-        </>
+        <dl>
+          <dt className="sr-only">Song name</dt>
+          <dd className="truncate text-lg font-semibold">{song.name}</dd>
+          <dt className="sr-only">Artist</dt>
+          <dd className="truncate text-sm text-text-secondary">{song.artist.name}</dd>
+        </dl>
       }
       title="Recent favourite"
       icon={PlayCircle}

diff --git a/src/app/(public)/(home)/page.module.css b/src/app/(public)/(home)/page.module.css
diff --git a/src/app/(public)/(home)/page.tsx b/src/app/(public)/(home)/page.tsx
@@ -2,19 +2,16 @@ import type { Metadata } from "next";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import { ChevronRight, GitHub, Mail } from "~/components/icons";
-import { LinkButton } from "~/components/ui/button";
+import { GitHub, Mail } from "~/components/icons";
 import { Card } from "~/components/ui/card";
 import { Link } from "~/components/ui/link";
 import { List, ListContent, ListHeader, ListItem } from "~/components/ui/lists";
-import { cn } from "~/lib/cn";
 
 import { opengraphImage } from "~/app/opengraph";
 
 import { getGithubReadme } from "./get-github-readme";
 import { GitHubStats } from "./github-stats";
 import { MusicData } from "./music-data";
-import styles from "./page.module.css";
 
 function ReadmeA({ href, ...rest }: React.ComponentPropsWithoutRef<"a">) {
   return <Link href={href ?? "/"} {...rest} />;
@@ -35,10 +32,11 @@ export default function Page() {
       <Card className="flex flex-col p-0">
         <section className="flex flex-col gap-6 bg-bg-darker p-6 pt-9 sm:p-9">
           <h1 className="text-3xl font-medium">Vu Van Dung</h1>
-          <div className="flex flex-row flex-wrap justify-between sm:justify-normal gap-x-9 gap-y-2 font-mono text-text-secondary [&_a:hover]:text-text-primary [&_a]:transition">
+          <dl className="flex flex-row flex-wrap justify-between sm:justify-normal gap-x-9 gap-y-2 font-mono text-text-secondary [&_a:hover]:text-text-primary [&_a]:transition">
             <div className="flex flex-col gap-2">
-              <div className="flex flex-row items-center gap-3">
-                <svg width="24" height="24" fill="none">
+              <dt className="sr-only">Native Vietnamese name</dt>
+              <dd className="flex flex-row items-center gap-3">
+                <svg width="24" height="24" fill="none" className="not-sr-only">
                   <title>Vietnam flag</title>
                   <g clipPath="url(#a)">
                     <path
@@ -56,7 +54,7 @@ export default function Page() {
                     </clipPath>
                   </defs>
                 </svg>
-                <div aria-label="Native name">
+                <span>
                   <a
                     href="https://en.wiktionary.org/wiki/Vũ"
                     target="_blank"
@@ -79,83 +77,49 @@ export default function Page() {
                     <strong>Dũng</strong>
                   </a>{" "}
                   <span className="font-sans text-xs text-text-tertiary">/vu van zuŋ/</span>
-                </div>
-              </div>
-              <div className="flex flex-row items-center gap-3">
-                <svg width="24" height="24" fill="none">
+                </span>
+              </dd>
+              <dt className="sr-only">Location</dt>
+              <dd className="flex flex-row items-center gap-3">
+                <svg width="24" height="24" fill="none" className="not-sr-only">
                   <title>Location</title>
                   <path
                     d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"
                     className="stroke-text-tertiary"
                   />
                   <circle cx="12" cy="10" r="3" className="fill-text-secondary" />
                 </svg>
-                <div>Singapore</div>
-              </div>
+                <span>Singapore</span>
+              </dd>
             </div>
             <div className="flex flex-col gap-2 sm:mx-auto">
-              <div className="flex flex-row items-center gap-3">
-                <GitHub className="[&_path]:stroke-1 text-text-tertiary" />
+              <dt className="sr-only">GitHub Profile</dt>
+              <dd className="flex flex-row items-center gap-3">
+                <GitHub className="[&_path]:stroke-1 text-text-tertiary not-sr-only" />
                 <a href="https://github.com/joulev" target="_blank" rel="noreferrer noopener">
                   @joulev
                 </a>
-              </div>
-              <div className="flex flex-row items-center gap-3">
-                <Mail className="[&_path]:stroke-1 text-text-tertiary" />
+              </dd>
+              <dt className="sr-only">Email</dt>
+              <dd className="flex flex-row items-center gap-3">
+                <Mail className="[&_path]:stroke-1 text-text-tertiary not-sr-only" />
                 <a href="mailto:[email protected]" target="_blank" rel="noreferrer noopener">
                   [email protected]
                 </a>
-              </div>
+              </dd>
             </div>
-          </div>
-        </section>
-        <hr />
-        <section className="flex flex-col bg-bg-darker sm:flex-row">
-          <div className="flex flex-col items-start gap-6 p-6 sm:w-2/3 sm:p-9">
-            <h2 className="text-lg font-bold">Current project</h2>
-            <p>
-              I am building a glassmorphic component system based on{" "}
-              <Link href="https://www.figma.com/community/file/1253443272911187215/apple-design-resources-visionos">
-                visionOS UI design
-              </Link>
-              . You are seeing that design system at work in this very page, and if you are curious,
-              you can check out the completed components (so far) here:
-            </p>
-            <LinkButton href="/glui" variants={{ variant: "primary" }}>
-              Completed components
-              <ChevronRight />
-            </LinkButton>
-          </div>
-          <div
-            className="relative min-h-[120px] flex-grow bg-[1.5rem_0px] sm:bg-[0px_2.5rem]"
-            style={{
-              backgroundImage:
-                "url(\"data:image/svg+xml,%3Csvg width='54' height='54' viewBox='0 0 54 54' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Crect x='5' y='5' width='36' height='36' rx='4' stroke='%238080804d' strokeWidth='2' /%3E%3C/svg%3E\")",
-            }}
-          >
-            <div
-              className={cn(
-                "absolute left-1/2 top-1/2 h-18 w-24 -translate-x-[68px] -translate-y-12 rounded-[1rem] bg-bg-idle backdrop-blur",
-                styles.cardSm,
-              )}
-            />
-            <div
-              className={cn(
-                "absolute left-1/2 top-1/2 h-18 w-24 -translate-x-7 -translate-y-6 rounded-[1rem] bg-bg-idle backdrop-blur",
-                styles.cardSm,
-              )}
-            />
-          </div>
+          </dl>
         </section>
         <section className="flex flex-col gap-6 p-6 sm:p-9">
+          <h2 className="sr-only">About me</h2>
           <ReadmeContent />
           <div className="grid grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-2 sm:grid-rows-1">
             <GitHubStats />
             <MusicData />
           </div>
         </section>
         <hr />
-        <section className="mx-auto flex w-full max-w-lg flex-col gap-6 p-6 sm:p-9">
+        <div className="mx-auto flex w-full max-w-lg flex-col gap-6 p-6 sm:p-9">
           <List>
             <ListHeader asChild>
               <h2>Packages</h2>
@@ -231,7 +195,7 @@ export default function Page() {
               ))}
             </ListContent>
           </List>
-        </section>
+        </div>
       </Card>
     </main>
   );

diff --git a/src/app/(public)/blogs/(posts)/client-components.tsx b/src/app/(public)/blogs/(posts)/client-components.tsx
@@ -32,9 +32,9 @@ export function PostedDate() {
   const { postedDate } = useMetadata();
   const publishedTime = new Date(postedDate);
   return (
-    <div className="max-blog-lg:text-sm text-text-secondary">
+    <p className="max-blog-lg:text-sm text-text-secondary">
       <time dateTime={publishedTime.toISOString().split("T")[0]}>{formatTime(publishedTime)}</time>
-    </div>
+    </p>
   );
 }
 
@@ -48,6 +48,7 @@ export function Author() {
         className="hover-bg relative flex flex-row items-center gap-3 w-fit rounded m-1 p-2 hover:bg-bg-idle hover:m-0 hover:p-3 active:bg-bg-active transition-all"
         {...useHoverBackground({})}
       >
+        <p className="sr-only">Written by</p>
         <img
           src="https://avatars.githubusercontent.com/u/44609036"
           alt="Vu Van Dung"

diff --git a/src/app/(public)/blogs/(posts)/layout.tsx b/src/app/(public)/blogs/(posts)/layout.tsx
@@ -42,7 +42,7 @@ export default function Layout({ children }: LayoutProps) {
               </LinkButton>
             </div>
           </article>
-          <div className="flex flex-col p-6 blog-lg:p-12">
+          <aside className="flex flex-col p-6 blog-lg:p-12">
             <div className="flex-grow max-blog-lg:hidden" />
             <div className="sticky bottom-12 flex w-full flex-col gap-6 blog-lg:gap-12 text-sm">
               <div className="flex flex-col gap-3 max-w-prose mx-auto w-full">
@@ -60,7 +60,7 @@ export default function Layout({ children }: LayoutProps) {
                 <ViewSourceHistory />
               </div>
             </div>
-          </div>
+          </aside>
         </div>
       </Card>
       <IncrementViews />

diff --git a/src/app/(public)/blogs/page.tsx b/src/app/(public)/blogs/page.tsx
@@ -19,7 +19,7 @@ export default function Page() {
             <Title title="blogs" subtitle="My weird knowledge, noted down" />
           </div>
         </div>
-        <div className="flex w-full flex-col divide-y divide-separator">
+        <ul className="flex w-full flex-col divide-y divide-separator">
           {meta
             .sort((a, b) => new Date(b.postedDate).valueOf() - new Date(a.postedDate).valueOf())
             .map(post => {
@@ -31,20 +31,20 @@ export default function Page() {
                       <Balancer>{post.title}</Balancer>
                     </h2>
                     <p className="text-text-secondary">{post.description}</p>
-                    <div className="text-sm text-text-tertiary">
+                    <p className="text-sm text-text-tertiary">
                       Posted{" "}
                       <time
                         dateTime={publishedTime.toISOString()}
                         title={publishedTime.toISOString()}
                       >
                         {formatTime(publishedTime)}
                       </time>
-                    </div>
+                    </p>
                   </div>
                 </PostCard>
               );
             })}
-        </div>
+        </ul>
       </Card>
     </main>
   );

diff --git a/src/app/(public)/blogs/post-card.tsx b/src/app/(public)/blogs/post-card.tsx
@@ -5,13 +5,13 @@ import { Link } from "~/components/ui/link";
 
 export function PostCard({ slug, children }: { slug: string; children: React.ReactNode }) {
   return (
-    <Link
-      href={`/blogs/${slug}`}
-      unstyled
+    <li
       className="hover-bg transition hover:bg-bg-hover active:bg-bg-active"
       {...useHoverBackground({})}
     >
-      {children}
-    </Link>
+      <Link href={`/blogs/${slug}`} unstyled>
+        {children}
+      </Link>
+    </li>
   );
 }
diff --git a/src/app/(public)/glui/components.tsx b/src/app/(public)/glui/components.tsx
@@ -1,3 +1,5 @@
+import { slug } from "github-slugger";
+import { h3 as H3 } from "~/components/blogs";
 import {
   Atom,
   ChevronDown,
@@ -97,9 +99,10 @@ function Showcase({
   noCard,
   children,
 }: React.PropsWithChildren<{ title: string; className?: string; noCard?: boolean }>) {
+  const id = slug(title);
   return (
     <section>
-      <h3>{title}</h3>
+      <H3 id={id}>{title}</H3>
       {noCard ? (
         children
       ) : (

diff --git a/src/app/(public)/glui/page.tsx b/src/app/(public)/glui/page.tsx
@@ -30,15 +30,15 @@ export default function Page() {
                 </span>
               }
               subtitle={
-                <div className="text-lg text-text-secondary">
+                <p className="text-lg text-text-secondary">
                   A component collection based on{" "}
                   <Link href="https://www.figma.com/community/file/1253443272911187215/apple-design-resources-visionos">
                     visionOS UI design system
                   </Link>{" "}
                   and built using <Link href="https://radix-ui.com/">Radix UI</Link>,{" "}
                   <Link href="https://tailwindcss.com/">Tailwind CSS</Link> and{" "}
                   <Link href="https://ui.shadcn.com/">shadcn/ui</Link>.
-                </div>
+                </p>
               }
             />
             <div className="flex flex-col items-stretch gap-x-6 gap-y-3 sm:flex-row">
@@ -59,9 +59,9 @@ export default function Page() {
           </div>
         </div>
         <div className="py-12 px-6 sm:px-12">
-          <div className="prose min-w-full">
+          <article className="prose min-w-full">
             <Documentation />
-          </div>
+          </article>
         </div>
       </Card>
     </main>