Merge pull request #7 from drivecore/fix/issues-1-3-4-5-6

bhouston · web-flow · commit e1e56908f6f5 · 2025-03-07T01:42:35.000-05:00
Implement documentation improvements (Issues #1, #3, #4, #5, #6)
diff --git a/blog/agentic-coding-guidelines.md b/blog/agentic-coding-guidelines.md
@@ -1,6 +1,6 @@
 ---
 title: Best Practices for Efficient Agentic Coding
-subTitle: Agentic Coding Best Practices
+shortTitle: Agentic Coding Best Practices
 date: 2025-03-06
 authors: [ben]
 tags: [ai, coding]
diff --git a/blog/authors.yml b/blog/authors.yml
@@ -5,10 +5,15 @@ ben:
   image_url: https://github.com/bhouston.png
   socials:
     github: bhouston
-    twitter: BenHouston3D
+    x: BenHouston3D  # Updated from twitter
+    bluesky: benhouston.bsky.social
+    mastodon: '@benhouston@fosstodon.org'
 
 mycoder_team:
   name: MyCoder Team
   title: MyCoder Development Team
   url: https://github.com/drivecore
   image_url: https://github.com/drivecore.png
+  socials:
+    github: drivecore
+    x: mycoderAI
diff --git a/docs/getting-started/linux.md b/docs/getting-started/linux.md
@@ -9,17 +9,43 @@ This guide will help you set up MyCoder on Linux.
 ## Prerequisites
 
 1. **Node.js**: Install Node.js version 20.0.0 or higher
-   - Using package manager (Ubuntu/Debian):
-     ```bash
-     curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
-     sudo apt-get install -y nodejs
-     ```
-   - Using package manager (Fedora/RHEL):
-     ```bash
-     curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
-     sudo yum install -y nodejs
-     ```
-   - Verify installation with `node --version`
+   
+   > **⚠️ Important:** MyCoder requires Node.js runtime to function properly.
+   
+   **Recommended: Using NVM (Node Version Manager)**
+   
+   NVM is the preferred way to install Node.js as it allows for easy version management and avoids permission issues:
+   
+   ```bash
+   # Install NVM
+   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+   
+   # Reload shell configuration
+   source ~/.bashrc  # or source ~/.zshrc
+   
+   # Install latest LTS version of Node.js
+   nvm install --lts
+   
+   # Set it as default
+   nvm use --lts
+   
+   # Verify installation
+   node --version
+   ```
+   
+   **Alternative: Using package manager (Ubuntu/Debian):**
+   ```bash
+   curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+   sudo apt-get install -y nodejs
+   ```
+   
+   **Alternative: Using package manager (Fedora/RHEL):**
+   ```bash
+   curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
+   sudo yum install -y nodejs
+   ```
+   
+   Verify installation with `node --version`
 
 2. **Git**: Install Git if not already available
    - Ubuntu/Debian: `sudo apt-get install git`
diff --git a/docs/getting-started/macos.md b/docs/getting-started/macos.md
@@ -9,9 +9,39 @@ This guide will help you set up MyCoder on macOS.
 ## Prerequisites
 
 1. **Node.js**: Install Node.js version 20.0.0 or higher
-   - Using Homebrew: `brew install node`
-   - Or download from [nodejs.org](https://nodejs.org/)
-   - Verify installation with `node --version`
+   
+   > **⚠️ Important:** MyCoder requires Node.js runtime to function properly.
+   
+   **Recommended: Using NVM (Node Version Manager)**
+   
+   NVM is the preferred way to install Node.js as it allows for easy version management and avoids permission issues:
+   
+   ```bash
+   # Install NVM
+   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+   
+   # Reload shell configuration
+   source ~/.zshrc  # or source ~/.bash_profile for older macOS versions
+   
+   # Install latest LTS version of Node.js
+   nvm install --lts
+   
+   # Set it as default
+   nvm use --lts
+   
+   # Verify installation
+   node --version
+   ```
+   
+   **Alternative: Using Homebrew:**
+   ```bash
+   brew install node
+   ```
+   
+   **Alternative: Direct download**
+   Download from [nodejs.org](https://nodejs.org/)
+   
+   Verify installation with `node --version`
 
 2. **Git**: macOS typically comes with Git pre-installed
    - Verify with `git --version`
diff --git a/docs/getting-started/windows.md b/docs/getting-started/windows.md
@@ -9,7 +9,31 @@ This guide will help you set up MyCoder on Windows.
 ## Prerequisites
 
 1. **Node.js**: Install Node.js version 20.0.0 or higher
+   
+   > **⚠️ Important:** MyCoder requires Node.js runtime to function properly.
+   
+   **Recommended: Using NVM for Windows (Node Version Manager)**
+   
+   NVM for Windows is the preferred way to install Node.js as it allows for easy version management:
+   
+   ```
+   # Download and install NVM for Windows
+   # Visit: https://github.com/coreybutler/nvm-windows/releases
+   # Download the nvm-setup.exe file from the latest release
+   
+   # After installation, open a new Command Prompt and install Node.js
+   nvm install lts
+   
+   # Set it as default
+   nvm use lts
+   
+   # Verify installation
+   node --version
+   ```
+   
+   **Alternative: Direct download**
    - Download from [nodejs.org](https://nodejs.org/)
+   - Run the installer and follow the prompts
    - Verify installation with `node --version`
 
 2. **Git**: Install Git for Windows
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -56,6 +56,21 @@ const config: Config = {
           onInlineTags: 'warn',
           onInlineAuthors: 'warn',
           onUntruncatedBlogPosts: 'warn',
+          // Use short titles in blog sidebar
+          blogSidebarTitle: 'Recent Posts',
+          blogSidebarCount: 10,
+          blogTitle: 'MyCoder Blog',
+          postsPerPage: 5,
+          blogListComponent: '@theme/BlogListPage',
+          blogPostComponent: '@theme/BlogPostPage',
+          blogTagsListComponent: '@theme/BlogTagsListPage',
+          blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
+          rehypePlugins: [],
+          beforeDefaultRemarkPlugins: [],
+          beforeDefaultRehypePlugins: [],
+          truncateMarker: /<!-- truncate -->/,
+          // Add custom transform function to use shortTitle if available
+          blogSidebarItemComponent: require.resolve('./src/components/BlogSidebarItem'),
         },
         theme: {
           customCss: './src/css/custom.css',
@@ -122,7 +137,7 @@ const config: Config = {
               href: 'https://discord.gg/5K6TYrHGHt',
             },
             {
-              label: 'Twitter',
+              label: 'X (Twitter)',
               href: 'https://twitter.com/mycoderAI',
             },
           ],
@@ -145,7 +160,7 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} DriveCore, Inc. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} <a href="https://drivecore.ai">DriveCore, Inc.</a> Built with Docusaurus.`,
     },
     prism: {
       theme: prismThemes.github,
diff --git a/src/components/BlogSidebarItem/index.js b/src/components/BlogSidebarItem/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+export default function BlogSidebarItem({permalink, title, shortTitle}) {
+  // Use shortTitle if available, otherwise use title
+  const displayTitle = shortTitle || title;
+  
+  return (
+    <Link to={permalink} className={styles.sidebarItemLink}>
+      {displayTitle}
+    </Link>
+  );
+}
diff --git a/src/components/BlogSidebarItem/styles.module.css b/src/components/BlogSidebarItem/styles.module.css
@@ -0,0 +1,10 @@
+.sidebarItemLink {
+  display: block;
+  margin-bottom: 0.8rem;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.sidebarItemLink:hover {
+  text-decoration: underline;
+}
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
@@ -11,32 +11,32 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
+    title: 'AI-Powered Coding Assistant',
     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.
+        MyCoder leverages advanced AI models to understand your requirements
+        and generate high-quality code solutions in multiple programming languages.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
+    title: 'Context-Aware Responses',
     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.
+        MyCoder understands your project structure and existing code, providing
+        solutions that integrate seamlessly with your codebase.
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Built for Developers',
     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.
+        Designed with developer workflows in mind, MyCoder integrates with your
+        terminal, code editor, and development environment.
       </>
     ),
   },
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -21,3 +21,34 @@
   align-items: center;
   justify-content: center;
 }
+
+.quickStart {
+  padding: 3rem 0;
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.codeBlock {
+  background-color: var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.docsLinks {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.docsLinks li {
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
+}
+
+.docsLinks a {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.docsLinks a:hover {
+  text-decoration: underline;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -21,23 +21,60 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            Get Started with MyCoder
           </Link>
         </div>
       </div>
     </header>
   );
 }
 
+function HomepageQuickStart() {
+  return (
+    <section className={styles.quickStart}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6">
+            <Heading as="h2">Quick Start</Heading>
+            <p>
+              Get up and running with MyCoder in minutes. MyCoder is an AI-powered coding assistant
+              that helps you write better code faster.
+            </p>
+            <pre className={styles.codeBlock}>
+              <code>
+                # Install MyCoder globally<br />
+                npm install -g mycoder<br /><br />
+                # Use MyCoder with a prompt<br />
+                mycoder "Create a React component that displays a counter"
+              </code>
+            </pre>
+          </div>
+          <div className="col col--6">
+            <Heading as="h2">Popular Documentation</Heading>
+            <ul className={styles.docsLinks}>
+              <li><Link to="/docs/getting-started/windows">Windows Setup</Link></li>
+              <li><Link to="/docs/getting-started/macos">macOS Setup</Link></li>
+              <li><Link to="/docs/getting-started/linux">Linux Setup</Link></li>
+              <li><Link to="/docs/usage">Usage Guide</Link></li>
+              <li><Link to="/blog">Latest Updates</Link></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 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 />">
+      title={`${siteConfig.title} - AI-Powered Coding Assistant`}
+      description="MyCoder is an AI-powered coding assistant that helps developers write better code faster with context-aware code generation.">
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <HomepageQuickStart />
       </main>
     </Layout>
   );
