feat(docs): align docs styling with main site glassmorphic theme

docs/README.md

@@ -1,41 +1,49 @@
+
 # Website
 
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+This docs site is built using **Docusaurus** and shares the same branding and glassmorphic design system as the main Img2Num website.
+
+## Setup
 
-## Installation
+Install dependencies:
 
 ```bash
 yarn
+
 ```
 
-## Local Development
+## Local Development (Docs)
+
+Run the docs site locally to preview style and layout changes:
 
 ```bash
 yarn start
+
 ```
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+The site will be available at `http://localhost:3000` and updates live as you edit files.
+
+## Styling Notes
+
+* Global styles live in `docs/src/css/custom.css`
+* Glassmorphic components use the reusable `.glass-card` class
+* Logo, favicon, and social preview assets are under `docs/static/img/`
+* Theme configuration is managed in `docs/docusaurus.config.js`
 
 ## Build
 
 ```bash
 yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-## Deployment
+```
 
-Using SSH:
+## Deployment (GitHub Pages)
 
 ```bash
-USE_SSH=true yarn deploy
+GIT_USER=<your-github-username> yarn deploy
+
 ```
 
-Not using SSH:
+If you are using GitHub Pages for hosting, this command builds the site and pushes it to the `gh-pages` branch.
 
-```bash
-GIT_USER=<Your GitHub username> yarn deploy
-```
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/docusaurus.config.js

@@ -1,8 +1,4 @@
 // @ts-check
-// `@type` JSDoc annotations allow editor autocompletion and type checking
-// (when paired with `@ts-check`).
-// There are various equivalent ways to declare your Docusaurus config.
-// See: https://docusaurus.io/docs/api/docusaurus-config
 
 import { createRequire } from 'module';
 import { themes as prismThemes } from 'prism-react-renderer';
@@ -15,18 +11,20 @@ import rehypeKatex from 'rehype-katex';
 const require = createRequire(import.meta.url);
 require('dotenv').config();
 
-const hasAlgoliaEnvDefined = process.env.ALGOLIA_APP_ID
-                          && process.env.ALGOLIA_API_KEY
-                          && process.env.ALGOLIA_INDEX_NAME;
-const algolia =
-  hasAlgoliaEnvDefined
+const hasAlgoliaEnvDefined =
+  process.env.ALGOLIA_APP_ID &&
+  process.env.ALGOLIA_API_KEY &&
+  process.env.ALGOLIA_INDEX_NAME;
+
+const algolia = hasAlgoliaEnvDefined
   ? {
-    appId: process.env.ALGOLIA_APP_ID,
-    apiKey: process.env.ALGOLIA_API_KEY,
-    indexName: process.env.ALGOLIA_INDEX_NAME,
-    contextualSearch: true,
-  }
+      appId: process.env.ALGOLIA_APP_ID,
+      apiKey: process.env.ALGOLIA_API_KEY,
+      indexName: process.env.ALGOLIA_INDEX_NAME,
+      contextualSearch: true,
+    }
   : undefined;
+
 const algoliaHeadTag = {
   name: 'algolia-site-verification',
   content: 'DB4B5FEC1545D32B',
@@ -37,11 +35,10 @@ const config = {
   title: 'Img2Num',
   tagline:
     'Transforms any image into a printable or digital colour-by-number template using WebAssembly-powered C++ image processing.',
-  favicon: 'img/favicon.svg',
+  favicon: 'img/og-icon.png',
 
-  // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
-    v4: true, // Improve compatibility with the upcoming Docusaurus v4
+    v4: true,
   },
 
   markdown: {
@@ -50,34 +47,23 @@ const config = {
 
   themes: ['@docusaurus/theme-mermaid'],
 
-  // Set the production url of your site here
   url: 'https://ryan-millard.github.io/',
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/Img2Num/info/',
 
-  // GitHub Pages fix: canonical URL with trailing slash
+  // GitHub Pages settings
   trailingSlash: true,
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'Ryan-Millard', // Usually your GitHub org/user name.
-  projectName: 'Img2Num', // Usually your repo name.
-
+  organizationName: 'Ryan-Millard',
+  projectName: 'Img2Num',
   onBrokenLinks: 'throw',
 
-  // 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'],
   },
 
-  // Folders with static resources
   staticDirectories: [
-    path.resolve(__dirname, 'static'), // default docusaurus folder
-    path.resolve(__dirname, '..', 'public'), // main app's public folder
+    path.resolve(__dirname, 'static'),
+    path.resolve(__dirname, '..', 'public'),
   ],
 
   plugins: [
@@ -97,12 +83,9 @@ const config = {
   presets: [
     [
       'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
+      {
         docs: {
           sidebarPath: './sidebars.js',
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
           editUrl: 'https://github.com/Ryan-Millard/Img2Num/edit/main/docs/',
           routeBasePath: 'docs',
           remarkPlugins: [remarkMath],
@@ -114,20 +97,18 @@ const config = {
             type: ['rss', 'atom'],
             xslt: true,
           },
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
           editUrl: 'https://github.com/Ryan-Millard/Img2Num/edit/main/docs/',
-          // Useful options to enforce blogging best practices
           onInlineTags: 'warn',
           onInlineAuthors: 'warn',
           onUntruncatedBlogPosts: 'warn',
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: require.resolve('./src/css/custom.css'),
         },
-      }),
+      },
     ],
   ],
+
   stylesheets: [
     {
       href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
@@ -138,86 +119,76 @@ const config = {
     },
   ],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      // Replace with your project's social card
-      image: 'img/docusaurus-social-card.jpg',
-      colorMode: {
-        respectPrefersColorScheme: true,
-      },
+  themeConfig: {
+    image: 'img/docusaurus-social-card.jpg',
 
-      metadata: [
-        algoliaHeadTag,
-      ],
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
 
-      algolia,
+    metadata: [algoliaHeadTag],
 
-      navbar: {
-        title: 'Img2Num',
-        logo: {
-          alt: 'Img2Num Logo',
-          src: 'img/favicon.svg',
-        },
-        items: [
-          {
-            type: 'docSidebar',
-            sidebarId: 'tutorialSidebar',
-            position: 'left',
-            label: 'Documentation',
-            to: '/docs',
-          },
-          { to: '/blog', label: 'Blog', position: 'left' },
-          { to: '/changelog', label: 'Changelog', position: 'left' },
-          {
-            href: 'https://github.com/Ryan-Millard/Img2Num',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Documentation',
-            items: [
-              {
-                label: 'Documentation',
-                to: '/docs',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'GitHub Discussions',
-                href: 'https://github.com/Ryan-Millard/Img2Num/discussions',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Blog',
-                to: '/blog',
-              },
-              {
-                label: 'GitHub',
-                href: 'https://github.com/Ryan-Millard/Img2Num',
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
-      },
-      prism: {
-        theme: prismThemes.github,
-        darkTheme: prismThemes.dracula,
+    algolia,
+
+    navbar: {
+      title: 'Img2Num',
+      logo: {
+        alt: 'Img2Num Logo',
+        src: 'img/og-icon.png',
       },
-    }),
+      items: [
+        {
+          type: 'docSidebar',
+          sidebarId: 'tutorialSidebar',
+          position: 'left',
+          label: 'Documentation',
+          to: '/docs',
+        },
+        { to: '/blog', label: 'Blog', position: 'left' },
+        { to: '/changelog', label: 'Changelog', position: 'left' },
+        {
+          href: 'https://github.com/Ryan-Millard/Img2Num',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Documentation',
+          items: [{ label: 'Docs', to: '/docs' }],
+        },
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'GitHub Discussions',
+              href: 'https://github.com/Ryan-Millard/Img2Num/discussions',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            { label: 'Blog', to: '/blog' },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/Ryan-Millard/Img2Num',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} Img2Num.`,
+    },
+
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+    },
+  },
 };
 
 export default config;