docs: update styles + add logo + build hash

docs/www/docusaurus.config.js

@@ -3,16 +3,28 @@
 
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const child_process = require("child_process");
+
+function getBuildId() {
+  let branch = "";
+  let hash = "";
+  let build = "DEV";
+  try {
+    branch = child_process.execSync(`git rev-parse --abbrev-ref HEAD`).toString("utf-8").trim();
+    hash = child_process.execSync(`git rev-parse --short HEAD`).toString("utf-8").trim();
+    build = `<a rel="noopener noreferrer" target="_blank" href="https://github.com/Azure/static-web-apps-cli/commit/${hash}">${branch}+sha.${hash}</a>`;
+  } catch {}
+  return build;
+}
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "Static Web Apps CLI",
-  tagline: "A Local Development Tool For Azure Static Web Apps",
+  tagline: "All-in-One Local Development Tool For Azure Static Web Apps",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.ico",
 
-  /* PICK A VERSION FROM STAGING vs. PRODUCTION */
   url: "https://azure.github.io",
   baseUrl: "/static-web-apps-cli/", //  Needs to be "/" if deploying to SWA
   organizationName: "azure",
@@ -26,27 +38,9 @@ const config = {
       ({
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
           editUrl: "https://github.com/azure/static-web-apps-cli/tree/main/docs/www/",
         },
         blog: false,
-        /**
-        blog: {
-          blogTitle: 'What\'s New in SWA CLI!',
-          blogDescription: 'Release notes and announcements from the Azure Static Web Apps CLI team',
-          postsPerPage: 3,
-          blogSidebarTitle: 'Recent Posts',
-          blogSidebarCount: 'ALL',
-          showReadingTime: true,
-          feedOptions: {
-            type: 'rss',
-            copyright: `Copyright © ${new Date().getFullYear()} Microsoft Developer Relations`,
-          },
-          // Please change this to your repo.
-          editUrl:
-            'https://github.com/azure/static-web-apps-cli/tree/main/docs/www/',
-        },
-        */
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },
@@ -61,7 +55,7 @@ const config = {
         title: "SWA CLI",
         logo: {
           alt: "SWA CLI Logo",
-          src: "img/logo.svg",
+          src: "img/swa-cli-logos/swa-cli-logo.svg",
         },
         items: [
           {
@@ -99,62 +93,7 @@ const config = {
       },
       footer: {
         style: "dark",
-        /*
-        links: [
-          {
-            title: 'Static Web Apps',
-            items: [
-              {
-                label: 'Documentation',
-                to: 'https://docs.microsoft.com/en-us/azure/static-web-apps/overview',
-              },
-              {
-                label: 'Learning Path',
-                to: 'https://docs.microsoft.com/en-us/learn/paths/azure-static-web-apps/',
-              },
-              {
-                label: 'Video: Tips & Tricks',
-                to: 'https://www.youtube.com/playlist?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Twitter',
-                href: 'https://twitter.com/AzureStaticApps',
-              },
-              {
-                label: 'Dev.to',
-                href: 'https://dev.to/t/staticwebapps',
-              },
-              {
-                label: 'TechCommunity',
-                href: 'https://techcommunity.microsoft.com/t5/forums/searchpage/tab/message?q=Static%20web%20Apps',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'GitHub / SWA CLI',
-                to: 'https://github.com/Azure/static-web-apps-cli',
-              },
-              {
-                label: 'GitHub / Samples Gallery',
-                href: 'https://github.com/microsoft/static-web-apps-gallery-code-samples',
-              },
-              {
-                label: 'GitHub / SWA Templates',
-                href: 'https://github.com/staticwebdev',
-              },
-            ],
-          },
-        ],
-        */
-        copyright: `Copyright © ${new Date().getFullYear()} Microsoft | Built with Docusaurus and Iconcloud.design.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Microsoft | Built with Docusaurus and Iconcloud.design <br>build: ${getBuildId()}`,
       },
       prism: {
         theme: lightCodeTheme,

docs/www/src/components/HomepageFeatures/styles.module.css

@@ -8,5 +8,9 @@
 .featureSvg {
   height: 100px;
   width:  100px;
-  fill: #df004c;
+  fill: #FF4081;
+}
+
+a {
+  color: #FF4081;
 }

docs/www/src/css/custom.css

@@ -4,22 +4,23 @@
  * work well for content-centric websites.
  */
 
-/* 
+/*
  * SWA CLI Theme Colors
  *  A400 - #F50057
  *  A200 - #FF4081
  *  A100 - #FF80AB
  */
 
 /* You can override the default Infima variables here. */
-:root {  
+:root {
   --ifm-color-primary: #f50057;
   --ifm-color-primary-dark: #dd004e;
   --ifm-color-primary-darker: #d0004a;
   --ifm-color-primary-darkest: #ab003d;
   --ifm-color-primary-light: #ff0f64;
   --ifm-color-primary-lighter: #ff1b6c;
   --ifm-color-primary-lightest: #ff4084;
+  --ifm-global-spacing: 2rem;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -63,4 +64,4 @@
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
-/*--- GitHub End  ---*/
+/*--- GitHub End  ---*/

docs/www/src/pages/index.js

@@ -1,23 +1,22 @@
-import React from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import styles from './index.module.css';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--secondary', styles.heroBanner)}>
+    <header className={clsx("hero hero--secondary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <img src="img/swa-cli-logos/swa-cli-logo-grad.svg" width={200} />
+        <h1 className={"hero__title " + styles.rainbow}>{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/use/install">
-            Try the SWA CLI Quickstart ↖️
+          <Link className="button button--secondary button--lg" to="/docs/use/install">
+            Get Started →
           </Link>
         </div>
       </div>
@@ -26,11 +25,12 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title} Documentation`}
-      description="Azure Static Web Apps CLI (SWA CLI) is a local development tool for the Azure Static Web Apps service. Explore the SWA CLI Documentation and Get Started using the tool.">
+      description="Azure Static Web Apps CLI (SWA CLI) is a local development tool for the Azure Static Web Apps service. Explore the SWA CLI Documentation and Get Started using the tool."
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />

docs/www/src/pages/index.module.css

@@ -21,3 +21,9 @@
   align-items: center;
   justify-content: center;
 }
+
+.rainbow {
+  background-image: linear-gradient(to right, #cc4fc2, #3dbdcf);
+  background-clip: text;
+  color: transparent;
+}