From 9e144de7b491cc7f3ec74d5ba12ef09c844db918 Mon Sep 17 00:00:00 2001 From: "Ivan Mar (sOkam!)" <7308253+heysokam@users.noreply.github.com> Date: Mon, 15 Jan 2024 22:25:05 -0800 Subject: [PATCH 1/3] new: TailwindCSS and Docusaurus v3.1.0 --- docusaurus.config.ts | 16 +++++++++++++++- package.json | 15 +++++++++------ src/css/custom.css | 13 +++++++++---- tailwind.config.ts | 14 ++++++++++++++ 4 files changed, 47 insertions(+), 11 deletions(-) create mode 100644 tailwind.config.ts diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 7f677591d24b..6ac99723b8ac 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -22,7 +22,7 @@ const config: Config = { title: siteTitle, tagline: siteTagline, favicon: siteIcon, - url: siteURL, // Set the production url of your site here + url: siteURL, // Set the production url of your site here baseUrl: `/${projectName}/`, // The // pathname under which your site is served. For GitHub pages it is often '//' 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. @@ -128,6 +128,20 @@ const config: Config = { 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; diff --git a/package.json b/package.json index 7f0d585c2221..0064412ee3bc 100644 --- a/package.json +++ b/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", diff --git a/src/css/custom.css b/src/css/custom.css index 53b2dcbf2fe2..90aeb48e2021 100644 --- a/src/css/custom.css +++ b/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%); -} \ No newline at end of file +} diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 000000000000..1792d0e6bdba --- /dev/null +++ b/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 From a71b3ac600dd3aac1cbd86ea7d6b99394d95bf99 Mon Sep 17 00:00:00 2001 From: "Ivan Mar (sOkam!)" <7308253+heysokam@users.noreply.github.com> Date: Tue, 16 Jan 2024 00:28:06 -0800 Subject: [PATCH 2/3] chg: Add Docusaurus ignore for _ files/folders inside src/pages --- docusaurus.config.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 6ac99723b8ac..961c384a24ca 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -43,7 +43,7 @@ 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/**'], @@ -51,7 +51,13 @@ const config: Config = { }, 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 `_` + ], + }, } ] ], From 7fd3ed79bb0ce8e517d589e0aef7c168c7084e8a Mon Sep 17 00:00:00 2001 From: "Ivan Mar (sOkam!)" <7308253+heysokam@users.noreply.github.com> Date: Tue, 16 Jan 2024 02:28:48 -0800 Subject: [PATCH 3/3] chg: Docusaurus config values imported from unified website.config.ts --- docusaurus.config.ts | 30 ++++++++++-------------------- website.config.ts | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 20 deletions(-) create mode 100644 website.config.ts diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 961c384a24ca..6046e8696346 100644 --- a/docusaurus.config.ts +++ b/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 // pathname under which your site is served. For GitHub pages it is often '//' - 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 // pathname under which your site is served. For GitHub pages it is often '//' + 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', @@ -47,7 +37,7 @@ const config: Config = { 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') @@ -126,7 +116,7 @@ const config: Config = { ] } ], - copyright: `Copyright © ${new Date().getFullYear()} Ethereal Engine.`, + copyright: `Copyright © ${new Date().getFullYear()} ${cfg.org.name}.`, }, prism: { theme: prismThemes.github, diff --git a/website.config.ts b/website.config.ts new file mode 100644 index 000000000000..44db81ebd403 --- /dev/null +++ b/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 tags options + */ +export const meta = { + description : "Description will go into a meta tag in ", +} + +/** + * @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'