feat: landing page skills section

Author: renbou

app/(articles)/ArticlePreview.tsx

@@ -7,7 +7,6 @@ import { BiLinkExternal, BiSolidLock } from "react-icons/bi";
 import { IoEyeOffOutline } from "react-icons/io5";
 
 export type Article = {
-  image: string;
   title: string;
   description: string;
   metadata: {
@@ -47,7 +46,7 @@ export default function ArticlePreview({
 
   return (
     <div
-      className={`article-preview ${hidden && "article-hidden"} transition-transform duration-300 hover:scale-105 hover:cursor-not-allowed`}
+      className={`article-preview ${hidden && "article-hidden"} transition-transform duration-300 hover:scale-105 ${hidden ? "hover:cursor-not-allowed" : "hover:cursor-pointer"}`}
       onClick={(e) => {
         if (!hidden) {
           return;
@@ -65,11 +64,10 @@ export default function ArticlePreview({
       <MaybeLink href={metadata.href ?? ""}>
         <div
           style={{
-            // backgroundImage: `url(${image})`,
             backgroundColor: "oklch(from var(--element) l c h / 0.2)",
             opacity: locking ? 1 : undefined,
           }}
-          className={`article-preview-card relative flex aspect-[16/10] h-auto w-full flex-col items-end justify-between rounded-xl px-6 py-4 transition select-none ${hidden && "opacity-85 grayscale-32"}`}
+          className={`article-preview-card relative flex aspect-16/10 h-auto w-full flex-col items-end justify-between rounded-xl px-6 py-4 transition select-none ${hidden && "opacity-85 grayscale-32"}`}
           title={hidden ? undefined : title}
         >
           <canvas
@@ -81,10 +79,10 @@ export default function ArticlePreview({
               className={`article-preview-card-lock absolute top-1/2 left-1/2 -translate-1/2 text-surface ${locking ? "opacity-100" : "opacity-0"} h-12 w-12 transition-opacity duration-300`}
             />
           )}
-          <span className={`text-xs ${hidden && "opacity-40"}`}>
+          <span className={`font-theme-sans text-xs ${hidden && "opacity-40"}`}>
             [ {metadata.date} ]
           </span>
-          <span className={`text-xs ${hidden && "opacity-40"}`}>
+          <span className={`font-theme-sans text-xs ${hidden && "opacity-40"}`}>
             by [ {metadata.author} ]
           </span>
         </div>
@@ -93,7 +91,7 @@ export default function ArticlePreview({
           style={{ WebkitTextStrokeWidth: "0.01em" }}
         >
           <span
-            className={`article-preview-title mx-3 ${classShaking}`}
+            className={`article-preview-title mx-3 font-theme-sans font-medium ${classShaking}`}
             onAnimationEnd={() => hidden && !canHover && setShaking(false)}
           >
             {title}

app/(articles)/ctf/[slug]/article.css

@@ -0,0 +1,43 @@
+@reference "../../../globals.css";
+
+.prose-theme {
+  --tw-prose-body: var(--theme-raisin-700);
+  --tw-prose-headings: var(--theme-raisin-900);
+  --tw-prose-lead: var(--theme-raisin-600);
+  --tw-prose-links: var(--theme-raisin-900);
+  --tw-prose-bold: var(--theme-raisin-900);
+  --tw-prose-counters: var(--theme-stone-600);
+  --tw-prose-bullets: var(--theme-stone-500);
+  --tw-prose-hr: var(--theme-stone-500);
+  --tw-prose-quotes: var(--theme-raisin-500);
+  --tw-prose-quote-borders: var(--theme-stone-400);
+  --tw-prose-captions: var(--theme-raisin-500);
+  --tw-prose-kbd: var(--theme-raisin-900);
+  --tw-prose-kbd-shadows: rgb(from var(--theme-raisin-900) R G B);
+  --tw-prose-code: var(--theme-raisin-900);
+  --tw-prose-pre-code: var(--theme-raisin-700);
+  --tw-prose-pre-bg: var(--theme-stone-300);
+  --tw-prose-th-borders: var(--theme-raisin-300);
+  --tw-prose-td-borders: var(--theme-raisin-200);
+
+  @variant dark {
+    --tw-prose-body: var(--theme-stone-200);
+    --tw-prose-headings: var(--theme-stone-100);
+    --tw-prose-lead: var(--theme-stone-400);
+    --tw-prose-links: var(--theme-stone-100);
+    --tw-prose-bold: var(--theme-stone-100);
+    --tw-prose-counters: var(--theme-raisin-400);
+    --tw-prose-bullets: var(--theme-raisin-500);
+    --tw-prose-hr: var(--theme-raisin-600);
+    --tw-prose-quotes: var(--theme-stone-500);
+    --tw-prose-quote-borders: var(--theme-raisin-700);
+    --tw-prose-captions: var(--theme-stone-400);
+    --tw-prose-kbd: var(--theme-stone-100);
+    --tw-prose-kbd-shadows: rgb(from var(--theme-stone-100) R G B);
+    --tw-prose-code: var(--theme-stone-100);
+    --tw-prose-pre-code: var(--theme-stone-200);
+    --tw-prose-pre-bg: var(--theme-raisin-800);
+    --tw-prose-th-borders: var(--theme-stone-600);
+    --tw-prose-td-borders: var(--theme-stone-700);
+  }
+}

app/(articles)/ctf/[slug]/code.css

@@ -0,0 +1,105 @@
+.hljs-subst {
+  /* var(--highlight-color) */
+  color: #ffffff;
+}
+
+.hljs-comment {
+  /* var(--highlight-comment) */
+  color: #999999;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  /* var(--highlight-keyword) */
+  color: #88aece;
+}
+
+.hljs-attr {
+  /* var(--highlight-attribute); */
+  color: #88aece;
+}
+
+.hljs-attribute {
+  /* var(--highlight-symbol) */
+  color: #c59bc1;
+}
+
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  /* var(--highlight-namespace) */
+  color: #ef5900;
+}
+
+.hljs-selector-class {
+  /* var(--highlight-keyword) */
+  color: #88aece;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr {
+  /* var(--highlight-variable) */
+  color: #b5bd68;
+}
+
+.hljs-meta,
+.hljs-selector-pseudo {
+  /* var(--highlight-keyword) */
+  color: #88aece;
+}
+
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  /* var(--highlight-literal) */
+  color: #ef5900;
+}
+
+.hljs-bullet,
+.hljs-code {
+  /* var(--highlight-punctuation) */
+  color: #cccccc;
+}
+
+.hljs-meta .hljs-string {
+  /* var(--highlight-variable) */
+  color: #b5bd68;
+}
+
+.hljs-deletion {
+  /* var(--highlight-deletion) */
+  color: #de7176;
+}
+
+.hljs-addition {
+  /* var(--highlight-addition) */
+  color: #76c490;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-formula,
+.hljs-operator,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}

app/(articles)/ctf/[slug]/page.tsx

@@ -0,0 +1,68 @@
+import fs from "fs/promises";
+import path from "path";
+
+import "@wooorm/starry-night/style/both";
+import "./article.css";
+
+export async function generateStaticParams() {
+  const dirs = await fs.readdir(path.join(process.cwd(), "articles/ctf"), {
+    withFileTypes: true,
+  });
+
+  return dirs
+    .filter((dir) => dir.isDirectory())
+    .map((dir) => ({
+      slug: dir.name,
+    }));
+}
+
+type Params = {
+  slug: string;
+};
+
+export default async function ArticlePage({
+  params,
+}: {
+  params: Promise<Params>;
+}) {
+  const { slug } = await params;
+  const { default: Article } = await import(
+    `@/articles/ctf/${slug}/README.mdx`
+  );
+
+  const quote =
+    "prose-blockquote:mx-2 prose-blockquote:px-6 prose-blockquote:not-italic prose-blockquote:bg-stone-300 prose-blockquote:dark:bg-raisin-800 prose-blockquote:font-normal prose-p:in-[blockquote]:first:pt-3 prose-p:in-[blockquote]:first:before:content-none prose-p:in-[blockquote]:last:after:content-none prose-p:in-[blockquote]:last:pb-3 prose-blockquote:rounded-tr-xs prose-blockquote:rounded-br-xs";
+  const code =
+    "prose-code:before:content-none prose-code:after:content-none prose-code:font-theme-mono prose-code:font-medium";
+  const codeInline =
+    "prose-code:not-in-[pre]:wrap-anywhere prose-code:not-in-[pre]:bg-stone-350 prose-code:not-in-[pre]:dark:bg-raisin-700 prose-code:not-in-[pre]:px-[0.4em] prose-code:not-in-[pre]:py-[0.2em] prose-code:not-in-[pre]:rounded-lg";
+  const pre = "prose-pre:rounded-lg";
+  const ol = "prose-ol:pl-10 prose-ol:leading-6";
+  const ul = "prose-ul:pl-10 prose-ul:leading-6";
+  const a =
+    "prose-a:font-normal prose-a:text-theme prose-a:underline prose-a:wrap-anywhere";
+  const strong = "prose-strong:font-medium";
+  const img =
+    "prose-img:rounded-lg prose-img:mx-auto prose-img:max-h-[80vh] prose-img:w-auto prose-img:mx-auto";
+  const hr = "prose-hr:w-9/10 prose-hr:mx-auto";
+
+  return (
+    <main
+      className={[
+        "prose-theme mx-auto prose prose-sm mt-4 w-full max-w-none px-2 text-base text-pretty md:prose-base md:w-4/5 md:px-0 md:text-base lg:max-w-[100ch]",
+        quote,
+        code,
+        codeInline,
+        pre,
+        img,
+        hr,
+        ol,
+        ul,
+        a,
+        strong,
+      ].join(" ")}
+    >
+      <Article />
+    </main>
+  );
+}

app/(articles)/articles.css renamed to app/(articles)/ctf/article-listing.css

@@ -1,4 +1,4 @@
-@reference "../globals.css";
+@reference "../../globals.css";
 
 .article-preview-title {
   @apply text-element;

app/(articles)/ctf/layout.tsx

@@ -1,10 +1,62 @@
+import Footer from "@/app/components/Footer";
+import Images from "@/app/components/Images";
+import Nav from "@/app/components/Nav";
+import ScrollDown from "@/app/components/ScrollDown";
 import type { Metadata } from "next";
-import "../articles.css";
+import Link from "next/link";
+import React from "react";
 
 export const metadata: Metadata = {
   title: "Neplox | CTF Writeups",
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return children;
+  return (
+    <React.Fragment>
+      <header className="header-grid default-header sticky top-0 z-10 flex-none pt-4 before:absolute before:inset-0 before:-z-10 before:-mx-[4vw] before:-mb-4 before:bg-surface before:shadow-[0_7px_6px_-6px_rgba(0,0,0,0.25)] md:relative md:top-0 md:pt-8 md:before:hidden">
+        {/* Branding sm */}
+        <Link href="/" className="justify-self-start md:hidden">
+          {/* Same width as "go to bottom" button */}
+          <Images.Logo className="h-auto w-12 scale-125" />
+        </Link>
+        {/* Branding md+ */}
+        <Link href="/" className="hidden flex-row gap-x-8 md:flex">
+          <Images.Logo className="h-[min(10vh,6vw)] w-auto scale-125" />
+          <h1 className="font-horizon leading-none text-theme md:text-[min(10vh,6vw)]">
+            NEPLOX
+          </h1>
+        </Link>
+
+        <div className="sm:hidden">
+          <nav className="mx-auto flex h-full max-w-lg justify-center gap-x-4">
+            <Nav.Element
+              key="ctf"
+              path="ctf"
+              blocked={false}
+              className="default-nav"
+            />
+          </nav>
+        </div>
+        {/* Nav sm+ */}
+        <div className="hidden sm:block">
+          <nav className="mx-auto flex h-full max-w-lg justify-between gap-x-4">
+            {Nav.paths.map(({ path, blocked }) => (
+              <Nav.Element
+                key={path}
+                path={path}
+                blocked={blocked}
+                className="default-nav"
+              />
+            ))}
+          </nav>
+        </div>
+
+        <ScrollDown className="w-12 justify-self-end md:hidden" />
+      </header>
+
+      {children}
+
+      <Footer className="flex-none" />
+    </React.Fragment>
+  );
 }