feat: Upgrade to Docusaurus 3.1 + Syntax Highlighting Improvments (#43)

## Upgrade Docusaurus to 3.0 * Upgrades Docusaurus and related packages to the latest versions. * Updates config files to typescript ## Improve Syntax Highlighting * Adds a new theme `ir-code` for code highlighting * based off the site's color scheme * light and dark modes | **Light** | | |------|------| | before | <img src="https://github.com/infinitered/ir-docs/assets/22041394/9f2c2cd7-6d88-421e-b788-a5891f3ca91a" width="500"> | | after | <img src="https://github.com/infinitered/ir-docs/assets/22041394/7250db51-d439-4fa3-9eb6-baeb17f2dbef" width="500"> | | **Dark** | | |------|------| | before | <img src="https://github.com/infinitered/ir-docs/assets/22041394/c11da694-229d-4498-b7a2-ba3bf636335b" width="500"> | | after | <img src="https://github.com/infinitered/ir-docs/assets/22041394/7ff5c94f-c140-4cee-ab94-e3380ccf43e2" width="500"> | * Updates prismjs languages to cover required languages * Updates font family for code blocks to NotoSansMono (new font files added). * Defines new code block styles for highlighting specific lines (success, error, warning). <img src="https://github.com/infinitered/ir-docs/assets/22041394/5ad1f1f7-9f57-4e97-b380-3885fa2d8cbd" width=500> <img src="https://github.com/infinitered/ir-docs/assets/22041394/14f07835-4120-4089-a0d8-869c02ea0b81"width=500>
infinitered · Apr 11, 2024 · 63fcdb8 · 63fcdb8
1 parent 16bcb9c
commit 63fcdb8
Show file tree

Hide file tree

Showing 46 changed files with 3,797 additions and 1,687 deletions.
diff --git a/docusaurus.config.js → docusaurus.config.ts b/docusaurus.config.js → docusaurus.config.ts
@@ -1,12 +1,23 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-const sidebars = require('./sidebars');
+import {Options} from '@docusaurus/preset-classic';
+import {themes} from 'prism-react-renderer';
+import {irCode} from './src/themes/ir-code';
+import type {Config} from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+import sidebars from './sidebars';
 
-// Create navbar items based on sidebars
-const navbarItems = Object.keys(sidebars).map((sidebarId) => {
+
+const lightCodeTheme = irCode.light
+const darkCodeTheme = irCode.dark;
+
+const navbarItems = Object.keys(sidebars).map((sidebarId):{
+  type:string,
+  sidebarId:string,
+  position:'left' | 'right',
+  label: string,
+} => {
   return {
     type: 'docSidebar',
     sidebarId,
@@ -15,8 +26,10 @@ const navbarItems = Object.keys(sidebars).map((sidebarId) => {
   };
 });
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+
+
+
+const config:Config = {
   title: 'Open Source at Infinite Red',
   tagline: 'Tools to supercharge your React Native development!',
   favicon: 'img/favicon.ico',
@@ -51,7 +64,6 @@ const config = {
   presets: [
     [
       'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
@@ -64,12 +76,11 @@ const config = {
           trackingID: 'G-H431N07LX7',
           anonymizeIP: true,
         },
-      }),
-    ],
+      }) satisfies Options,
+    ] ,
   ],
 
   themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       // Replace with your project's social card
       image: 'img/irVertical.jpg',
@@ -130,10 +141,43 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Infinite Red, Inc. Built with Docusaurus.`,
       },
       prism: {
+        additionalLanguages: [
+          'bash',
+          'json',
+          'diff',
+          'ruby',
+          'gradle',
+          'java',
+          'yaml',
+          'kotlin',
+          'groovy',
+          'ejs',
+          'markup-templating'
+        ],
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
+        magicComments: [
+          {
+            className: 'code-block-highlight-line',
+            line: 'highlight-line',
+            block: {start: 'highlight-start', end: 'highlight-end'},
+          },
+          {
+            className: 'code-block-success-line',
+            line: 'success-line',
+            block: {start: 'success-start', end: 'success-end'},
+          },{
+            className: 'code-block-warning-line',
+            line: 'warning-line',
+            block: {start: 'warning-start', end: 'warning-end'},
+          },{
+            className: 'code-block-error-line',
+            line: 'error-line',
+            block: {start: 'error-start', end: 'error-end'},
+          },
+        ],
       },
-    }),
+    }) satisfies Preset.ThemeConfig,
 };
 
 module.exports = config;
diff --git a/package.json b/package.json
@@ -16,28 +16,31 @@
     "symlink": "bash ./scripts/symlink.sh"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.2.0",
+    "@mdx-js/react": "^3.0.0",
     "brfs": "^2.0.2",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "clsx": "^1.2.1",
     "https-browserify": "^1.0.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.3.1",
     "process": "^0.11.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "util": "^0.12.5"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/tsconfig": "^3.0.0",
+    "@docusaurus/types": "3.1.1",
+    "@types/react": "^18.2.29",
+    "typescript": "^5.2.2"
   },
   "browserslist": {
     "production": [

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -2,6 +2,16 @@
 /*bundles Infima by default. Infima is a CSS framework designed to*/
 /*work well for content-centric websites.*/
 
+@font-face {
+    font-family: "NotoSans-Mono";
+    src: url(../../static/font/NotoSansMono-Regular.ttf) format('ttf');
+}
+
+pre {
+    font-family: "NotoSans-Mono", monospace;
+    font-weight: 400;
+    line-height: 1.4rem;
+}
 
 :root {
     /*BRAND*/
@@ -190,6 +200,8 @@
     --ifm-footer-link-color: var(--ifm-color-white);
 }
 
+
+
 html[data-theme='dark'] {
     --ifm-card-background-color: var(--ifm-color-emphasis-500);
     --ifm-color-primary-contrast-background: var(--ir-brand-800);
@@ -204,8 +216,6 @@ html[data-theme='dark'] {
     --ifm-color-danger-contrast-foreground: var(--ifm-color-white);
     --ifm-color-success-contrast-background: var(--ifm-color-success-dark);
     --ifm-color-success-contrast-foreground: var(--ifm-color-white);
-
-
 }
 
 [data-theme='dark'] :root {
@@ -384,3 +394,36 @@ html[data-theme='dark'] {
 body {
     font-family: "Montserrat (compressed)", Trebuchet MS, sans-serif
 }
+
+.code-block-success-line {
+    background-color: rgba(152, 255, 0, 0.13);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+    border-left: 3px solid rgba(151, 255, 0, 0.5);
+}
+
+.code-block-error-line {
+    background-color: rgba(255, 0, 1, 0.10);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+    border-left: 3px solid rgba(255, 0, 1, 0.5);
+}
+
+.code-block-warning-line {
+    background-color: rgba(255, 179, 0, 0.13);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+    border-left: 3px solid rgba(255, 144, 0, 0.5);
+}
+
+
+.code-block-highlight-line {
+    background-color: rgba(198, 179, 243, 0.13);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+    border-left: 3px solid rgba(198, 179, 243, 0.5);
+}
diff --git a/src/themes/colors.ts b/src/themes/colors.ts
@@ -0,0 +1,88 @@
+export const colors = {
+  brand: {
+    rgb: '231, 53, 54',
+    100: '#FFDBD3',
+    200: '#FFB9AA',
+    300: '#FC948E',
+    400: '#FE6060',
+    500: '#E73536',
+    600: '#D13939',
+    700: '#B22525',
+    800: '#971111',
+  },
+  darkRed: {
+    100: '#F2D3D3',
+    200: '#EAAEAE',
+    300: '#D08989',
+    400: '#B55757',
+    500: '#9F3939',
+    600: '#6F2828',
+    700: '#5F2222',
+    800: '#571F1F',
+  },
+  info: {
+    rgb: '115, 184, 215',
+    100: '#DCEDF5',
+    200: '#C0DFED',
+    300: '#B2D8E9',
+    400: '#96CAE1',
+    500: '#73B8D7',
+    600: '#65A2BD',
+    700: '#568AA1',
+    800: '#456E81',
+  },
+  neutral: {
+    0: '#FFFFFF',
+    100: '#F8F7F7',
+    150: '#F1F0F0',
+    200: '#E0E0E1',
+    300: '#83838A',
+    400: '#5D5D60',
+    500: '#3B3B3E',
+    600: '#333337',
+    700: '#272728',
+    800: '#141415',
+    900: '#0C0C0D',
+  },
+  secondary: {
+    rgb: '76, 62, 84',
+    100: '#DBD8DD',
+    200: '#B7B2BB',
+    300: '#827887',
+    400: '#695D6F',
+    500: '#4C3E54',
+    600: '#3D3044',
+    700: '#322838',
+    800: '#211925',
+  },
+  success: {
+    rgb: '150, 133, 183',
+    100: '#E5E1ED',
+    200: '#D5CEE2',
+    300: '#CBC2DB',
+    400: '#B6AACD',
+    500: '#9685B7',
+    600: '#786A92',
+    700: '#695D80',
+    800: '#4B435C',
+  },
+  warning: {
+    rgb: '243, 182, 103',
+    100: '#FCEDD9',
+    200: '#FAE2C2',
+    300: '#F9DBB3',
+    400: '#F7CC95',
+    500: '#F3B667',
+    600: '#E0A75F',
+    700: '#C3893B',
+    800: '#9D6317',
+  },
+  green: {
+    "500":"#4f8500"
+  },
+  background: {
+    primary: '#ffffff',
+    bold: '#272728',
+    dim: '#f8f7f7',
+  }
+}