feat: blog

src/index.css

@@ -17,7 +17,7 @@ main {
 }
 
 h2 {
-  @apply gradient-text text-center text-5xl font-extrabold tracking-tighter sm:text-8xl;
+  @apply gradient-text text-5xl font-extrabold tracking-tighter sm:text-8xl;
 }
 
 code {
@@ -30,18 +30,10 @@ a {
 }
 
 /** image and video gradient background */
-figure:has(span):has(img),
-figure:has(span):has(video) {
-  @apply relative;
-
-  span {
-    @apply gradient-bg absolute -inset-1 block w-full origin-[50%_50%] rotate-3 rounded-2xl;
-  }
-
-  img,
-  video {
-    @apply relative w-full self-center justify-self-center rounded-xl object-cover;
-  }
+figure:has(video),
+figure:has(img),
+p:has(img:only-child) {
+  @apply gradient-media;
 }
 
 /** container sections */
@@ -86,7 +78,7 @@ section[id] {
     @apply !fixed !bottom-auto top-0 !border-b-base-content/10 bg-base-100 !text-base-content;
 
     & > a > img {
-      @apply ml-0 scale-100;
+      @apply !ml-0 !scale-100;
     }
   }
 
@@ -98,6 +90,20 @@ section[id] {
       animation: octocat-wave 560ms ease-in-out;
     }
   }
+
+  .gradient-media {
+    @apply relative;
+
+    &:before {
+      content: "";
+      @apply gradient-bg absolute -inset-1 block w-full origin-[50%_50%] rotate-3 rounded-2xl;
+    }
+
+    img,
+    video {
+      @apply relative w-full self-center justify-self-center rounded-xl object-cover;
+    }
+  }
 }
 
 /** utilities */

src/index.tsx

@@ -15,6 +15,7 @@ import {
   createHashRouter,
   Outlet,
   RouterProvider,
+  ScrollRestoration,
   useLocation,
 } from "react-router-dom";
 
@@ -28,6 +29,11 @@ const routes = createHashRouter([
         element: <Routes.Home.Component />,
         loader: Routes.Home.loader,
       },
+      {
+        path: "/blog",
+        element: <Routes.Blog.Component />,
+        loader: Routes.Blog.loader,
+      },
     ],
   },
 ]);
@@ -49,6 +55,7 @@ function Root() {
 
   return (
     <React.Fragment>
+      <ScrollRestoration />
       <Partials.Header />
       <Outlet />
       <Partials.Footer />

src/lib/api.ts

@@ -62,6 +62,16 @@ export const Query = {
             }
           }
         }
+        discussions(first: $num) {
+          nodes {
+            author {
+              login
+            }
+            body
+            createdAt
+            title
+          }
+        }
       }
     }
   `),

src/partials/features.tsx

@@ -73,7 +73,6 @@ export default function () {
           className="flex flex-col place-items-center gap-4 sm:flex-row sm:gap-24 sm:odd:flex-row-reverse"
         >
           <figure className="sm:w-1/2">
-            <span aria-hidden="true" />
             <img src={item.image} />
           </figure>
           <aside className="space-y-4 sm:w-1/2">

src/partials/header.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import cx from "classnames";
 import logo from "/favicon.svg";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { FaBars, FaTimes } from "react-icons/fa";
 
 /** @constant */
@@ -15,6 +15,7 @@ const navItems: Array<{ title: string; url: string }> = [
   { title: "How it Works", url: "/#how-it-works" },
   { title: "Features", url: "/#features" },
   { title: "Release Notes", url: "/#changelog" },
+  { title: "Blog", url: "/blog" },
 ];
 
 /** @function */
@@ -31,12 +32,16 @@ function handleOnScroll() {
  * @exports
  */
 export default function () {
+  const location = useLocation();
   const [modalOpen, setModalOpen] = React.useState(false);
 
   React.useEffect(() => {
-    document.addEventListener("scroll", handleOnScroll);
-    return () => window.removeEventListener("scroll", handleOnScroll);
-  }, []);
+    if (location.pathname === "/") {
+      document.addEventListener("scroll", handleOnScroll);
+    }
+
+    return () => document.removeEventListener("scroll", handleOnScroll);
+  }, [location.pathname]);
 
   return (
     <React.Fragment>
@@ -71,7 +76,15 @@ export default function () {
       </dialog>
 
       {/** NAVIGATION BAR */}
-      <header className="absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white">
+      <header
+        className={cx(
+          "absolute bottom-0 z-20",
+          "flex w-full items-center justify-between",
+          "border-b border-transparent",
+          "px-8 py-4 text-white",
+          location.pathname !== "/" && "fixed-header",
+        )}
+      >
         <a className="flex items-center gap-3" href="#">
           <img
             src={logo}

src/partials/how.tsx

@@ -67,7 +67,6 @@ export default function () {
         <h2>How it Works</h2>
       </header>
       <figure className="flex w-full justify-center sm:order-last sm:w-1/2">
-        <span aria-hidden="true" />
         <video muted loop playsInline onClick={toggleVideo}>
           <source src={`${demo}#t=0.1`} type="video/mp4" />
         </video>

src/partials/splash.tsx

@@ -31,10 +31,6 @@ export default function () {
         <h2>An immersive CS:GO esports simulator</h2>
       </article>
       <figure className="relative w-full self-start sm:w-4/5 sm:self-center">
-        <span
-          className="gradient-bg absolute -inset-1 block w-full origin-[50%_50%] rotate-3 rounded-2xl"
-          aria-hidden="true"
-        />
         <img
           className="relative w-full self-center justify-self-center rounded-xl object-cover"
           alt="LIGA Esports Manager match preview screen"

src/routes/blog.tsx

@@ -0,0 +1,52 @@
+/**
+ * The blog route.
+ *
+ * @module
+ */
+import Markdown from "react-markdown";
+import { useReadQuery } from "@apollo/client";
+import { useLoaderData } from "react-router-dom";
+import { Api } from "@liga/lib";
+
+/**
+ * The route data loader.
+ *
+ * @function
+ */
+function loader() {
+  const variables = Api.getRepoInfo();
+  return Api.preloadQuery(Api.Query.repository, { variables });
+}
+
+/**
+ * The blog route component.
+ *
+ * @function
+ */
+function Component() {
+  const { data } = useReadQuery(useLoaderData() as Api.Response["repository"]);
+  return (
+    <main id="blog">
+      {data.repository?.discussions?.nodes?.map((discussion) => (
+        <article key={discussion?.title} className="prose px-4">
+          <header>
+            <p className="italic">
+              {new Date(discussion?.createdAt).toLocaleString()}
+            </p>
+            <h1>{discussion?.title}</h1>
+          </header>
+          <section>
+            <Markdown>{discussion?.body}</Markdown>
+          </section>
+        </article>
+      ))}
+    </main>
+  );
+}
+
+/**
+ * Exports this module.
+ *
+ * @exports
+ */
+export default { Component, loader };

src/routes/index.ts

@@ -3,6 +3,7 @@
  *
  * @module
  */
+import Blog from "./blog";
 import Home from "./home";
 
 /**
@@ -11,5 +12,6 @@ import Home from "./home";
  * @exports
  */
 export default {
+  Blog,
   Home,
 };