Merge pull request #175 from spicecodecli/docs-improvements

Docs improvements

Author: CodyKoInABox

docs/docusaurus.config.js

@@ -10,9 +10,9 @@ import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'SpiceCode Documentation',
-  tagline: 'Comprehensive Code Analysis Tool',
-  favicon: 'img/favicon.ico', // Assuming a favicon will be added later or use a default
+  title: 'SpiceCode | Documentation',
+  tagline: 'The next generation of code analysis.',
+  favicon: 'img/spicecode_logo_nobg.png',
 
   // Set the production url of your site here
   url: 'https://spicecodecli.github.io', // Assuming deployment to GitHub Pages
@@ -22,14 +22,15 @@ const config = {
 
   // GitHub pages deployment config.
   organizationName: 'spicecodecli', // Your GitHub org/user name.
-  projectName: 'spicecode-docs', // Usually your repo name for the docs site.
+  projectName: 'spicecode', // Usually your repo name for the docs site. (im guessing since we dont have a docs repo we can just use the regular repo here?)
 
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
   // 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".
+  // my site is not chinese. but thank you for the heads up
   i18n: {
     defaultLocale: 'en',
     locales: ['en'],
@@ -44,9 +45,9 @@ const config = {
           sidebarPath: './sidebars.js',
           // Point to the actual SpiceCode repo for edits
           editUrl:
-            'https://github.com/spicecodecli/spicecode/tree/main/', // Link to the source repo, assuming docs might live there eventually or for context
+            'https://github.com/spicecodecli/spicecode/tree/main/docs', // Link to the source repo, assuming docs might live there eventually or for context
         },
-        blog: false, // Disabling blog as it wasn't requested
+        blog: false, // Disabling blog as it wasn't requested // WAIT WE CAN HAVE A BLOG HERE??????????????? // TODO: RESEARCH BLOG POSSIBILITIES
         // blog: {
         //   showReadingTime: true,
         //   feedOptions: {
@@ -72,13 +73,13 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // Replace with your project's social card
-      image: 'img/spicecode-social-card.jpg', // Placeholder social card
+      // Replace with your project's social card // what even is a social card?
+      image: 'img/spicecode_wallpaper.png', // Placeholder social card
       navbar: {
         title: 'SpiceCode',
         logo: {
           alt: 'SpiceCode Logo',
-          src: 'img/logo.svg', // Assuming a logo will be added later
+          src: 'img/spicecode_logo_nobg.png', // Assuming a logo will be added later
         },
         items: [
           {
@@ -131,6 +132,10 @@ const config = {
                 label: 'Report an Issue',
                 href: 'https://github.com/spicecodecli/spicecode/issues',
               },
+              {
+                label: 'GitHub Discussions',
+                href: 'https://github.com/orgs/spicecodecli/discussions',
+              },
             ],
           },
           {
@@ -145,7 +150,7 @@ const config = {
           },
         ],
         // Update copyright notice
-        copyright: `Copyright © ${new Date().getFullYear()} SpiceCode Project. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} SpiceCode CLI. Built with Docusaurus.`,
       },
       prism: {
         theme: prismThemes.github,

docs/src/css/custom.css

@@ -1,30 +1,32 @@
-/**
- * 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: #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;
+  /* Primary brand colors - Spicy red-orange palette */
+  --ifm-color-primary: #e65100; /* Deep spice orange */
+  --ifm-color-primary-dark: #bf360c;
+  --ifm-color-primary-darker: #a12900;
+  --ifm-color-primary-darkest: #7f1f00;
+  --ifm-color-primary-light: #ff6d00;
+  --ifm-color-primary-lighter: #ff8f00;
+  --ifm-color-primary-lightest: #ffb300;
+
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --docusaurus-highlighted-code-line-bg: rgba(230, 81, 0, 0.1); /* translucent spice */
+  
+  /* Optional spice-themed accent */
+  --ifm-link-color: #ff5722;
+  --ifm-link-hover-color: #ff7043;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* Dark mode variant */
 [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;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-color-primary: #ff8a50;
+  --ifm-color-primary-dark: #ff7043;
+  --ifm-color-primary-darker: #f4511e;
+  --ifm-color-primary-darkest: #bf360c;
+  --ifm-color-primary-light: #ffa270;
+  --ifm-color-primary-lighter: #ffb792;
+  --ifm-color-primary-lightest: #ffd2b3;
+
+  --docusaurus-highlighted-code-line-bg: rgba(255, 138, 80, 0.2);
+  --ifm-link-color: #ffab91;
+  --ifm-link-hover-color: #ffccbc;
 }

docs/src/pages/index.js

@@ -20,7 +20,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            SpiceCode Tutorial - 5min ⏱️
           </Link>
         </div>
       </div>
@@ -32,7 +32,7 @@ export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={`${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
       <HomepageHeader />
       <main>