Adjust Docusarus theme and index page

Author: Crustack

documentation/docs/intro.md documentation/docs/get-started.mddocumentation/docs/intro.md renamed to documentation/docs/get-started.md

@@ -43,18 +43,18 @@ Let's see how to [Create a page](./create-a-page.md).
 
 Regular Markdown images are supported.
 
-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
+You can use absolute paths to reference images in the static directory (`static/img/logo.png`):
 
 ```md
-![Docusaurus logo](/img/docusaurus.png)
+![Docusaurus logo](/img/logo.png)
 ```
 
-![Docusaurus logo](/img/docusaurus.png)
+![Docusaurus logo](/img/logo.png)
 
 You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
 
 ```md
-![Docusaurus logo](./img/docusaurus.png)
+![Docusaurus logo](./img/logo.png)
 ```
 
 ## Code Blocks

documentation/docs/tutorial-basics/markdown-features.mdx

@@ -26,7 +26,7 @@ Copy the `docs/intro.md` file to the `i18n/fr` folder:
 ```bash
 mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
 
-cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
+cp docs/get-started.md i18n/fr/docusaurus-plugin-content-docs/current/get-started.md
 ```
 
 Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.

documentation/docs/tutorial-extras/translate-your-site.md

@@ -5,8 +5,8 @@ import type * as Preset from '@docusaurus/preset-classic';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: 'My Site',
-  tagline: 'Dinosaurs are cool',
+  title: 'NotallyX',
+  tagline: 'A simple and minimalistic open source notes app',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
@@ -67,72 +67,31 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: 'img/featureGraphic.png',
     navbar: {
-      title: 'My Site',
+      title: 'NotallyX',
       logo: {
-        alt: 'My Site Logo',
-        src: 'img/logo.svg',
+        alt: 'NotallyX Logo',
+        src: 'img/logo.png',
       },
       items: [
         {
           type: 'docSidebar',
           sidebarId: 'tutorialSidebar',
           position: 'left',
-          label: 'Tutorial',
+          label: 'Documentation',
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
         {
-          href: 'https://github.com/facebook/docusaurus',
+          href: 'https://github.com/PhilKes/NotallyX',
           label: 'GitHub',
           position: 'right',
         },
       ],
     },
     footer: {
       style: 'dark',
-      links: [
-        {
-          title: 'Docs',
-          items: [
-            {
-              label: 'Tutorial',
-              to: '/docs/intro',
-            },
-          ],
-        },
-        {
-          title: 'Community',
-          items: [
-            {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-            },
-            {
-              label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
-            },
-            {
-              label: 'X',
-              href: 'https://x.com/docusaurus',
-            },
-          ],
-        },
-        {
-          title: 'More',
-          items: [
-            {
-              label: 'Blog',
-              to: '/blog',
-            },
-            {
-              label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
-            },
-          ],
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      links: [],
+      copyright: `Copyright © ${new Date().getFullYear()} NotallyX, Inc. Built with Docusaurus.`,
     },
     prism: {
       theme: prismThemes.github,

documentation/docusaurus.config.ts

@@ -5,52 +5,49 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: ReactNode;
+  image: React.ComponentType<React.ComponentProps<'svg'>>;
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
+    image: require('@site/static/img/phoneScreenshots/1.png').default,
   },
   {
     title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
+    image: require('@site/static/img/phoneScreenshots/2.png').default,
   },
   {
     title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
+    image: require('@site/static/img/phoneScreenshots/3.png').default,
+  },
+  {
+    title: 'Powered by React',
+    image: require('@site/static/img/phoneScreenshots/4.png').default,
+  },
+  {
+    title: 'Powered by React',
+    image: require('@site/static/img/phoneScreenshots/5.png').default,
+  },
+  {
+    title: 'Powered by React',
+    image: require('@site/static/img/phoneScreenshots/6.png').default,
+  },
+  {
+    title: 'Powered by React',
+    image: require('@site/static/img/phoneScreenshots/7.png').default,
+  },
+  {
+    title: 'Powered by React',
+    image: require('@site/static/img/phoneScreenshots/8.png').default,
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, image, description}: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx('col col--3')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+        <img src={image} alt={title}  />  {/* Use <img> to display PNG */}
       </div>
     </div>
   );

documentation/src/components/HomepageFeatures/index.tsx

@@ -3,9 +3,4 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
+}

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

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #7285D0; /* Base primary color */
+  --ifm-color-primary-dark: #5e6ea8; /* Slightly darker */
+  --ifm-color-primary-darker: #4a5991; /* Even darker */
+  --ifm-color-primary-darkest: #3a4877; /* Darkest shade */
+  --ifm-color-primary-light: #7a92d8; /* Lighter shade */
+  --ifm-color-primary-lighter: #8c9fe3; /* Lighter shade */
+  --ifm-color-primary-lightest: #a1b6ed; /* Lightest shade */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #7285D0; /* Base primary color */
+  --ifm-color-primary-dark: #5a6aaf; /* Darker shade, a bit muted */
+  --ifm-color-primary-darker: #4c5896; /* Even darker, more muted */
+  --ifm-color-primary-darkest: #3e487d; /* Darkest shade, still a bit vibrant */
+  --ifm-color-primary-light: #8a9fe5; /* Lighter, but still legible in dark mode */
+  --ifm-color-primary-lighter: #a1b4e6; /* Lighter shade for text highlights */
+  --ifm-color-primary-lightest: #c0c9f1; /* Very light for subtle highlights */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

documentation/src/css/custom.css

@@ -10,18 +10,22 @@ import styles from './index.module.css';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
+  const image = require('@site/static/img/logo.png').default
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
+        <div className="text--center">
+          <img src={image} alt="NotallyX Logo" />
+        </div>
         <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/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            to="/docs/get-started">
+            Get Started 📝
           </Link>
         </div>
       </div>
@@ -33,8 +37,7 @@ export default function Home(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="NotallyX - A simple and minimalistic open source notes app">
       <HomepageHeader />
       <main>
         <HomepageFeatures />