🚧 Working on the docs page

src/pages/docs.js

@@ -4,46 +4,175 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Button from '../components/Button';
 
 import './docs.scss';
-
 import getColor from '../utils/ui-helpers';
-import IconShortcuts from '../../static/icons/features_shortcuts.svg';
+
+import IconCloudSync from '../../static/icons/features_cloud-sync.svg';
+import IconDeploy from '../../static/icons/features_depoloyment.svg';
+// import IconIconography from '../../static/icons/features_icons.svg';
+// import IconLayout from '../../static/icons/features_layout-customization.svg';
+// import IconOpeningMethods from '../../static/icons/features_opening-methods.svg';
+// import IconShortcuts from '../../static/icons/features_shortcuts.svg';
+// import IconStatusIndicators from '../../static/icons/features_status-indicators.svg';
+// import IconThemes from '../../static/icons/features_themes.svg';
+import IconUiConfig from '../../static/icons/features_ui-configuration.svg';
+import IconTroubleshooting from '../../static/icons/docs_troubleshooting.svg';
+import IconManagement from '../../static/icons/docs_managment.svg';
+import IconDeveloping from '../../static/icons/docs_developing.svg';
+import IconDevGuides from '../../static/icons/docs_guides.svg';
+import IconContributing from '../../static/icons/docs_contributing.svg';
+import IconShowcase from '../../static/icons/docs_showcase.svg';
+import IconCredits from '../../static/icons/docs_credits.svg';
+import IconAuth from '../../static/icons/docs_authentication.svg';
+// import IconCloudSync from '../../static/icons/docs_cloud-sync.svg';
+import IconIconography from '../../static/icons/docs_icons.svg';
+import IconInternationalization from '../../static/icons/docs_internationalisation.svg';
+import IconStatusIndicators from '../../static/icons/docs_status-indicators.svg';
+import IconTheming from '../../static/icons/docs_theming.svg';
 
 const DocsLinks = [
   {
     title: 'Deployment',
-    description: '',
+    description: 'Getting Dashy up and running',
     link: '',
-    icon: (<IconShortcuts />),
+    icon: (<IconDeploy />),
   },
   {
     title: 'Configuring',
-    description: '',
+    description: 'All Config Options',
     link: '',
-    icon: (<IconShortcuts />),
+    icon: (<IconUiConfig />),
   },
   {
     title: 'Management',
-    description: '',
+    description: 'Updating, security, web server configuration, etc',
     link: '',
-    icon: (<IconShortcuts />),
+    icon: (<IconManagement />),
   },
   {
     title: 'Troubleshooting',
-    description: '',
+    description: 'Solutions to Common Issues',
     link: '',
-    icon: (<IconShortcuts />),
+    icon: (<IconTroubleshooting />),
   },
 ];
 
+const DocsSections = [
+  {
+    section: 'Running Dashy',
+    items: [
+      {
+        title: 'Deployment',
+        description: 'Getting Dashy up and running',
+        link: '',
+        icon: (<IconDeploy />),
+      },
+      {
+        title: 'Configuring',
+        description: 'All Config Options',
+        link: '',
+        icon: (<IconUiConfig />),
+      },
+      {
+        title: 'Management',
+        description: 'Updating, security, web server configuration, etc',
+        link: '',
+        icon: (<IconManagement />),
+      },
+      {
+        title: 'Troubleshooting',
+        description: 'Solutions to Common Issues',
+        link: '',
+        icon: (<IconTroubleshooting />),
+      },
+    ]
+  },
+  {
+    section: 'Community',
+    items: [
+      {
+        title: 'Developing',
+        description: 'Dashy workflow, and running locally',
+        link: '',
+        icon: (<IconDeveloping />),
+      },
+      {
+        title: 'Dev Guides',
+        description: 'Common development tasks',
+        link: '',
+        icon: (<IconDevGuides />),
+      },
+      {
+        title: 'Contributing',
+        description: 'How you can help support Dashy\'s development',
+        link: '',
+        icon: (<IconContributing />),
+      },
+      {
+        title: 'Showcase',
+        description: 'See how others are using Dashy, and share your dashboard',
+        link: '',
+        icon: (<IconShowcase />),
+      },
+      {
+        title: 'Credits',
+        description: 'List of people and projects that have made Dashy possible',
+        link: '',
+        icon: (<IconCredits />),
+      },
+    ]
+  },
+  {
+    section: 'Feature Docs',
+    items: [
+      {
+        title: 'Authentication',
+        description: 'Configure login and user control',
+        link: '',
+        icon: (<IconAuth />),
+      },
+      {
+        title: 'Backup & Restore',
+        description: 'Cloud Sync, usage and background',
+        link: '',
+        icon: (<IconCloudSync />),
+      },
+      {
+        title: 'Icons',
+        description: 'Available icon types for sections and items',
+        link: '',
+        icon: (<IconIconography />),
+      },
+      {
+        title: 'Language Switching',
+        description: 'Changing language, and adding new locales',
+        link: '',
+        icon: (<IconInternationalization />),
+      },
+      {
+        title: 'Status Indicators',
+        description: 'Monitoring uptime of your services with Dashy',
+        link: '',
+        icon: (<IconStatusIndicators />),
+      },
+      {
+        title: 'Theming',
+        description: 'Guide to customizing the look and feel of Dashy',
+        link: '',
+        icon: (<IconTheming />),
+      },
+    ]
+  }
+];
+
 function DocsLink({ title, description, icon, link, index }) {
   const color = getColor(index);
   return (
     <Button to={link} className="docs-link" color={color}>
-      <div className="docs-icon">{icon}</div>
+      <div className="row1">
-      <div className="docs-text">
+        {icon}
-        <p>{title}</p>
+        <p className="name">{title}</p>
-        <p>{description}</p>
       </div>
+      <span className="description">{description}</span>
     </Button>
   );
 }
@@ -55,10 +184,15 @@ export default function Docs() {
       title={siteConfig.title}
       description="Documentation | Dashy, a self-hosted dashboard for your homelab">
       <main className="docs">
-        <h1>Docs</h1>
+        <h1 className="docs-title">Dashy Docs</h1>
         <div className="docs-contents">
-          {DocsLinks.map((props, index) => (
+          {DocsSections.map((DocsLinks, indexOuter) => (
-            <DocsLink key={index} index={index} {...props} />
+            <div key={indexOuter}>
+              <h3 className="section-title">{indexOuter + 1}. {DocsLinks.section}</h3>
+              <div className="docs-links-section">
+                {DocsLinks.items.map((props, index) => (<DocsLink key={indexOuter + index} index={indexOuter + index} {...props} />))}
+              </div>
+            </div>
           )
           )}
         </div>

src/pages/docs.scss

@@ -1,25 +1,53 @@
 
 main.docs {
-  max-width: 1000px;
+  max-width: 950px;
   margin: 1rem auto;
   padding: 1rem;
+  background: var(--hero-background);
+  box-shadow: var(--feature-img-shadow);
+
+  h1.docs-title {
+    margin: 0;
+    font-size: 5rem;
+  }
+
+  div.row1 {
+    display: flex;
+    flex-direction: row;
+  }
+
+  div.docs-links-section {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
   div.docs-contents {
     color: var(--text-color);
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    h3.section-title {
+      margin: 1rem 0.5rem 0.5rem 0.5rem;
+    }
     a {
-      max-width: 5rem;
+      display: flex;
+      flex-direction: column;
+      width: calc(33% - 1.5rem);
+      min-height: 5rem;
       padding: 0.25rem 0.5rem;
-      p {
+      margin: 0.5rem 0.75rem;
+      p.name {
         margin: 0;
+        text-align: left;
+        font-size: 1.4rem;
       }
+      span.description {
+        text-align: left;
+        font-size: 1rem;
+        white-space: pre-wrap;
       }
-    a.docs-link {
+      @media (max-width: 500px) {
-      max-width: 5rem;
+        width: 100%;
-      p {
-        color: var(--text-color);
-      }
-      .docs-icon svg {
-        width: 2rem;
       }
     }
   }