Initial commit: Docusaurus docker stack and docs

site/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+build
+.docusaurus
+.git

site/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

site/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Installed as its own layer so it's only re-run when package.json actually changes.
+COPY package.json ./
+RUN npm install --no-audit --no-fund
+
+# Copy the rest of the scaffolded Docusaurus project (config, src/, static/).
+# The docs/ folder copied here is only a placeholder — docker-compose.yaml
+# bind-mounts the real markdown content from ../docs over the top of it at
+# container start, so editing docs never requires rebuilding this image.
+COPY . .
+
+EXPOSE 3000

site/README.md

@@ -0,0 +1,43 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```bash
+npm install
+```
+
+**Note**: feel free to use the package manager of your choice.
+
+## Local Development
+
+```bash
+npm run 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.
+
+## Build
+
+```bash
+npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Deployment
+
+Using SSH:
+
+```bash
+USE_SSH=true npm run deploy
+```
+
+Not using SSH:
+
+```bash
+GIT_USER=<Your GitHub username> npm run 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.

site/docs/.gitkeep

@@ -0,0 +1 @@
+This folder is overlaid by the bind-mounted ../../docs/ directory at runtime — see docker-compose.yaml.

site/docusaurus.config.js

@@ -0,0 +1,115 @@
+// @ts-check
+import {themes as prismThemes} from 'prism-react-renderer';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+// SITE_URL is read from the container's environment (see ../.env) so the
+// production domain can be set in one place without editing this file.
+const siteUrl = process.env.SITE_URL || 'http://localhost:3000';
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'Dotjuice Docs',
+  tagline: 'Documentation for the Dotjuice WordPress plugins',
+  favicon: 'img/favicon.ico',
+
+  future: {
+    v4: true, // Improve compatibility with the upcoming Docusaurus v4
+  },
+
+  url: siteUrl,
+  baseUrl: '/',
+
+  organizationName: 'dotjuice',
+  projectName: 'dotjuice-docs',
+
+  // 'warn' rather than 'throw': a broken cross-link (e.g. while a doc is
+  // being edited) logs a build warning instead of taking the whole site down.
+  onBrokenLinks: 'warn',
+  onBrokenMarkdownLinks: 'warn',
+
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: './sidebars.js',
+          routeBasePath: 'docs',
+          editUrl: undefined,
+        },
+        blog: false,
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      image: 'img/dotjuice-logo.png',
+      colorMode: {
+        respectPrefersColorScheme: true,
+      },
+      navbar: {
+        title: 'Dotjuice Docs',
+        logo: {
+          alt: 'Dotjuice',
+          src: 'img/dotjuice-logo.png',
+        },
+        items: [
+          {
+            type: 'docSidebar',
+            sidebarId: 'docsSidebar',
+            position: 'left',
+            label: 'Documentation',
+          },
+          {
+            href: 'https://dotjuice.co.uk',
+            label: 'dotjuice.co.uk',
+            position: 'right',
+          },
+          {
+            href: 'https://shop.dotjuice.co.uk',
+            label: 'Shop',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Plugins',
+            items: [
+              {label: 'Elementor Tools (Free)', to: '/docs/dotjuice-elementor-tools/getting-started'},
+              {label: 'Elementor Tools Pro', to: '/docs/dotjuice-elementor-tools-pro/getting-started'},
+              {label: 'Pagespeed', to: '/docs/dotjuice-pagespeed/getting-started'},
+            ],
+          },
+          {
+            title: 'Dotjuice',
+            items: [
+              {label: 'Website', href: 'https://dotjuice.co.uk'},
+              {label: 'Shop', href: 'https://shop.dotjuice.co.uk'},
+              {label: 'Support', href: 'https://dotjuice.co.uk/support/'},
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Dotjuice Design.`,
+      },
+      prism: {
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
+      },
+    }),
+};
+
+export default config;

site/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "dotjuice-docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.10.2",
+    "@docusaurus/faster": "3.10.2",
+    "@docusaurus/preset-classic": "3.10.2",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.10.2",
+    "@docusaurus/types": "3.10.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0"
+  }
+}

site/sidebars.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+/**
+ * Sidebar is fully auto-generated from the docs/ folder structure, driven by
+ * each plugin's _category_.json for ordering and labels — add a new .md file
+ * anywhere under docs/ and it appears in the sidebar automatically, no
+ * manual entry needed here.
+ *
+ * @type {import('@docusaurus/plugin-content-docs').SidebarsConfig}
+ */
+const sidebars = {
+  docsSidebar: [{type: 'autogenerated', dirName: '.'}],
+};
+
+export default sidebars;

site/src/components/HomepageFeatures/index.js

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const FeatureList = [
+  {
+    title: 'Elementor Tools (Free)',
+    to: '/docs/dotjuice-elementor-tools/getting-started',
+    description: 'Screenshot capture, dark mode, WooCommerce styling widgets, and small utilities for Elementor.',
+  },
+  {
+    title: 'Elementor Tools Pro',
+    to: '/docs/dotjuice-elementor-tools-pro/getting-started',
+    description: 'Advanced WooCommerce widgets: AJAX filtering, cart, quick view, custom product tabs, and ACF frontend forms.',
+  },
+  {
+    title: 'Pagespeed',
+    to: '/docs/dotjuice-pagespeed/getting-started',
+    description: 'Full-page caching, CSS/JS optimisation, image loading, and database cleanup.',
+  },
+];
+
+function Feature({title, to, description}) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">
+          <Link to={to}>{title}</Link>
+        </Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

site/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

site/src/css/custom.css

@@ -0,0 +1,39 @@
+/**
+ * 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: #25bec2;
+  --ifm-color-primary-dark: #25bec2;
+  --ifm-color-primary-darker: #25bec2;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #25bec2;
+  --ifm-color-primary-lighter: #25bec2;
+  --ifm-color-primary-lightest: #25bec2;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-footer-background-color: #111113 !important;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25bec2;
+  --ifm-color-primary-dark: #25bec2;
+  --ifm-color-primary-darker: #25bec2;
+  --ifm-color-primary-darkest: #25bec2;
+  --ifm-color-primary-light: #25bec2;
+  --ifm-color-primary-lighter: #25bec2;
+  --ifm-color-primary-lightest: #25bec2;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-footer-background-color: #111113 !important;
+}
+
+/* Footer background: :root doesn't reach the footer because Infima's own
+   .footer--dark rule sets --ifm-footer-background-color directly on itself,
+   which always wins over an inherited value regardless of layers/order. */
+.footer--dark {
+  --ifm-footer-background-color: #111113;
+}

site/src/pages/index.js

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link className="button button--secondary button--lg" to="/docs/">
+            Browse the Documentation
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={siteConfig.title}
+      description="Documentation for the Dotjuice WordPress plugins.">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

site/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

site/src/pages/markdown-page.mdx

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.