Help center task 2

.coderabbit.yaml

@@ -0,0 +1,70 @@
+# CodeRabbit Configuration
+language: en-US  # Language for reviews
+
+# Review settings
+reviews:
+  profile: chill  # Options: chill, assertive
+  high_level_summary: true
+  high_level_summary_placeholder: '@coderabbitai summary'
+  auto_title_placeholder: '@coderabbitai'
+  changed_files_summary: true
+  sequence_diagrams: true
+  assess_linked_issues: true
+  related_issues: true
+  related_prs: true
+  suggested_labels: true
+  suggested_reviewers: true
+  poem: true
+
+  # Path filters and instructions
+  path_filters: []  # Add glob patterns to include/exclude files
+  path_instructions: []  # Add path-specific review instructions
+
+  # Auto review settings
+  auto_review:
+    enabled: true
+    auto_incremental_review: true
+    drafts: false
+
+  # Tool integrations
+  tools:
+    # Common tools (all enabled by default)
+    ast-grep:
+      essential_rules: true
+    shellcheck:
+      enabled: true
+    ruff:
+      enabled: true
+    markdownlint:
+      enabled: true
+    biome:
+      enabled: true
+    eslint:
+      enabled: true
+    gitleaks:
+      enabled: true
+
+# Chat settings
+chat:
+  auto_reply: true
+  create_issues: true
+
+# Knowledge base settings
+knowledge_base:
+  web_search:
+    enabled: true
+  learnings:
+    scope: auto
+  issues:
+    scope: auto
+  pull_requests:
+    scope: auto
+
+# Code generation settings
+code_generation:
+  docstrings:
+    path_instructions:
+      - path: "**/*.js"
+        instructions: |
+          End all docstrings with a notice that says "Auto-generated by CodeRabbit.".
+          Do not omit the closing tags; the docstring must be valid.

bin/help-center.js

@@ -69,14 +69,6 @@ program
     console.log('    Deploys the help center to your specified domain.');
   });
 
-program
-  .command('build')
-  .description('Build the help center for production')
-  .action(() => {
-    console.log(chalk.blue('Building help center...'));
-    execSync('next build', { stdio: 'inherit' });
-  });
-
 program
   .command('start')
   .description('Start the development server')

context/ThemeContext.js

@@ -0,0 +1,35 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+
+const ThemeContext = createContext();
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState('light'); // Default theme
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme) {
+      setTheme(storedTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

pages/_app.js

@@ -1,12 +1,17 @@
 import '../styles/globals.css';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import '@fortawesome/fontawesome-svg-core/styles.css';
+import { ThemeProvider } from '../context/ThemeContext';
 
 // Prevent Font Awesome from adding its CSS since we did it manually above
 config.autoAddCss = false;
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }
 
 export default MyApp;

pages/index.js

@@ -7,11 +7,14 @@ import {
   faBook,
   faCreditCard,
   faCode,
-  faUser
+  faUser,
+  faSun, 
+  faMoon 
 } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { categories, articles } from '../data';
 import styles from '../styles/Home.module.css';
+import { useTheme } from '../context/ThemeContext'; // Import useTheme
 
 const iconMap = {
   'rocket': faRocket,
@@ -22,6 +25,7 @@ const iconMap = {
 
 export default function Home() {
   const [query, setQuery] = useState('');
+  const { theme, toggleTheme } = useTheme(); // Use theme context
   const filteredArticles = articles.filter(article =>
     article.title.toLowerCase().includes(query.toLowerCase())
   );
@@ -30,21 +34,31 @@ export default function Home() {
     <div className={styles.container}>
       <header className={styles.header}>
         <Link href="/" className={styles.logo}>Acme Corp</Link>
+        <button onClick={toggleTheme} className={styles.themeToggle}>
+          <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} />
+        </button>
       </header>
       <main className={styles.main}>
         <div className={styles.searchContainer}>
           <h1>Advice and answers from the Acme Corp Team</h1>
           <div className={styles.searchWrapper}>
+            <label htmlFor="search-input" className={styles.visuallyHidden}>
+              Search help articles
+            </label>
             <FontAwesomeIcon 
               icon={faSearch} 
               className={styles.searchIcon}
+              aria-hidden="true"
             />
             <input
+              id="search-input"
               type="text"
               placeholder="Search for articles..."
               className={styles.search}
               value={query}
               onChange={(e) => setQuery(e.target.value)}
+              aria-label="Search help articles"
+              role="searchbox"
             />
           </div>
         </div>

styles/Home.module.css

@@ -8,6 +8,9 @@
   background-color: #0f172a;
   padding: 1.5rem 2rem;
   color: white;
+  display: flex; /* Enable flexbox for alignment */
+  justify-content: space-between; /* Space between logo and toggle */
+  align-items: center; /* Vertically align items */
 }
 
 .logo {
@@ -175,4 +178,81 @@
 .socialIcon svg {
   width: 1.25rem !important;
   height: 1.25rem;
+}
+
+.themeToggle {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  font-size: 1.25rem; /* Adjust icon size as needed */
+}
+
+.themeToggle:hover {
+  color: #cbd5e0; /* Lighter color on hover */
+}
+
+/* Dark Mode adjustments for Home.module.css */
+/* You might need to add specific dark mode overrides for components in this file */
+/* For example, if a card has a light background, you\'ll want to change it for dark mode */
+
+body.dark-mode .search {
+  background-color: #2d3748; /* Darker search input background */
+  border-color: #4a5568; /* Darker border */
+  color: #e2e8f0; /* Light text for input */
+}
+
+body.dark-mode .search::placeholder {
+  color: #a0aec0; /* Lighter placeholder text */
+}
+
+body.dark-mode .search:focus {
+  border-color: #63b3ed; /* Lighter blue for focus */
+  background-color: #1a202c;
+}
+
+body.dark-mode .categoryCard {
+  background: #2d3748; /* Darker card background */
+  border-color: #4a5568;
+}
+
+body.dark-mode .categoryCard:hover {
+  border-color: #63b3ed;
+}
+
+body.dark-mode .categoryCard h2 {
+  color: #e2e8f0;
+}
+
+body.dark-mode .categoryCard p,
+body.dark-mode .articleCount {
+  color: #a0aec0;
+}
+
+body.dark-mode .searchResults {
+  background: #2d3748;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Adjust shadow for dark mode */
+}
+
+body.dark-mode .searchResults li a {
+  color: #e2e8f0;
+}
+
+body.dark-mode .searchResults li a:hover {
+  color: #63b3ed;
+}
+
+body.dark-mode .footer {
+  border-top-color: #4a5568;
+}
+
+body.dark-mode .footerLogo,
+body.dark-mode .footerLink,
+body.dark-mode .socialIcon {
+  color: #a0aec0;
+}
+
+body.dark-mode .footerLink:hover,
+body.dark-mode .socialIcon:hover {
+  color: #e2e8f0;
 }

styles/globals.css

@@ -4,6 +4,21 @@ html, body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background: #ffffff;
   color: #111827;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Dark Mode Styles */
+body.dark-mode {
+  background-color: #1a202c; /* Dark background */
+  color: #e2e8f0; /* Light text */
+}
+
+body.dark-mode a {
+  color: #63b3ed; /* Lighter blue for links in dark mode */
+}
+
+body.dark-mode a:hover {
+  color: #4299e1;
 }
 
 * {