Website update

website/package.json

@@ -13,25 +13,29 @@
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@popperjs/core": "^2.9.2",
+    "@stitches/react": "^1.2.6",
     "bootstrap": "^5.0.0",
-    "gatsby": "^3.4.0",
+    "gatsby": "^4.4.0",
     "gatsby-plugin-mdx": "^2.5.0",
     "gatsby-plugin-postcss": "^4.4.0",
     "gatsby-plugin-react-helmet": "^4.4.0",
     "gatsby-plugin-sass": "^4.5.0",
     "gatsby-plugin-sharp": "^3.5.0",
     "gatsby-remark-highlight-code": "^2.2.1",
     "gatsby-source-filesystem": "^3.4.0",
+    "gatsby-theme-stitches": "^1.0.0",
     "gatsby-transformer-remark": "^4.2.0",
     "gatsby-transformer-sharp": "^3.13.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-slideshow-image": "^3.6.0",
     "showdown": "^1.9.1",
     "tslib": "^2.3.1",
     "typewriter-effect": "^2.18.2"
   },
   "devDependencies": {
+    "@types/react-helmet": "^6.1.4",
     "node-sass": "^6.0.1"
   }
 }

website/src/components/Features.tsx

@@ -1,132 +1,64 @@
 import React from 'react';
-import { Link, navigate, useStaticQuery, graphql } from 'gatsby';
+import { Link, navigate } from 'gatsby';
 
 export const Features = () => {
-  const data = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            wallpaper
-          }
-        }
-      }
-    `
-  );
-  const patternImage = data.site.siteMetadata.wallpaper;
   return (
-    <div className="container my-4">
+    <div className="container my-4" id="features-section" style={{ zIndex: 200 }}>
       <div className="row">
         <div className="col-sm-6 col-lg-6 mb-4">
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '20%',
-              backgroundPositionX: '0%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               JSON
             </Link>
-            <p className="text-white">Visualize data from any JSON APIs or URLs</p>
+            <p>Visualize data from any JSON APIs or URLs</p>
           </div>
         </div>
         <div className="col-sm-6 col-lg-6 mb-4" onClick={() => navigate('/wiki/csv')}>
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '90%',
-              backgroundPositionX: '30%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               CSV
             </Link>
-            <p className="text-white">Visualize data from any CSV APIs, or URLs</p>
+            <p>Visualize data from any CSV APIs, or URLs</p>
           </div>
         </div>
         <div className="col-sm-6 col-lg-4 mb-4" onClick={() => navigate('/wiki/graphql')}>
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '10%',
-              backgroundPositionX: '10%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               GraphQL
             </Link>
-            <p className="text-white">Visualize data from any GraphQL APIs or URLs.</p>
+            <p>Visualize data from any GraphQL APIs or URLs.</p>
           </div>
         </div>
         <div className="col-sm-6 col-lg-4 mb-4" onClick={() => navigate('/wiki/html')}>
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '5%',
-              backgroundPositionX: '10%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               HTML
             </Link>
-            <p className="text-white">Visualize data from any HTML pages or URLs.</p>
+            <p>Visualize data from any HTML pages or URLs.</p>
           </div>
         </div>
         <div className="col-sm-6 col-lg-4 mb-4" onClick={() => navigate('/wiki/xml')}>
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '80%',
-              backgroundPositionX: '20%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               XML
             </Link>
-            <p className="text-white">Visualize data from any XML APIs or URLs.</p>
+            <p>Visualize data from any XML APIs or URLs.</p>
           </div>
         </div>
         <div className="col-sm-6 col-lg-4 mb-4" onClick={() => navigate('/wiki/series')}>
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '30%',
-              backgroundPositionX: '10%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               Math Series
             </Link>
-            <p className="text-white">Generate series from mathematical definitions.</p>
+            <p>Generate series from mathematical definitions.</p>
           </div>
         </div>
         <div className="col-sm-6 col-lg-8 mb-4" onClick={() => navigate('/wiki/template-variables')}>
-          <div
-            className="card p-3 text-center feature-card"
-            style={{
-              backgroundPosition: 'cover',
-              backgroundPositionY: '50%',
-              backgroundPositionX: '70%',
-              backgroundImage: `url(${patternImage})`,
-            }}
-          >
-            <Link className="display-6 text-white" to="/wiki/json" style={{ textDecoration: 'none' }}>
+          <div className="card p-3 text-center">
+            <Link className="display-6" to="/wiki/json" style={{ textDecoration: 'none' }}>
               Utility variables
             </Link>
-            <p className="text-white">Create custom variables from utility functions</p>
+            <p>Create custom variables from utility functions</p>
           </div>
         </div>
       </div>

website/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby';
+import { ThemeSwitcher } from './ThemeSwitcher';
 
 interface ListLinkProps {
   to: string;
@@ -25,9 +26,9 @@ export const Header = (props: HeaderProps) => {
   };
   return (
     <>
-      <nav id="topnav" className="navbar navbar-expand-lg fixed-top navbar-dark" style={{ backgroundColor: '#141619' }} aria-label="Main navigation">
+      <nav id="topnav" className="navbar navbar-expand-lg fixed-top navbar-dark" aria-label="Main navigation">
         <div className="container-fluid">
-          <Link className="text-white fw-bold px-2" to="/" style={{ textDecoration: 'none' }}>
+          <Link id="brand" className="fw-bold px-2" to="/">
             {props.title}
           </Link>
           <button className="navbar-toggler p-0 border-0" type="button" onClick={onToggle} aria-label="Toggle navigation">
@@ -45,40 +46,48 @@ export const Header = (props: HeaderProps) => {
             </ul>
             <ul className="navbar-nav d-flex mb-2 mb-lg-0">
               <li className="nav-item">
-                <a className="nav-link" href="https://github.com/yesoreyeram/grafana-infinity-datasource/issues/new/choose" target="_blank" rel="noreferrer">
-                  <i className="fas fa-bug text-secondary"></i>
-                  <span className="px-2 small-screen-only">Report Bug</span>
-                </a>
+                <span className="nav-link">
+                  <ThemeSwitcher />
+                </span>
               </li>
               <li className="nav-item">
-                <a className="nav-link" href="https://github.com/yesoreyeram/grafana-infinity-datasource" target="_blank" rel="noreferrer">
-                  <i className="fab fa-github text-secondary"></i>
-                  <span className="px-2 small-screen-only">Github</span>
-                </a>
+                <button>
+                  <a className="nav-link" href="https://github.com/yesoreyeram/grafana-infinity-datasource/issues/new/choose" target="_blank" rel="noreferrer">
+                    <i className="fas fa-bug" title="Report Bug"></i>
+                    <span className="px-2 small-screen-only">Report Bug</span>
+                  </a>
+                </button>
               </li>
               <li className="nav-item">
-                <a href="https://www.youtube.com/playlist?list=PL4vVKeEREln5ub1qrSMrwAabU0FiSNtmC" className="nav-link" target="_blank" rel="noreferrer">
-                  <i className="fab fa-youtube text-secondary"></i>
-                  <span className="px-2 small-screen-only">Youtube</span>
-                </a>
+                <button>
+                  <a className="nav-link" href="https://github.com/yesoreyeram/grafana-infinity-datasource" target="_blank" rel="noreferrer">
+                    <i className="fab fa-github" title="Github repo"></i>
+                    <span className="px-2 small-screen-only">Github</span>
+                  </a>
+                </button>
               </li>
               <li className="nav-item">
-                <a className="nav-link" href="https://twitter.com/grafanaInfinity" target="_blank" rel="noreferrer">
-                  <i className="fab fa-twitter text-secondary"></i>
-                  <span className="px-2 small-screen-only">Follow</span>
-                </a>
+                <button>
+                  <a href="https://www.youtube.com/playlist?list=PL4vVKeEREln5ub1qrSMrwAabU0FiSNtmC" className="nav-link" target="_blank" rel="noreferrer">
+                    <i className="fab fa-youtube" title="Youtube videos"></i>
+                    <span className="px-2 small-screen-only">Youtube</span>
+                  </a>
+                </button>
+              </li>
+              <li className="nav-item">
+                <button>
+                  <a className="nav-link" href="https://twitter.com/grafanaInfinity" target="_blank" rel="noreferrer">
+                    <i className="fab fa-twitter" title="Updates in twitter"></i>
+                    <span className="px-2 small-screen-only">Follow</span>
+                  </a>
+                </button>
               </li>
             </ul>
             <ul className="navbar-nav d-flex mb-2 mb-lg-0">
-              <a
-                className="nav-links special-menu rounded text-white btn-primary"
-                href="https://grafana-infinity-datasource.herokuapp.com/d/try/try?orgId=1&editPanel=2"
-                target="_blank"
-                rel="noreferrer"
-              >
+              <a className="nav-links rounded special-menu" href="https://grafana-infinity-datasource.herokuapp.com/d/try/try?orgId=1&editPanel=2" target="_blank" rel="noreferrer">
                 Try online
               </a>
-              <Link className="nav-links rounded text-white special-menu" to="/wiki/installation">
+              <Link className="nav-links rounded special-menu" to="/wiki/installation">
                 Install
               </Link>
             </ul>

website/src/components/Hero.tsx

@@ -27,9 +27,7 @@ export const HeroSection = () => {
         <br />
         <TypeWriter />
         <br />
-        <p className="fw-normal text-white">
-          <span style={{ color: '#ccc' }}>Visualize data from JSON, CSV, XML, GraphQL, HTML &amp; REST APIs. Also turns any website into grafana dashboard.</span>
-        </p>
+        <p className="fw-normal">Visualize data from JSON, CSV, XML, GraphQL, HTML &amp; REST APIs. Also turns any website into grafana dashboard.</p>
         <br />
         <Link className="btn btn-primary" to="/getting-started">
           Getting started

website/src/components/SubHeader.tsx

@@ -19,16 +19,7 @@ export const SubHeader = (props: SubHeaderProps) => {
     `
   );
   return (
-    <section
-      className="subheader py-5 text-center"
-      style={{
-        backgroundColor: '#021E40',
-        color: 'white',
-        backgroundPositionX: '80%',
-        backgroundPositionY: '20%',
-        backgroundImage: `url(${data.site.siteMetadata.wallpaper})`,
-      }}
-    >
+    <section id="subheader" className="subheader py-5 text-center">
       <h1>{props.title}</h1>
     </section>
   );

website/src/components/SubMenu.tsx

@@ -17,7 +17,7 @@ const SubMenuLink = (props: SubMenuLinkProps) => {
 export const SubMenu = () => {
   return (
     <>
-      <div className="nav-scroller shadow-sm" style={{ backgroundColor: '#021936' }}>
+      <div className="nav-scroller shadow-sm">
         <nav id="subnav" className="nav nav-underline d-flex" aria-label="Secondary navigation">
           <span className="ml-4"></span>
           <SubMenuLink to="/wiki/json">JSON</SubMenuLink>

website/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+export const ThemeSwitcher = () => {
+  useEffect(() => {
+    document.getElementsByTagName('html')[0].classList.add('dark-theme');
+    document.getElementsByTagName('html')[0].setAttribute('style', 'color-scheme : dark;');
+  }, []);
+  return (
+    <a onClick={() => {}}>
+      <button>
+        <i
+          className="fas fa-palette"
+          onClick={() => {
+            let isLightTheme = document.getElementsByTagName('html')[0].classList.contains('light-theme');
+            document.getElementsByTagName('html')[0].classList.toggle('light-theme');
+            document.getElementsByTagName('html')[0].classList.toggle('dark-theme');
+            document.getElementsByTagName('html')[0].setAttribute('style', `color-scheme : ${isLightTheme ? 'dark' : 'light'};`);
+          }}
+        ></i>
+      </button>
+      <span className="px-2 small-screen-only">Switch Theme</span>
+    </a>
+  );
+};

website/src/components/TypeWritter.tsx

@@ -3,7 +3,7 @@ import Typewriter from 'typewriter-effect';
 export const TypeWriter = () => {
   return (
     <>
-      <h3 style={{ color: 'whitesmoke' }}>
+      <h3 className="typewriter">
         <Typewriter
           options={{
             autoStart: true,