diff --git a/docs/README.md b/docs/README.md index b28211a9b..b3e666433 100644 --- a/docs/README.md +++ b/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= 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= 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. diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index a60fba721..3940b118c 100644 --- a/docs/docusaurus.config.js +++ b/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 // pathname under which your site is served - // For GitHub pages deployment, it is often '//' 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; diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 2bc6a4cfd..fb2e2729f 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,10 +1,10 @@ /** - * 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. + * Global styles for Img2Num Docs + * Includes Infima overrides + glassmorphic theme */ - -/* You can override the default Infima variables here. */ +/* ============================ + Infima Theme Overrides + ============================ */ :root { --ifm-color-primary: #2e8555; --ifm-color-primary-dark: #29784c; @@ -13,11 +13,24 @@ --ifm-color-primary-light: #33925d; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; + --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + + /* ============================ + Glassmorphic Variables + ============================ */ + --glass-bg: rgba(255, 255, 255, 0.7); + --glass-bg-fallback: rgba(255, 255, 255, 0.9); + --glass-bg-dark: rgba(20, 20, 20, 0.65); + --glass-bg-dark-fallback: rgba(20, 20, 20, 0.85); + + --glass-blur: 12px; + --glass-radius: 16px; + --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } -/* For readability concerns, you should choose a lighter palette in dark mode. */ +/* Dark mode variables */ [data-theme='dark'] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; @@ -26,5 +39,85 @@ --ifm-color-primary-light: #29d5b0; --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +/* ============================ + Glass Card Component + ============================ */ +.glass-card { + background: var(--glass-bg-fallback); + border-radius: var(--glass-radius); + box-shadow: var(--glass-shadow); + padding: 1.5rem; +} + +@supports (backdrop-filter: blur(12px)) { + .glass-card { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + } +} + +/* Dark mode glass */ +[data-theme='dark'] .glass-card { + background: var(--glass-bg-dark-fallback); +} + +@supports (backdrop-filter: blur(12px)) { + [data-theme='dark'] .glass-card { + background: var(--glass-bg-dark); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + } +} + +/* ============================ + Apply to Docusaurus Layout + ============================ */ +.hero { + padding: 3rem 2rem; +} + +.hero .container { + max-width: 960px; +} + +.docMainContainer .container { + margin-top: 1rem; +} + +.docMainContainer .container > .row { + gap: 1.5rem; +} + +/* Cards */ +.card { + border-radius: var(--glass-radius); + box-shadow: var(--glass-shadow); +} + +/* Glass cards */ +.card.glass-card { + background: var(--glass-bg-fallback); +} + +[data-theme='dark'] .card.glass-card { + background: var(--glass-bg-dark-fallback); +} + +@supports (backdrop-filter: blur(12px)) { + .card.glass-card { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + } + + [data-theme='dark'] .card.glass-card { + background: var(--glass-bg-dark); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + } +} diff --git a/docs/src/pages/index.md b/docs/src/pages/index.md index f058a53e7..a97dfb140 100644 --- a/docs/src/pages/index.md +++ b/docs/src/pages/index.md @@ -6,9 +6,20 @@ slug: / import hedgeMove from '@site/static/img/pixel_art_hedgehog/move/move.gif'; +
+ # Welcome to Img2Num -Hedhehog Running +Hedgehog Running + Turn your favorite images into interactive color-by-number templates in seconds! @@ -23,3 +34,5 @@ Turn your favorite images into interactive color-by-number templates in seconds! ## Learn More Check out the [Docs](/docs) for tutorials and advanced usage, or visit our [Blog](/blog) for updates and tips. + +
diff --git a/docs/static/img/og-icon.png b/docs/static/img/og-icon.png new file mode 100644 index 000000000..e09aadba7 Binary files /dev/null and b/docs/static/img/og-icon.png differ