Skip to content

Commit

Permalink
Docs update (grafana#171)
Browse files Browse the repository at this point in the history
* website - typewriter

* spice up
  • Loading branch information
yesoreyeram authored Oct 11, 2021
1 parent 456038c commit 12abd56
Show file tree
Hide file tree
Showing 8 changed files with 191 additions and 105 deletions.
3 changes: 2 additions & 1 deletion website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"showdown": "^1.9.1",
"tslib": "^2.3.1"
"tslib": "^2.3.1",
"typewriter-effect": "^2.18.2"
},
"devDependencies": {
"node-sass": "^6.0.1"
Expand Down
37 changes: 37 additions & 0 deletions website/src/components/Badges.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';

export const Badges = () => {
const badges = [
{
link: 'https://github.com/yesoreyeram/grafana-infinity-datasource/actions?query=workflow%3A%22Build+%26+Publish%22',
imgSrc: 'https://github.com/yesoreyeram/grafana-infinity-datasource/workflows/Build%20&%20Publish/badge.svg',
},
{
link: 'https://github.com/yesoreyeram/grafana-infinity-datasource/issues',
imgSrc: 'https://img.shields.io/github/issues/yesoreyeram/grafana-infinity-datasource',
},
{
link: 'https://github.com/yesoreyeram/grafana-infinity-datasource/blob/main/LICENSE',
imgSrc: 'https://img.shields.io/github/license/yesoreyeram/grafana-infinity-datasource',
},
{
link: 'http://makeapullrequest.com',
imgSrc: 'https://img.shields.io/badge/PRs-welcome-brightgreen.svg',
},
{
link: 'https://GitHub.com/yesoreyeram/grafana-infinity-datasource/graphs/commit-activity',
imgSrc: 'https://img.shields.io/badge/Maintained%3F-yes-green.svg',
},
];
return (
<p className="text-center my-4">
{badges.map((b) => {
return (
<a href={b.link} target="_blank" className="mx-2" rel="noreferrer">
<img src={b.imgSrc} />
</a>
);
})}
</p>
);
};
9 changes: 7 additions & 2 deletions website/src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,15 @@ export const Header = (props: HeaderProps) => {
</li>
</ul>
<ul className="navbar-nav d-flex mb-2 mb-lg-0">
<a className="nav-links special-menu highlight rounded text-white fw-bolder" href="https://grafana-infinity-datasource.herokuapp.com" target="_blank" rel="noreferrer">
<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"
>
Try online
</a>
<Link className="nav-links rounded text-white fw-bolder special-menu" to="/wiki/installation">
<Link className="nav-links rounded text-white special-menu" to="/wiki/installation">
Install
</Link>
</ul>
Expand Down
43 changes: 43 additions & 0 deletions website/src/components/Hero.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'gatsby';
import { TypeWriter } from './TypeWritter';

export const HeroSection = () => {
const [hasRan, setHasRan] = useState(false);
const [screenSize, setScreenSize] = useState({ height: 0, width: 0 });
useEffect(() => {
if (!hasRan) {
setHasRan(true);
updateScreenSize();
}
window.addEventListener('resize', updateScreenSize);
return () => window.removeEventListener('resize', updateScreenSize);
}, [screenSize, hasRan]);
const updateScreenSize = () => {
const width = window.innerWidth;
const height = window.innerHeight;
setScreenSize({ width, height });
};
return (
<div className="position-relative overflow-hidden mainbg" style={{ width: '100%', height: `${screenSize.height - 40}px` }}>
<div className="col-md-12 p-lg-5 mx-auto" style={{ marginTop: `${screenSize.height / 4}px` }}>
<h1 className="display-4 fw-bolder" id="banner-title">
Grafana Infinity data source
</h1>
<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>
<br />
<Link className="btn btn-primary" to="/getting-started">
Getting started
</Link>
<a className="btn btn-primary mx-4" href="https://grafana-infinity-datasource.herokuapp.com/d/try/try?orgId=1&editPanel=2" target="_blank" rel="noreferrer">
Try online
</a>
</div>
</div>
);
};
41 changes: 41 additions & 0 deletions website/src/components/TypeWritter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import Typewriter from 'typewriter-effect';
export const TypeWriter = () => {
return (
<>
<h3 style={{ color: 'whitesmoke' }}>
<Typewriter
options={{
autoStart: true,
loop: true,
}}
onInit={(typewriter) => {
typewriter
.pasteString('Spice up Grafana with data from ', this)
.typeString('CSV')
.pauseFor(1000)
.deleteChars(3)
.typeString('JSON')
.pauseFor(1000)
.deleteChars(4)
.typeString('GraphQL')
.pauseFor(1000)
.deleteChars(7)
.typeString('XML')
.pauseFor(1000)
.deleteChars(3)
.typeString('HTML')
.pauseFor(1000)
.deleteChars(4)
.typeString('beautiful series')
.pauseFor(1000)
.deleteChars(16)
.typeString('Infinity Datasource')
.pauseFor(5000)
.start();
}}
/>
</h3>
</>
);
};
89 changes: 7 additions & 82 deletions website/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import React, { useState, useEffect } from 'react';
import { Link, graphql } from 'gatsby';
import { graphql } from 'gatsby';
import { Layout } from '../components/Layout';
import { HeroSection } from '../components/Hero';
import { Badges } from '../components/Badges';
import { Features } from '../components/Features';

export interface HomeProps {
data: any;
}

export const pageQuery = graphql`
query {
site {
Expand All @@ -17,85 +15,12 @@ export const pageQuery = graphql`
}
`;

export default function Home({ data }: HomeProps) {
const [hasRan, setHasRan] = useState(false);
const [screenSize, setScreenSize] = useState({
height: 0,
width: 0,
});
const updateScreenSize = () => {
setScreenSize({ width: window.innerWidth, height: window.innerHeight });
};
useEffect(() => {
if (!hasRan) {
setHasRan(true);
updateScreenSize();
}
window.addEventListener('resize', updateScreenSize);
return () => {
window.removeEventListener('resize', updateScreenSize);
};
}, [screenSize, hasRan]);
export default function Home(props: { data: any }) {
return (
<Layout showSubMenu={false} title="">
<>
<div
className="position-relative overflow-hidden text-center mainbg"
style={{
width: '100%',
height: `${screenSize.height - 40}px`,
}}
>
<div
className="col-md-12 p-lg-5 mx-auto"
style={{
marginTop: `${screenSize.height / 4}px`,
}}
>
<h1 className="display-4 fw-bolder" id="banner-title">
Grafana Infinity Datasource
</h1>
<br />
<p className="fw-normal text-white">
<span className="fw-bold">Do infinite things with Grafana.</span>
<br />
<br />
<span style={{ color: '#ccc' }}>Visualize data from JSON, CSV, XML, GraphQL, HTML &amp; REST APIs. Also turns any website into grafana dashboard.</span>
</p>
<br />
<Link className="btn btn-primary text-black" style={{ backgroundImage: 'linear-gradient(#FADE2A,#F05A28)', color: 'black', border: 'none' }} to="/getting-started">
Getting started
</Link>
<a
className="btn btn-primary text-black mx-4"
style={{ backgroundImage: 'linear-gradient(#FADE2A,#F05A28)', color: 'black', border: 'none' }}
href="https://grafana-infinity-datasource.herokuapp.com"
target="_blank"
rel="noreferrer"
>
Try online
</a>
</div>
</div>
<Features />
<p className="text-center my-4">
<a href="https://github.com/yesoreyeram/grafana-infinity-datasource/actions?query=workflow%3A%22Build+%26+Publish%22" target="_blank" className="mx-2" rel="noreferrer">
<img src="https://github.com/yesoreyeram/grafana-infinity-datasource/workflows/Build%20&%20Publish/badge.svg" />
</a>
<a href="https://github.com/yesoreyeram/grafana-infinity-datasource/issues" target="_blank" className="mx-2" rel="noreferrer">
<img src="https://img.shields.io/github/issues/yesoreyeram/grafana-infinity-datasource" />
</a>
<a href="https://github.com/yesoreyeram/grafana-infinity-datasource/blob/main/LICENSE" target="_blank" className="mx-2" rel="noreferrer">
<img src="https://img.shields.io/github/license/yesoreyeram/grafana-infinity-datasource" alt="Grafana Infinity data source license" />
</a>
<a href="http://makeapullrequest.com" className="mx-2">
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs are welcome" />
</a>
<a href="https://GitHub.com/yesoreyeram/grafana-infinity-datasource/graphs/commit-activity" className="mx-2">
<img src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" alt="Grafana Infinity datasource is maintained" />
</a>
</p>
</>
<HeroSection />
<Features />
<Badges />
</Layout>
);
}
57 changes: 38 additions & 19 deletions website/src/styles/website.scss
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,8 @@ img[src*='#center'] {
}

/* subheader */
#banner-title,
#topnav .nav-link:hover {
background: linear-gradient(268deg, #fade2a, #f05a28);
background: linear-gradient(268deg, #00e5ea, #00e6ea98);
background-clip: text;
-webkit-background-clip: text;
background-size: 600% 600%;
Expand All @@ -156,20 +155,16 @@ img[src*='#center'] {
animation: SubHeader 4s ease infinite;
}
#banner-title {
background: linear-gradient(268deg, #00e5ea, #00e6eaa6);
background-clip: text;
-webkit-background-clip: text;
background-size: 600% 600%;
-webkit-animation: SubHeader 4s ease infinite;
-moz-animation: SubHeader 4s ease infinite;
animation: SubHeader 4s ease infinite;
color: transparent;
}
#topnav .special-menu {
padding: 5px 8px;
margin-inline-start: 5px;
text-decoration: none;
background: linear-gradient(200deg, #fade2a, #f05a28);
&.highlight {
background-size: 600% 600%;
-webkit-animation: SubHeader 2s ease infinite;
-moz-animation: SubHeader 2s ease infinite;
animation: SubHeader 2s ease infinite;
}
}

@-webkit-keyframes SubHeader {
0% {
background-position: 0% 50%;
Expand Down Expand Up @@ -263,11 +258,7 @@ code {
}

.mainbg {
background: linear-gradient(270deg, #b45d5b, #663360, #46275c, #181130);
background-size: 800% 800%;
-webkit-animation: mainbg-animation 8s ease infinite;
-moz-animation: mainbg-animation 8s ease infinite;
animation: mainbg-animation 8s ease infinite;
background-color: #111217;
}
@-webkit-keyframes mainbg-animation {
0% {
Expand Down Expand Up @@ -302,3 +293,31 @@ code {
background-position: 9% 0%;
}
}
.btn-primary {
background-color: #3d71d9 !important;
color: white !important;
}

#topnav .special-menu {
padding: 5px 8px;
margin-inline-start: 5px;
text-decoration: none;
// background: linear-gradient(200deg, #fade2a, #f05a28);
background-color: #3d71d9 !important;
color: white !important;
&.highlight {
background-size: 600% 600%;
-webkit-animation: SubHeader 2s ease infinite;
-moz-animation: SubHeader 2s ease infinite;
animation: SubHeader 2s ease infinite;
}
}

.nav-item {
.fab,
.fas {
&:hover {
color: #00e5ea !important;
}
}
}
17 changes: 16 additions & 1 deletion website/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -9985,7 +9985,7 @@ prompts@^2.3.2:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@^15.6.1, prop-types@^15.7.2:
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -10115,6 +10115,13 @@ quick-lru@^5.1.1:
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==

raf@^3.4.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
dependencies:
performance-now "^2.1.0"

randombytes@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
Expand Down Expand Up @@ -12218,6 +12225,14 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

typewriter-effect@^2.18.2:
version "2.18.2"
resolved "https://registry.yarnpkg.com/typewriter-effect/-/typewriter-effect-2.18.2.tgz#cc96af78869e35fda615fb866bcf09d5a4be8c17"
integrity sha512-I6VLfaICftFgZ3sauoVrvHmqzD2r1t+roopD6pyQ1EV4fmq3kZ4ssfLJk9mPd1VHdnwb9XxSnDH09QHNJ/HrXw==
dependencies:
prop-types "^15.6.2"
raf "^3.4.0"

unbox-primitive@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
Expand Down

0 comments on commit 12abd56

Please sign in to comment.