Skip to content

Commit

Permalink
Docs website update (#216)
Browse files Browse the repository at this point in the history 
* themes implementation

* home page update

* scss update

* scss update
  • Loading branch information
@yesoreyeram
yesoreyeram authored Dec 18, 2021
1 parent 7f2512e commit 6cbc73d
Show file tree
Hide file tree
Showing 10 changed files with 1,027 additions and 793 deletions.
6 changes: 5 additions & 1 deletion website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
114 changes: 23 additions & 91 deletions website/src/components/Features.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
59 changes: 34 additions & 25 deletions website/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { Link } from 'gatsby';
import { ThemeSwitcher } from './ThemeSwitcher';

interface ListLinkProps {
to: string;
Expand All @@ -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">
Expand All @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions website/src/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 1 addition & 10 deletions website/src/components/SubHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/SubMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 24 additions & 0 deletions website/src/components/ThemeSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
2 changes: 1 addition & 1 deletion website/src/components/TypeWritter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Typewriter from 'typewriter-effect';
export const TypeWriter = () => {
return (
<>
<h3 style={{ color: 'whitesmoke' }}>
<h3 className="typewriter">
<Typewriter
options={{
autoStart: true,
Expand Down
Loading

1 comment on commit 6cbc73d

@vercel
Copy link

@vercel vercel bot commented on 6cbc73d Dec 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.