diff --git a/website/package.json b/website/package.json index 6508a6a3..2dac7ccb 100644 --- a/website/package.json +++ b/website/package.json @@ -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" diff --git a/website/src/components/Badges.tsx b/website/src/components/Badges.tsx new file mode 100644 index 00000000..1db9b7a8 --- /dev/null +++ b/website/src/components/Badges.tsx @@ -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 ( +

+ {badges.map((b) => { + return ( + + + + ); + })} +

+ ); +}; diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx index 4ab5f3ea..095bfe82 100644 --- a/website/src/components/Header.tsx +++ b/website/src/components/Header.tsx @@ -70,10 +70,15 @@ export const Header = (props: HeaderProps) => { diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx new file mode 100644 index 00000000..ffe3c173 --- /dev/null +++ b/website/src/components/Hero.tsx @@ -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 ( +
+
+

+ Grafana Infinity data source +

+
+ +
+

+ Visualize data from JSON, CSV, XML, GraphQL, HTML & REST APIs. Also turns any website into grafana dashboard. +

+
+ + Getting started + + + Try online + +
+
+ ); +}; diff --git a/website/src/components/TypeWritter.tsx b/website/src/components/TypeWritter.tsx new file mode 100644 index 00000000..5b7b36d0 --- /dev/null +++ b/website/src/components/TypeWritter.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import Typewriter from 'typewriter-effect'; +export const TypeWriter = () => { + return ( + <> +

+ { + 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(); + }} + /> +

+ + ); +}; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 1c8ae534..0cc1d9db 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -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 { @@ -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 ( - <> -
-
-

- Grafana Infinity Datasource -

-
-

- Do infinite things with Grafana. -
-
- Visualize data from JSON, CSV, XML, GraphQL, HTML & REST APIs. Also turns any website into grafana dashboard. -

-
- - Getting started - - - Try online - -
-
- -

- - - - - - - - Grafana Infinity data source license - - - PRs are welcome - - - Grafana Infinity datasource is maintained - -

- + + + ); } diff --git a/website/src/styles/website.scss b/website/src/styles/website.scss index 88ee013b..28076f70 100644 --- a/website/src/styles/website.scss +++ b/website/src/styles/website.scss @@ -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%; @@ -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%; @@ -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% { @@ -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; + } + } +} diff --git a/website/yarn.lock b/website/yarn.lock index d90306dd..48b92e9b 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -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== @@ -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" @@ -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"