Prepare components for first blog article

Author: Rikthepixel

src/assets/state/articles/article.d.ts

@@ -1,13 +1,15 @@
-import { StaticImageData } from "next/image";
 import { ReactNode } from "react";
+import { StaticImageData } from "next/image";
+
 import { IMember } from "../team";
+import { ITag } from "./tags";
 
 type IArticle = {
   title: string;
   thumbnail: StaticImageData,
   thumbnailAlt: string;
 
-  tags: string[];
+  tags: ITag[];
 
   /** 
   * A high level overview of the article E.g. Technology 
@@ -16,8 +18,6 @@ type IArticle = {
 
   slug: string;
 
-
-
   author: IMember;
 
   teaser: string;

src/assets/state/articles/tags.ts

@@ -1,5 +1,20 @@
+export interface ITag {
+  name: string,
+  hidden?: boolean;
+}
+
 export default {
-  "news": "News",
-  "commitRocket": "Commit Rocket",
-  "git": "Git"
-} satisfies Record<string, string>;
+  "news": {
+    name: "News",
+  },
+  "commitRocket": {
+    name: "Commit Rocket"
+  },
+  "git": {
+    name: "Git"
+  },
+  "intro": {
+    name: "Introduction"
+  },
+  
+} satisfies Record<string, ITag>;

src/components/content/List.tsx

@@ -0,0 +1,54 @@
+import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
+import React, { DetailedHTMLProps, ForwardedRef, forwardRef, HTMLAttributes, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+
+export const style = cva("pl-5 flex flex-col", {
+  variants: {
+    numbered: {
+      true: "list-decimal",
+      false: "list-disc"
+    }
+  },
+  defaultVariants: {
+    numbered: false
+  }
+});
+
+export type TagProps = DetailedHTMLProps<HTMLAttributes<HTMLUListElement | HTMLOListElement>, HTMLUListElement | HTMLOListElement>;
+export type VariantProps = GetVariantProps<typeof style>;
+export type BaseProps = {};
+
+export type ListProps = BaseProps & TagProps & VariantProps;
+
+const List = forwardRef((
+  { numbered, className, ...props }: Omit<ListProps, "ref">,
+  ref: ForwardedRef<HTMLUListElement | HTMLOListElement>
+) => {
+
+  const ListTag = numbered ? "ol" : "ul";
+
+  const computedClassName = useMemo(
+    () => twMerge(style({ numbered }), className),
+    [className]
+  );
+
+  return (
+    <ListTag
+      //@ts-ignore
+      ref={ref}
+      className={computedClassName}
+      {...props}
+    />
+  );
+});
+
+
+const children = {
+  Item: forwardRef((props: DetailedHTMLProps<HTMLAttributes<HTMLLIElement>, HTMLLIElement>, ref: ForwardedRef<HTMLLIElement>) => {
+    return <li ref={ref} {...props} />;
+  })
+};
+
+export type IArticleList = typeof List & typeof children;
+
+export default Object.assign({}, List, children) as IArticleList;

src/components/layout/Heading.tsx

@@ -32,4 +32,22 @@ export const H4 = makeHeading(4, "text-2xl font-semibold md:text-3xl");
 export const H5 = makeHeading(5, "text-xl font-semibold md:text-2xl");
 export const H6 = makeHeading(6, "text-lg font-semibold md:text-xl");
 
-export default { H1, H2, H3, H4, H5, H6 };
+export default {
+  /** Styled `h1` */
+  H1,
+  
+  /** Styled `h2` */
+  H2,
+  
+  /** Styled `h3` */
+  H3,
+  
+  /** Styled `h4` */
+  H4,
+  
+  /** Styled `h5` */
+  H5,
+  
+  /** Styled `h6` */
+  H6
+};

src/components/navigation/Link.tsx

@@ -20,6 +20,7 @@ export const style = cva("transition-colors gap-2", {
     }
   },
   defaultVariants: {
+    color: "primary",
     underline: false
   }
 });
@@ -28,13 +29,14 @@ export type VariantProps = GetVariantProps<typeof style>;
 
 type LinkProps = {
   underline?: boolean;
+  nofollow?: boolean;
   external?: boolean;
-} & RequiredKeys<VariantProps, "color">
+} & VariantProps
   & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps>
   & InternalLinkProps
   & React.RefAttributes<HTMLAnchorElement>;
 
-const Link = ({ className, color, underline, children, external, hrefLang = "en", rel, ...props }: LinkProps) => {
+const Link = ({ className, color, underline, children, external, nofollow, hrefLang = "en", rel, ...props }: LinkProps) => {
 
   const computedClassName = useMemo(
     () => twMerge(style({ color, underline }), className),
@@ -45,13 +47,13 @@ const Link = ({ className, color, underline, children, external, hrefLang = "en"
     <InternalLink
       className={computedClassName}
       hrefLang={hrefLang}
-      rel={`${external ? "external" : ""} ${rel ?? ""}`}
+      rel={`${external ? "external opener" : ""} ${nofollow ? "nofollow" : ""} ${rel ?? ""}`.trim()}
       target={external ? "_blank" : undefined}
       {...props}
     >
       {children}
       {external && <ArrowTopRightOnSquareIcon
-        className="inline w-4 h-4"
+        className="inline-block w-[1em] h-[1em]"
       />}
     </InternalLink>
   );

src/components/pages/blog/ArticleBrief.tsx

@@ -67,19 +67,20 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, readtime, teaser, author
         />
       </NextLink>
       <div className="flex flex-col flex-1 gap-4 p-4 pt-0">
-        {tags.length > 0 && <div className="flex flex-wrap gap-1">
-          {tags.map((tag, i) => (
-            <LinkButton
-              key={i}
-              href={makeTagUrl(tag)}
-              color="secondary"
-              className="px-2 py-1 text-xs font-semibold border"
-              prefetch={false}
-            >
-              {tag}
-            </LinkButton>
+        {tags.length > 0 && <ul className="flex flex-wrap gap-1">
+          {tags.map(({ name, hidden }, i) => (
+            !hidden && <li key={i}>
+              <LinkButton
+                href={makeTagUrl(name)}
+                color="secondary"
+                className="px-2 py-1 text-xs font-semibold border"
+                prefetch={false}
+              >
+                {name}
+              </LinkButton>
+            </li>
           ))}
-        </div>}
+        </ul>}
         <Link href={url} color="fill-contrast" className="block text-2xl font-bold">
           {title}
         </Link>

src/components/pages/blog/post/ArticleComponents.tsx

@@ -0,0 +1,36 @@
+import List from "@/components/content/List";
+import Heading from "@/components/layout/Heading";
+import Link from "@/components/navigation/Link";
+
+import ArticleTableOfContent from "./ArticleTableOfContent";
+import React, { useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+const A = {
+  /** Wrapped `ol`/`ul` */
+  Ls: List,
+  /** Wrapped `li` */
+  Li: List.Item,
+  /** Table Of Content for the Article */
+  TOC: ArticleTableOfContent,
+
+  /** `A` tag wrapped with custom styling  */
+  Link,
+
+  /** 
+   * A container `div` that inherits from the parent container. 
+   * 
+   * Usually used for containing related blocks of texts to style them in a consisten way.
+   */
+  Container: ({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+    const computedClassName = useMemo(
+      () => twMerge("flex flex-col gap-8", className),
+      [className]
+    );
+
+    return <div className={computedClassName}  {...props} />;
+  },
+
+  ...Heading,
+};
+
+export default A;

src/components/pages/blog/post/ArticleContext.tsx

@@ -3,13 +3,15 @@ import { createContext, useContext } from "react";
 
 export const ArticleContext = createContext<ArticleContext>({ ready: false });
 
+export interface Heading {
+  text: string;
+  level: number;
+  id: string;
+}
+
 export type ArticleContext = ({
   ready: true;
-  headings: {
-    text: string;
-    level: number;
-    id: string;
-  }[];
+  headings: Heading[];
   path: string;
 } & IArticle) | {
   ready: false;

src/components/pages/blog/post/ArticleMeta.tsx

@@ -25,7 +25,7 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
   return (
     <div className="flex flex-wrap items-center justify-center gap-4">
       <AuthorTag
-        className="flex items-center gap-2 group/author"
+        className="flex items-center gap-2 group/writer"
         //@ts-ignore
         href={author.links.length > 0 ? author.links[0].href : undefined}
         //@ts-ignore
@@ -34,16 +34,17 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
       >
         <div className="overflow-hidden rounded-full">
           <img
-            className="object-contain w-8 h-8 rounded-full aspect-square group-hover/author:scale-110 motion-safe:transition-all"
+            aria-hidden
+            className="object-contain w-8 h-8 rounded-full aspect-square group-hover/writer:scale-110 motion-safe:transition-all"
             src={author.image.src}
             width={author.image.width}
             height={author.image.height}
             alt="A picture of the author"
           />
         </div>
         <div className="flex flex-col">
-          <div>{author.fullName}</div>
-          <div className="text-sm">{author.title}</div>
+          <p aria-label="article-author" itemProp="author">{author.fullName}</p>
+          <p className="text-sm" aria-hidden>{author.title}</p>
         </div>
       </AuthorTag>
       {DotSeparator}