Docsite appearance overhaul

.github/workflows/deploy.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
     # Review gh actions docs if you want to further define triggers, paths, etc
     # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
 

apps/docsite/docusaurus.config.ts

@@ -3,6 +3,7 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
+import sidebars from "./sidebars";
 
 const config: Config = {
   title: "FluentUI Charting Contrib Docsite",
@@ -67,12 +68,12 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: "img/docusaurus-social-card.jpg",
+    image: "img/fluent-charting-social-card.jpg",
     navbar: {
       title: "FluentUI Charting",
       logo: {
         alt: "FluentUI Charting Logo",
-        src: "img/logo.svg",
+        src: "img/microsoft.png",
       },
       items: [
         {
@@ -89,14 +90,17 @@ const config: Config = {
       ],
     },
     footer: {
-      style: "dark",
+      // style: "dark",
+      logo:{
+        src:"img/microsoft.png"
+      },
       links: [
         {
           title: "Docs",
           items: [
             {
               label: "Docs",
-              to: "/docs/Fluent-React-Charting",
+              to: `/docs/${sidebars.tutorialSidebar[0]}`,
             },
           ],
         },

apps/docsite/src/components/HomepageFeatures/index.tsx

@@ -4,48 +4,36 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  imageURL: string;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: 'Community driven',
+    imageURL: require('@site/static/img/img_community_driven.png').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Charting library is built as a community driven project. There are extensive tests and guidance docs to ensure quality and collaborative development. The team is committed to help partners build their scenarios. Recent partner contributions include secondary y-axis and donut chart default colors..
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Built in accessibility',
+    imageURL: require('@site/static/img/img_accessibility.png').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.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    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.
+        With design and dev working hand in hand, our data viz library has considered accessibility from day one. Our library is WCAG MAS C compliant, with built in accessible practices for easy implementation that can craft the best experience for everyone, everywhere.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, imageURL, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <img src={imageURL} role="img" />
       </div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>
@@ -59,7 +47,7 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row">
+        <div className={`row ${styles.featureContainer}`}>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}

apps/docsite/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,9 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
   width: 100%;
 }
 
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
+.featureContainer{
+  justify-content: center;
+}

apps/docsite/src/css/custom.css

@@ -6,25 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-color-primary: #424242;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
   --ifm-color-primary-light: #33925d;
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --ifm-link-color: #115ea3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #d6d6d6;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --ifm-link-color: #115ea3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
+}

apps/docsite/src/pages/index.module.css

@@ -3,21 +3,36 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.buttons {
+.headerImageContainer{
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.headerImage{
+  width: 60%;
+}
+.bgGradient{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background:linear-gradient(90deg,rgba(255, 203, 231, 0.4),rgba(199, 199, 237, 0.4));
+  z-index:-1;
+}
+
+html[data-theme='dark'] .bgGradient{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background:none;
+    z-index:-1;
+}

apps/docsite/src/pages/index.tsx

@@ -1,44 +1,33 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
 
-import styles from './index.module.css';
-import sidebars from '@site/sidebars';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+import styles from "./index.module.css";
+import sidebars from "@site/sidebars";
+const HeaderBanner = ():JSX.Element => {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to={`/docs/${sidebars.tutorialSidebar[0]}`}>
-            Getting Started 🚈
-          </Link>
-        </div>
+    <>
+      <div className={`container ${styles.headerImageContainer}`}>
+        <img className={styles.headerImage} src={require("@site/static/img/img_header.png").default} />
       </div>
-    </header>
+    </>
   );
-}
-
+};
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
+    <>
+      <Layout
+        title={`${siteConfig.title}`}
+        description="FluentUI Charting Docsite"
+      >
+        <HeaderBanner/>
+        <main>
+          <HomepageFeatures />
+        </main>
+      </Layout>
+      <div className={styles.bgGradient}></div>
+    </>
   );
 }