new: TailwindCSS and Docusaurus v3.1.0

docusaurus.config.ts

@@ -5,27 +5,17 @@ import * as appRootPath from 'app-root-path'
 const dotenv = require('dotenv').config({
   path: appRootPath.path + '/.env.local'
 })
-
-// General Configuration
-const orgTitle         = 'Ethereal Engine'
-const orgName          = 'etherealengine'
-const projectName      = 'etherealengine-docs'
-const editURL          = `https://github.com/EtherealEngine/${projectName}/blob/master/`
-const siteURL          = 'https://etherealengine.github.io'
-const siteTitle        = `${orgTitle} Documentation`
-const siteTagline      = `${orgTitle} is an open source solution for hosting, creating and developing immersive social spaces.`
-const siteIcon         = 'img/favicon.ico'
-const visualScriptName = 'Behave Graph'
+import * as cfg from './website.config.ts'
 
 // Docusaurus Configuration
 const config: Config = {
-  title: siteTitle,
-  tagline: siteTagline,
-  favicon: siteIcon,
-  url: siteURL,  // Set the production url of your site here
-  baseUrl: `/${projectName}/`, // The /<baseUrl>/ pathname under which your site is served. For GitHub pages it is often '/<projectName>/'
-  organizationName: orgName,   // GitHub pages organization. Usually your GitHub org/user name. Not needed when not using GitHub pages.
-  projectName: projectName,    // GitHub pages project. Usually your repo name. Not needed when not using GitHub pages.
+  title: cfg.site.title,
+  tagline: cfg.site.tagline,
+  favicon: cfg.site.icon,
+  url: cfg.site.url,                      // Set the production url of your site here
+  baseUrl: `/${cfg.github.projectName}/`, // The /<baseUrl>/ pathname under which your site is served. For GitHub pages it is often '/<projectName>/'
+  organizationName: cfg.org.name,         // GitHub pages organization. Usually your GitHub org/user name. Not needed when not using GitHub pages.
+  projectName: cfg.github.projectName,    // GitHub pages project. Usually your repo name. Not needed when not using GitHub pages.
 
   // Broken Links behavior
   onBrokenLinks: 'warn',
@@ -43,15 +33,21 @@ const config: Config = {
     [
       'classic',
       {
-        docs: {
+        docs: {  // Configuration for @docusaurus/plugin-content-docs (false to disable)
           routeBasePath: '/',
           sidebarPath: require.resolve('./sidebars.ts'),
           exclude: ['**/_*.{js,jsx,ts,tsx,md,mdx}', '**/_partials/**'],
-          editUrl: editURL, // Remove this to remove the "edit this page" links.
+          editUrl: cfg.github.editURL, // Remove this to remove the "edit this page" links.
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css')
-        }
+        },
+        pages: {  // Configuration for @docusaurus/plugin-content-pages (false to disable)
+          exclude: [
+            '**/_*.{js,jsx,ts,tsx,md,mdx}',  // Do not route files starting with `_`
+            '**/_**/**',                     // Do not route folders starting with `_`
+          ],
+        },
       }
     ]
   ],
@@ -120,14 +116,28 @@ const config: Config = {
           ]
         }
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} Ethereal Engine.`,
+      copyright: `Copyright © ${new Date().getFullYear()} ${cfg.org.name}.`,
     },
   prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
       additionalLanguages: ['diff','yaml','toml','bash','powershell','c','cpp','python'],
     },
   } satisfies Preset.ThemeConfig,
+  plugins: [
+    // TailwindCSS processor plugin
+    async function tailwindProcessor(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+  ],
 };
 
 export default config;

package.json

@@ -27,18 +27,21 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@docusaurus/core": "3.0.1",
-    "@docusaurus/preset-classic": "3.0.1",
+    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
+    "autoprefixer": "^10.4.16",
     "clsx": "^2.0.0",
+    "postcss": "^8.4.33",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.0.1",
-    "@docusaurus/tsconfig": "3.0.1",
-    "@docusaurus/types": "3.0.1",
+    "@docusaurus/module-type-aliases": "^3.1.0",
+    "@docusaurus/tsconfig": "^3.1.0",
+    "@docusaurus/types": "^3.1.0",
     "@tsconfig/docusaurus": "1.0.7",
     "@types/node": "^20.10.3",
     "app-root-path": "^3.1.0",

src/css/custom.css

@@ -1,9 +1,14 @@
 /**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
+ * Tailwind CSS directives
  */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
+/**
+ * Any CSS included here will be global. The classic template bundles Infima by default.
+ * Infima is a CSS framework designed to work well for content-centric websites.
+ */
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #01022e;
@@ -83,4 +88,4 @@
   --docsearch-key-gradient: linear-gradient(-26.5deg,
       var(--ifm-color-emphasis-200) 0%,
       var(--ifm-color-emphasis-100) 100%);
-}
+}

tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from "tailwindcss"
+
+export default {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx,md,mdx}",   // Default tailwindcss setting, including .md and .mdx
+    `./docs/**/*.{js,jsx,ts,tsx,md,mdx}`,  // Add markdown content to the tailwindcss processor
+  ],
+  darkMode: ['class', '[data-theme="dark"]'], // Hook into docusaurus dark mode settings
+  corePlugins: { preflight: false },          // Disable preflight. It breaks docusaurus css defaults. https://tailwindcss.com/docs/preflight
+  plugins: [],
+  theme: {
+    extend: {},
+  },
+} satisfies Config

website.config.ts

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview
+ * Contains the configuration options for the entire website and all its plugins (tailwind, docusaurus, pages, etc)
+ * Stores everything in one place for easier access from all of the different sections of the website.
+ */
+
+/**
+ * @description Organization Options
+ */
+export const org = {
+  title : 'Ethereal Engine',
+  name  : 'etherealengine'
+}
+
+/**
+ * @description General website options
+ */
+export const site = {
+  url     : `https://${org.name}.github.io`,
+  title   : `${org.title} Documentation`,
+  tagline : `${org.title} is an open source solution for hosting, creating and developing immersive social spaces.`,
+  icon    : 'img/favicon.ico',
+}
+
+/**
+ * @description HTML <meta> tags options
+ */
+export const meta = {
+  description : "Description will go into a meta tag in <head />",
+}
+
+/**
+ * @description GitHub repository options
+ */
+const ghProjectName = 'etherealengine-docs'
+export const github = {
+  projectName : ghProjectName,
+  editURL     : `https://github.com/EtherealEngine/${ghProjectName}/blob/master/`,
+}
+
+/**
+ * @description Ethereal Engine specific options
+ */
+export const visualScriptName :string= 'Behave Graph'