[WIP] Upgrade packages

- Upgrade all packages - Move from JS to Typescript - Move Sass and Styled Components to PostCSS - Update swizzled templates as needed - Update markdown files, fix markdown errors - Upgrade from Yarn 1 to Yarn 4 - Update docusaurus config
ManifoldScholar · Oct 18, 2024 · b7ef68e · b7ef68e
1 parent 098736c
commit b7ef68e
Show file tree

Hide file tree

Showing 158 changed files with 13,801 additions and 12,116 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,14 @@
 .env.test.local
 .env.production.local
 
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+21.1.0
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,3 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-  plugins: ["babel-plugin-styled-components"]
 };
diff --git a/docs/accessibility.md b/docs/accessibility.md
@@ -70,6 +70,6 @@ Manifold is distributed software that is used by many different publishers and g
 
 ## Contact Us
 
-If you need accessibility-related help with a Manifold publication, please contact us at <[email protected]>.
+If you need accessibility-related help with a Manifold publication, please contact us at [[email protected]](mailto:[email protected]).
 
-If you would like to report an issue with the Manifold platform, please [email us](mailto:[email protected]) or submit an [issue](https://github.com/ManifoldScholar/manifold/issues) or start a [discussion](https://github.com/ManifoldScholar/manifold/discussions) in our GitHub repository. We are also widely available on [Twitter](https://twitter.com/ManifoldScholar) and [Slack](https://manifold-slackin.herokuapp.com/) for help.
+If you would like to report an issue with the Manifold platform, please [email us](mailto:[email protected]) or submit an [issue](https://github.com/ManifoldScholar/manifold/issues) or start a [discussion](https://github.com/ManifoldScholar/manifold/discussions) in our GitHub repository. We are also widely available on [Twitter](https://twitter.com/ManifoldScholar) and [Slack](https://manifold-slackin.herokuapp.com/) for help.
diff --git a/docs/administering/configuring/theme_settings.md b/docs/administering/configuring/theme_settings.md
@@ -5,7 +5,7 @@ sidebar_label: Theme Settings
 ---
 
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 The fields discussed in this section can be accessed from the Manifold backend by selecting **Settings** from the main menu and then **Theme** in the submenu.

diff --git a/docs/administering/installation.md b/docs/administering/installation.md
@@ -46,7 +46,7 @@ Shell into the server as root and download the most recent package.
 
 <Tabs
   groupId="install-type"
-  defaultValue="ubuntu18"
+  defaultValue="ubuntu22"
   values={[
     {label: "Ubuntu22", value: "ubuntu22"},
     {label: "Ubuntu20", value: "ubuntu20"},
@@ -83,7 +83,7 @@ curl -O ${getData("installUrlFor", "centos7")}
 
 <Tabs
   groupId="install-type"
-  defaultValue="ubuntu18"
+  defaultValue="ubuntu22"
   values={[
     {label: "Ubuntu22", value: "ubuntu22"},
     {label: "Ubuntu20", value: "ubuntu20"},

diff --git a/docs/backend/journals.md b/docs/backend/journals.md
@@ -7,7 +7,7 @@ sidebar_label: Journals
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 The Journals detail views discussed in this section are accessed from the Manifold backend by selecting **Journals** from the main menu.

diff --git a/docs/backend/manifold_editor.md b/docs/backend/manifold_editor.md
@@ -7,7 +7,7 @@ sidebar_label: Manifold Editor
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 The Manifold Editor is accessed from the **Sections** sidebar found in the detail view of an individual text. From a project detail page in the backend, select **Texts** from the sidebar, then choose one of the texts listed in that view. Once a text has been selected, the sidebar will now include a listing for **Sections**. From there, select the edit button, denoted by a pencil icon beside the name of one of the text sections listed. That will open a modal window housing the Manifold Editor where adjustments to that selected section can take place.
@@ -330,19 +330,19 @@ There is no Markdown syntax for Underline.
     <tr>
         <td>Bold</td>
         <td><code>&lt;strong&gt;...&lt;/strong&gt;</code></td>
-        <td><code>**</code>[text]<code>**</code></td>
+        <td><code>`**`</code>[text]<code>`**`</code></td>
         <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong">Strong Element</a></td>
     </tr>
     <tr>
         <td>Italic</td>
         <td><code>&lt;em&gt;...&lt;/em&gt;</code></td>
-        <td><code>*</code>[text]<code>*</code></td>
+        <td><code>`*`</code>[text]<code>`*`</code></td>
         <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em">Emphasis Element</a></td>
     </tr>
     <tr>
         <td>Strikethrough</td>
         <td><code>&lt;s&gt;...&lt;/s&gt;</code></td>
-        <td><code>~</code>[text]<code>~</code></td>
+        <td><code>`~`</code>[text]<code>`~`</code></td>
         <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s">Strikethrough</a></td>
     </tr>
     <tr>
@@ -811,15 +811,15 @@ There is no Markdown syntax for Underline, Insert Link, Insert Image, or Insert
     </tr>
     <tr>
         <td>Bold</td>
-        <td><code>**</code>[text]<code>**</code></td>
+        <td><code>`**`</code>[text]<code>`**`</code></td>
     </tr>
     <tr>
         <td>Italic</td>
-        <td><code>*</code>[text]<code>*</code></td>
+        <td><code>`*`</code>[text]<code>`*`</code></td>
     </tr>
     <tr>
         <td>Strikethrough</td>
-        <td><code>~</code>[text]<code>~</code></td>
+        <td><code>`~`</code>[text]<code>`~`</code></td>
     </tr>
     <tr>
         <td>Inline Code</td>

diff --git a/docs/backend/project_collections.md b/docs/backend/project_collections.md
@@ -5,7 +5,7 @@ sidebar_label: Project Collections
 ---
 
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 Users logged in with **Admin**, **Editor**, or **Marketeer** accounts can create new and modify existing Project Collections in the Manifold backend.

diff --git a/docs/backend/projects.md b/docs/backend/projects.md
@@ -6,7 +6,7 @@ sidebar_label: Projects
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 The Project detail views discussed in this section are accessed by selecting a Project from a list or library view while in the Manifold Backend.

diff --git a/docs/backend/resource.md b/docs/backend/resource.md
@@ -5,7 +5,7 @@ sidebar_label: Resources
 ---
 
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 Resources are specific to and contained within Manifold Projects. Resources are added and managed in the backend through a Project’s **Resource** sidebar.

diff --git a/docs/backend/resource_collections.md b/docs/backend/resource_collections.md
@@ -5,7 +5,7 @@ sidebar_label: Resource Collections
 ---
 
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 Users logged in as **Admin**, **Editor**, **Marketeer**, **Project Creator**, or a **Reader** with [Editor Permissions](../backend/projects.md#editor-permissions) can create new and modify existing Resource Collections by selecting a Project Thumbnail in the backend and choosing **Resource Collections** from its sidebar.

diff --git a/docs/backend/texts.md b/docs/backend/texts.md
@@ -7,7 +7,7 @@ sidebar_label: Texts
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Spec from "@theme/Spec";
-const defaultImageFormats = "GIF, JPEG, JPG, PNG";
+export const defaultImageFormats = "GIF, JPEG, JPG, PNG";
 
 :::location
 To edit a Text, select its parent project in the backend and choose **Texts** from the sidebar. Texts can be edited by any user who can edit the parent Project.

diff --git a/docs/overview.md b/docs/overview.md
@@ -21,4 +21,4 @@ There are a couple different ways to get help with Manifold.
 
 ## Report an Issue or Request a Feature
 
-We aren't just making Manifold for us. We're making it for you too. If you find a bug or aren't seeing functionality you need, [we want to know](https://github.com/ManifoldScholar/manifold/issues/new)!
+We aren't just making Manifold for us. We're making it for you too. If you find a bug or aren't seeing functionality you need, [we want to know](https://github.com/ManifoldScholar/manifold/issues/new)!
diff --git a/docusaurus.config.js → docusaurus.config.ts b/docusaurus.config.js → docusaurus.config.ts
@@ -1,8 +1,14 @@
-require("dotenv").config();
-const path = require("path");
-const fs = require("fs");
+import {themes as prismThemes} from 'prism-react-renderer';
+import type {Config} from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as dotenv from "dotenv";
+dotenv.config({ path: __dirname+'/.env' });
+
+// TODO: Define releases type
+let data: {manifoldVersion?: string; releases?: unknown} = {};
 
-let data = {};
 try {
   data.manifoldVersion = fs
     .readFileSync(path.resolve(__dirname, "MANIFOLD_VERSION"), "utf8")
@@ -14,54 +20,51 @@ try {
   console.error(err);
 }
 
-const DARK_ICON = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M9.8.7c2 1.1 3.4 3.3 3.4 5.8 0 3.7-3 6.7-6.7 6.7-2.5 0-4.7-1.4-5.8-3.4 1 .5 2.1.8 3.3.8 3.7 0 6.7-3 6.7-6.7 0-1.1-.3-2.2-.9-3.2zm-4.2.5c.2-.2.6 0 .5.3l-.4 2.1 1.8 1.1c.3.2.2.6-.1.6l-2.1.2-.5 2c0 .3-.5.4-.6.1l-.8-1.9-2.1.2c-.3 0-.5-.4-.3-.6l1.6-1.4L1.7 2c-.1-.3.2-.6.5-.4l1.8 1 1.6-1.4z' fill-rule='evenodd' clip-rule='evenodd' fill='%237ad3ff'/%3E%3C/svg%3E")`;
-
-const LIGHT_ICON = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.8C6.2 4.8 4.8 6.2 4.8 8s1.4 3.2 3.2 3.2c1.8 0 3.2-1.4 3.2-3.2S9.8 4.8 8 4.8m0-1.5c.4 0 .7-.3.7-.7V.7C8.7.3 8.4 0 8 0c-.4 0-.7.3-.7.7v1.9c0 .4.3.7.7.7m0 9.4c-.4 0-.7.3-.7.7v1.9c0 .4.3.7.7.7.4 0 .7-.3.7-.7v-1.9c0-.4-.3-.7-.7-.7m-4.3-1.4c.3-.3.7-.3 1 0 .3.3.3.7 0 1l-1.4 1.4c-.1.1-.3.2-.5.2s-.4-.1-.5-.2c-.3-.3-.3-.7 0-1l1.4-1.4zm7.6 0c.3-.3.7-.3 1 0l1.4 1.4c.3.3.3.7 0 1-.1.1-.3.2-.5.2s-.4-.1-.5-.2l-1.4-1.4c-.2-.3-.2-.7 0-1zm4-4c.4 0 .7.3.7.7 0 .4-.3.7-.7.7h-1.9c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h1.9zm-12.7 0c.4 0 .7.3.7.7 0 .4-.3.7-.7.7H.7C.3 8.7 0 8.4 0 8c0-.4.3-.7.7-.7h1.9zm10.1-5c.3-.3.7-.3 1 0 .3.3.3.7 0 1l-1.4 1.4c-.1.1-.3.2-.5.2s-.4-.1-.5-.2c-.3-.3-.3-.7 0-1l1.4-1.4zm-10.4 0c.3-.3.7-.3 1 0l1.4 1.4c.3.3.3.7 0 1-.2.1-.3.2-.5.2s-.4-.1-.5-.2L2.3 3.3c-.2-.3-.2-.7 0-1z' fill-rule='evenodd' clip-rule='evenodd' fill='%23f5e425'/%3E%3C/svg%3E%0A")`;
-
-const ICON_STYLE = {
-  width: "16px",
-  height: "16px",
-};
-
 const MARKETING_URL = "http://manifoldapp.org";
+const BASE_URL = "/manifold-docusaurus";
 
 const algolia = {
   appId: process.env.ALGOLIA_APP_ID,
   apiKey: process.env.ALGOLIA_API_KEY,
   indexName: process.env.ALGOLIA_INDEX_NAME,
 };
 
-const googleAnalytics = {
-  trackingID: process.env.GOOGLE_ANALYTICS,
-  anonymizeIP: true,
-};
-
-module.exports = {
+const config: Config = {
   title: "Manifold Docs",
-  tagline: "The tagline of my site",
+  tagline: "",
   url: "https://manifoldscholar.github.io",
-  baseUrl: "/manifold-docusaurus/",
+  baseUrl: BASE_URL,
   favicon: "favicon/favicon.svg",
-  organizationName: "ManifoldScholar", // Usually your GitHub org/user name.
-  projectName: "manifold-docusaurus", // Usually your repo name.
+  organizationName: "ManifoldScholar",
+  projectName: "manifold-docusaurus",
+  onBrokenLinks: 'warn',
+  onBrokenMarkdownLinks: 'warn',
   plugins: [
-    "docusaurus-plugin-sass",
-    path.resolve(__dirname, "src/plugin/styled-components"),
-    [
-      "docusaurus2-dotenv",
-      {
-        defaults: true,
-        systemvars: true,
-      },
-    ],
+    async function docusaurusPostcss(context, options) {
+      return {
+        name: 'docusaurus-postcss',
+        configurePostCss(postcssOptions) {
+          // Appends new PostCSS plugin.
+          postcssOptions.plugins.push(require('postcss-mixins'));
+          postcssOptions.plugins.push(require('postcss-import'));
+          postcssOptions.plugins.push(require('postcss-nested'));
+          return postcssOptions;
+        },
+      };
+    }
   ],
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
   themeConfig: {
     metaData: {
       ogImage: "img/Manifold-Marketing-Opengraph-3.png",
       ogImageAlt:
         "People building a wooden Manifold logo. Text below the logo says 'Manifold is what we make it'",
     },
     manifoldLogoLink: MARKETING_URL,
+    image: "img/Manifold-Marketing-Opengraph-3.png",
     mainNav: {
       links: [
         {
@@ -84,7 +87,7 @@ module.exports = {
         },
         {
           label: "Docs",
-          href: "/docs",
+          href: `${BASE_URL}/docs`,
           isButton: false,
           isSelected: true,
           target: "_self",
@@ -119,7 +122,7 @@ module.exports = {
             },
             {
               label: "Docs",
-              to: "/docs",
+              to: `${BASE_URL}/docs`,
               target: "_self",
             },
             {
@@ -139,7 +142,7 @@ module.exports = {
             },
             {
               label: "Blog",
-              to: "blog",
+              to: `${BASE_URL}/blog`,
             },
             {
               label: "About",
@@ -183,7 +186,7 @@ module.exports = {
     navbar: {
       items: [
         {
-          to: "docs",
+          to: `${BASE_URL}/docs`,
           activeBasePath: "docs",
           activeBaseRegex: "docs/(full)",
           label: "Documentation",
@@ -202,64 +205,54 @@ module.exports = {
         //   position: "left"
         // },
         {
-          to: "blog",
+          to: `${BASE_URL}/blog`,
           label: "Blog",
           position: "left",
         },
       ],
     },
-    colorMode: {
-      switchConfig: {
-        darkIcon: "\u{0020}",
-        darkIconStyle: {
-          ...ICON_STYLE,
-          backgroundImage: DARK_ICON,
-          backgroundRepeat: "no-repeat",
-        },
-        lightIcon: "\u{0020}",
-        lightIconStyle: {
-          ...ICON_STYLE,
-          backgroundImage: LIGHT_ICON,
-          backgroundRepeat: "no-repeat",
-        },
-      },
+    ...(algolia.appId ? { algolia } : {}),
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
     },
-    algolia,
-  },
+  } satisfies Preset.ThemeConfig,
   customFields: {
     data,
   },
   presets: [
     [
-      "@docusaurus/preset-classic",
+      'classic',
       {
-        googleAnalytics,
         docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
+          sidebarPath: './sidebars.ts',
           editUrl:
             "https://github.com/ManifoldScholar/manifold-docusaurus/edit/master",
-          admonitions: {
-            customTypes: {
-              location: {
-                keyword: "location",
-                svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>',
-              },
-            },
-          },
+          // admonitions: {
+          //   customTypes: {
+          //     location: {
+          //       keyword: "location",
+          //       svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>',
+          //     },
+          //   },
+          // },
         },
         blog: {
           blogTitle: "Blog",
-          // blogDescription: "A docusaurus powered blog!",
-          showReadingTime: false,
-          // Please change this to your repo.
+          showReadingTime: true,
           // editUrl:
-          //   "https://github.com/facebook/docusaurus/edit/master/website/blog/"
+          //   "https://github.com/ManifoldScholar/manifold-docusaurus/edit/master",
+          // Useful options to enforce blogging best practices
+          onInlineTags: 'warn',
+          onInlineAuthors: 'warn',
+          onUntruncatedBlogPosts: 'warn',
         },
         theme: {
-          customCss: require.resolve("./src/scss/styles.scss"),
+          customCss: './src/styles/global.css',
         },
-      },
+      } satisfies Preset.Options,
     ],
   ],
 };
+
+export default config;