Updates homepage header and features

src/components/HomePageHeader.js

@@ -8,6 +8,7 @@ import IconBannerDemo from '../../static/icons/banner_demo.svg';
 import IconBannerGetStarted from '../../static/icons/banner_get-started.svg';
 import IconBannerSource from '../../static/icons/banner_source.svg';
 import IconBannerDocs from '../../static/icons/banner_docs.svg';
+import IconDownArrow from '../../static/icons/interface_down.svg';
 
 export default function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -17,9 +18,9 @@ export default function HomepageHeader() {
       <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
       <h3 className={styles.heroSubTitle}>{siteConfig.tagline}</h3>
       <div className={styles.buttons}>
-        <Button to="/docs" color="pink"><IconBannerGetStarted />Get Started</Button>
+        <Button to="/docs/quick-start" color="pink"><IconBannerGetStarted />Get Started</Button>
         <Button to="/docs" color="blue"><IconBannerDemo />Try it Out</Button>
-        <Button to="/docs" color="green"><IconBannerSource />Source Code</Button>
+        <Button to="https://github.com/Lissy93/dashy" color="green"><IconBannerSource />Source Code</Button>
         <Button to="/docs" color="yellow"><IconBannerDocs />Documentation</Button>
       </div>
       <div className={styles.dashyDescription}>
@@ -38,6 +39,13 @@ export default function HomepageHeader() {
           {!showMore ? 'Keep Reading...' : 'Show Less'}
         </span>
       </div>
+      {(!showMore && document.body.scrollTop === 0) &&
+        <a href="#go-down" className={styles.scrollDown} id="go-down">
+          <IconDownArrow className={styles.scrollDownIcon} />
+          <span className={styles.scrollDownText}>Feature List</span>
+          <IconDownArrow className={styles.scrollDownIcon} />
+        </a>
+      }
       <a href="https://github.com/lissy93/dashy">
         <img className={styles.starButton}
           src="https://img.shields.io/github/stars/Lissy93/Dashy?label=Dashy%20on%20GitHub&logo=github&style=social"

src/components/HomepageFeatures.js

@@ -26,6 +26,7 @@ const FeatureList = [
         custom CSS, and since all properties use CSS variables, it is easy to override.
       </>
     ),
+    link: '/docs/theming',
     icon: (<IconThemes />),
     demo: '../../static/img/homepage-assets/theme-slideshow.gif',
   },
@@ -38,6 +39,7 @@ const FeatureList = [
         icons and of course normal images.
       </>
     ),
+    link: '/docs/icons',
     icon: (<IconIconography />),
   },
   {
@@ -49,6 +51,7 @@ const FeatureList = [
         with more info like response time visible on hover.
       </>
     ),
+    link: '/docs/status-indicators',
     icon: (<IconStatusIndicators />),
     demo: '../../static/img/homepage-assets/status-check-demo.gif',
   },
@@ -61,6 +64,7 @@ const FeatureList = [
         support for Keycloak and other SSO providers.
       </>
     ),
+    link: '/docs/authentication',
     icon: (<IconAuth />),
   },
   {
@@ -72,6 +76,7 @@ const FeatureList = [
         multiple apps at once, all without having to leave your dashboard.
       </>
     ),
+    link: '/docs/alternate-views',
     icon: (<IconOpeningMethods />),
     demo: '../../static/img/homepage-assets/workspace-demo.gif',
   },
@@ -84,6 +89,7 @@ const FeatureList = [
         workspace view.
       </>
     ),
+    link: '/docs/alternate-views',
     icon: (<IconLaunching />),
   },
   {
@@ -97,6 +103,7 @@ const FeatureList = [
         using your favorite search engine.
       </>
     ),
+    link: '/docs/searching',
     icon: (<IconShortcuts />),
     demo: '../../static/img/homepage-assets/searching-demo.gif',
   },
@@ -109,6 +116,7 @@ const FeatureList = [
         data between multiple instances easily.
       </>
     ),
+    link: '/docs/backup-restore',
     icon: (<IconCloudSync />),
   },
   {
@@ -120,6 +128,7 @@ const FeatureList = [
         Real-time validation and hints are in place to help you.
       </>
     ),
+    link: '/docs/configuring',
     icon: (<IconUiConfig />),
     demo: '../../static/img/homepage-assets/config-editor-demo.gif',
   },
@@ -132,6 +141,7 @@ const FeatureList = [
         Your language should be applied automatically, or you can change it in the config menu.
       </>
     ),
+    link: '/docs/multi-language-support',
     icon: (<IconLanguage />),
   },
   {
@@ -142,6 +152,7 @@ const FeatureList = [
         Just run `docker run -p 8080:80 lissy93/dashy` to pull, build and and run Dashy.
       </>
     ),
+    link: '/docs/quick-start',
     icon: (<IconDeploy />),
   },
   {
@@ -156,11 +167,12 @@ const FeatureList = [
         choose to hide any elements you don't need.
       </>
     ),
+    link: '/docs/',
     icon: (<IconLayout />),
   },
 ];
 
-function Feature({ title, description, icon, demo, index }) {
+function Feature({ title, description, icon, demo, index, link }) {
   const side = index % 2 == 0 ? 'left' : 'right';
   const color = getColor(index)
   return (
@@ -170,11 +182,14 @@ function Feature({ title, description, icon, demo, index }) {
         {description}
         <div className="read-the-docs">
           <small>Learn more in the Docs</small>
-          <Button to="/docs" color={color}>{icon} Docs</Button>
+          <Button to={link} color={color}>{icon} Docs</Button>
         </div>
       </div>
       <div className="feature-half assets">
-        <img className="demo" src={demo} />
+        {demo
+        ? <img className="demo" src={demo} />
+        : <span className="not-demo">Screenshot Coming Soon</span>
+      }
       </div>
     </div>
   );
@@ -182,7 +197,7 @@ function Feature({ title, description, icon, demo, index }) {
 
 export default function HomepageFeatures() {
   return (
-    <section className="home-page-features-wrapper">
+    <section className="home-page-features-wrapper" id="features-wrap">
       {FeatureList.map((props, index) => (
         <Feature key={index} index={index} {...props} />
       ))}

static/icons/interface_down.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="arrow-alt-down" class="svg-inline--fa fa-arrow-alt-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 208h-73.8V80c0-26.5-21.5-48-48-48H169.8c-26.5 0-48 21.5-48 48v128H48.1c-42.6 0-64.2 51.7-33.9 81.9l175.9 176c18.7 18.7 49.1 18.7 67.9 0l176-176c30-30.1 8.7-81.9-34-81.9zM224 432L48 256h121.8V80h108.3v176H400L224 432z"></path></svg>