webring stuff

.github/workflows/deploy.yml

@@ -20,6 +20,9 @@ jobs:
           node-version: 18
           cache: npm
 
+      - name: test thing
+        run: node gen-webring-routes.js
+
       - name: Install dependencies
         run: npm ci
       - name: Build website

docusaurus.config.ts

@@ -1,149 +1,159 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
-import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
 
 const config: Config = {
-  title: 'Graphics Programming Discord',
-  tagline: 'Articles, guides, tips and tricks from and for frogs and forgis of the graphics programming discord. This is what we do:',
-  favicon: 'img/favicon.ico',
+  title: "Graphics Programming Discord",
+  tagline:
+    "Articles, guides, tips and tricks from and for frogs and forgis of the graphics programming discord. This is what we do:",
+  favicon: "img/favicon.ico",
 
   // Set the production url of your site here
-  url: 'https://graphicsprogramming.github.io/',
+  url: "https://graphicsprogramming.github.io/",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: "/",
 
   // GitHub pages deployment config.
-  organizationName: 'GraphicsProgramming',
-  projectName: 'blog',
-  deploymentBranch: 'gh-pages',
+  organizationName: "GraphicsProgramming",
+  projectName: "blog",
+  deploymentBranch: "gh-pages",
   trailingSlash: false,
 
-  onBrokenLinks: 'warn',
-  onBrokenMarkdownLinks: 'warn',
+  onBrokenLinks: "warn",
+  onBrokenMarkdownLinks: "warn",
 
-  plugins: [[ require.resolve('docusaurus-lunr-search'), {
-    languages: ['en'] // language codes
-  }]],
+  plugins: [
+    [
+      require.resolve("docusaurus-lunr-search"),
+      {
+        languages: ["en"], // language codes
+      },
+    ],
+  ],
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+    defaultLocale: "en",
+    locales: ["en"],
   },
   stylesheets: [
     {
-      href: 'https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css',
-      type: 'text/css',
+      href: "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css",
+      type: "text/css",
       integrity:
-        'sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+',
-      crossorigin: 'anonymous',
-    }
+        "sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+",
+      crossorigin: "anonymous",
+    },
   ],
   presets: [
     [
-      'classic',
+      "classic",
       {
         docs: {
-          routeBasePath: 'docs',
-          sidebarPath: './sidebars.ts',
+          routeBasePath: "docs",
+          sidebarPath: "./sidebars.ts",
         },
         blog: {
           showLastUpdateTime: true,
           showLastUpdateAuthor: true,
           showReadingTime: true,
           feedOptions: {
-            type: ['rss', 'atom'],
+            type: ["rss", "atom"],
             xslt: true,
           },
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/GraphicsProgramming/blog',
+          editUrl: "https://github.com/GraphicsProgramming/blog",
           // Useful options to enforce blogging best practices
-          onInlineTags: 'warn',
-          onInlineAuthors: 'warn',
-          onUntruncatedBlogPosts: 'warn',
+          onInlineTags: "warn",
+          onInlineAuthors: "warn",
+          onUntruncatedBlogPosts: "warn",
           //routeBasePath: '/',
-          blogSidebarCount: 'ALL',
+          blogSidebarCount: "ALL",
           remarkPlugins: [remarkMath],
           rehypePlugins: [rehypeKatex],
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: "./src/css/custom.css",
         },
         sitemap: {
-          changefreq: 'always'
-        }
+          changefreq: "always",
+        },
       } satisfies Preset.Options,
     ],
   ],
 
   themeConfig: {
     colorMode: {
-      defaultMode: 'dark',
+      defaultMode: "dark",
       respectPrefersColorScheme: true,
     },
-    image: 'img/social-embed.png',
+    image: "img/social-embed.png",
     navbar: {
-      title: 'Graphics Programming',
+      title: "Graphics Programming",
       logo: {
-        alt: 'Graphics Programming',
-        src: 'img/gp-discord-logo.webp',
+        alt: "Graphics Programming",
+        src: "img/gp-discord-logo.webp",
       },
       items: [
         {
-          to: '/blog', 
-          label: 'Blog', 
-          position: 'left'
+          to: "/blog",
+          label: "Blog",
+          position: "left",
+        },
+        {
+          type: "docSidebar",
+          sidebarId: "discordServer",
+          position: "left",
+          label: "Discord Server",
         },
         {
-          type: 'docSidebar',
-          sidebarId: 'discordServer',
-          position: 'left',
-          label: 'Discord Server',
+          type: "docSidebar",
+          sidebarId: "communityProjects",
+          position: "left",
+          label: "Community Projects",
         },
         {
-          type: 'docSidebar',
-          sidebarId: 'communityProjects',
-          position: 'left',
-          label: 'Community Projects'
-        }
+          to: "/webring",
+          label: "Webring",
+          position: "left",
+        },
       ],
     },
     footer: {
-      style: 'dark',
+      style: "dark",
       links: [
         {
-          title: 'Community',
+          title: "Community",
           items: [
             {
-              label: 'Discord',
-              href: 'https://discord.com/invite/graphicsprogramming',
+              label: "Discord",
+              href: "https://discord.com/invite/graphicsprogramming",
             },
             {
-              label: 'YouTube',
-              href: 'https://www.youtube.com/@graphicsprogramming9074',
+              label: "YouTube",
+              href: "https://www.youtube.com/@graphicsprogramming9074",
             },
             {
-              label: 'Twitter',
-              href: 'https://x.com/i/communities/1500963350825472000'
-            }
+              label: "Twitter",
+              href: "https://x.com/i/communities/1500963350825472000",
+            },
           ],
         },
         {
-          title: 'More',
+          title: "More",
           items: [
             {
-              label: 'Blog',
-              to: 'https://graphics-programming.org/',
+              label: "Blog",
+              to: "https://graphics-programming.org/",
             },
             {
-              label: 'GitHub',
-              href: 'https://github.com/GraphicsProgramming',
+              label: "GitHub",
+              href: "https://github.com/GraphicsProgramming",
             },
           ],
         },
@@ -153,9 +163,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.duotoneLight,
       darkTheme: prismThemes.duotoneDark,
-      additionalLanguages: [
-        'glsl'
-      ]      
+      additionalLanguages: ["glsl"],
     },
   } satisfies Preset.ThemeConfig,
 };

gen-webring-routes.js

@@ -0,0 +1,38 @@
+const fs = require("fs");
+
+// Import ze froges
+const frogs = require("./static/webring/froglist.json");
+
+function makeHtmlRedirect(frog) {
+    return `
+    <!DOCTYPE HTML>
+    <html lang="en-US">
+        <head>
+            <meta charset="UTF-8">
+            <meta http-equiv="refresh" content="0; url=${frog.url}">
+            <script type="text/javascript">
+                // JS redirect as fallback if the meta tag doesn't work
+                window.location.href = "${frog.url}"
+            </script>
+            <title>Page Redirection</title>
+        </head>
+        <body>
+            <!-- And a link, just in case -->
+            If you are not redirected automatically, follow this <a href='${frog.url}'>link</a>.
+        </body>
+    </html>`;
+}
+
+function makeRoutes(frog, nextFrog, prevFrog) {
+    fs.mkdirSync(`./static/webring/frogs/${frog.name}`, { recursive: true });
+    fs.appendFileSync(`./static/webring/frogs/${frog.name}.html`, makeHtmlRedirect(frog));
+    fs.appendFileSync(`./static/webring/frogs/${frog.name}/next.html`, makeHtmlRedirect(nextFrog));
+    fs.appendFileSync(`./static/webring/frogs/${frog.name}/prev.html`, makeHtmlRedirect(prevFrog));
+}
+
+frogs.forEach((frog, i) => {
+    const nextFrog = frogs.at((i + 1) % frogs.length);
+    const prevFrog = frogs.at(i - 1); // array.at(-1) returns the last element
+
+    makeRoutes(frog, nextFrog, prevFrog);
+});

src/pages/index.tsx

@@ -43,6 +43,22 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+
+        <div style={{
+          display: 'flex',
+          gap: '0.25rem',
+          justifyContent: 'center',
+        }}>
+          <a href="/webring/frogs/gp-blog/prev">⬅️</a>
+          <a href="/webring/frogs/">
+            <img src="/img/froge.webp" alt="a friendly froge" style={{
+              objectFit: 'contain',
+              width: '1.5em',
+              height: '1.5em',
+            }} />
+          </a>
+          <a href="/webring/frogs/gp-blog/next">➡️</a>
+        </div>
       </main>
     </Layout>
   );

src/pages/webring.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Layout from "@theme/Layout";
+
+import froglist from "/static/webring/froglist.json";
+
+export default function Hello() {
+  return (
+    <Layout title="GP Webring Index" description="GP Webring Index">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          flexGrow: 1,
+          padding: "3rem 2rem",
+          width: "100%",
+          maxWidth: "768px",
+          margin: "0 auto",
+        }}
+      >
+        <h1>Graphics Programming Webring</h1>
+        <ul style={{ padding: 0, margin: 0 }}>
+          {froglist.map((frog: any, i: number) => (
+            <li
+              style={{
+                listStyle: "none",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <a href={frog.url} style={{ fontSize: "1.25rem" }}>
+                {frog.displayName}
+              </a>
+              <p>{frog.description}</p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Layout>
+  );
+}

static/webring/froglist.json

@@ -0,0 +1,15 @@
+[
+  {
+    "name": "gp-blog",
+    "url": "https://graphics-programming.org/",
+    "displayName": "Graphics Programming Blog",
+    "description": "The official site for the Graphics Programming discord"
+  },
+  {
+    "name": "bluescreen",
+    "url": "https://fumagalli.ar/",
+    "displayName": "Teo Fumagalli (bluescreen)",
+    "description": "Hi! I made a website with stuff in it"
+  }
+]
+