From 3437e76fcc927f1fc9b414ce56d192bfcb68b72e Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 10 Jun 2021 16:03:59 +0200 Subject: [PATCH] move index page cards to yaml data layer --- .../assets/decentralized-internet-skynet.svg | 31 ++++++ .../assets/decentralized-storage-benefits.svg | 26 +++++ .../decentralized-storage-without-wallet.svg | 30 +++++ .../assets/empower-global-citizens-skynet.svg | 35 ++++++ .../assets/fight-corporate-control-skynet.svg | 37 +++++++ .../index/assets/monetization-skynet.svg | 34 ++++++ .../skynet-decentralized-storage-speed.svg | 27 +++++ .../index/assets/skynet-storage-free-use.svg | 25 +++++ .../website/data/pages/index/pages-index.yml | 31 ++++++ packages/website/src/pages/index.js | 103 ++++++++---------- 10 files changed, 320 insertions(+), 59 deletions(-) create mode 100644 packages/website/data/pages/index/assets/decentralized-internet-skynet.svg create mode 100644 packages/website/data/pages/index/assets/decentralized-storage-benefits.svg create mode 100644 packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg create mode 100644 packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg create mode 100644 packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg create mode 100644 packages/website/data/pages/index/assets/monetization-skynet.svg create mode 100644 packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg create mode 100644 packages/website/data/pages/index/assets/skynet-storage-free-use.svg create mode 100644 packages/website/data/pages/index/pages-index.yml diff --git a/packages/website/data/pages/index/assets/decentralized-internet-skynet.svg b/packages/website/data/pages/index/assets/decentralized-internet-skynet.svg new file mode 100644 index 00000000..f321824b --- /dev/null +++ b/packages/website/data/pages/index/assets/decentralized-internet-skynet.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/decentralized-storage-benefits.svg b/packages/website/data/pages/index/assets/decentralized-storage-benefits.svg new file mode 100644 index 00000000..38a689d6 --- /dev/null +++ b/packages/website/data/pages/index/assets/decentralized-storage-benefits.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg b/packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg new file mode 100644 index 00000000..495ffe01 --- /dev/null +++ b/packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg b/packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg new file mode 100644 index 00000000..a23cf13b --- /dev/null +++ b/packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg b/packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg new file mode 100644 index 00000000..64323f3f --- /dev/null +++ b/packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/monetization-skynet.svg b/packages/website/data/pages/index/assets/monetization-skynet.svg new file mode 100644 index 00000000..81a4cf37 --- /dev/null +++ b/packages/website/data/pages/index/assets/monetization-skynet.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg b/packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg new file mode 100644 index 00000000..74fd3cfa --- /dev/null +++ b/packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/assets/skynet-storage-free-use.svg b/packages/website/data/pages/index/assets/skynet-storage-free-use.svg new file mode 100644 index 00000000..5b109ea8 --- /dev/null +++ b/packages/website/data/pages/index/assets/skynet-storage-free-use.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/data/pages/index/pages-index.yml b/packages/website/data/pages/index/pages-index.yml new file mode 100644 index 00000000..91bc353c --- /dev/null +++ b/packages/website/data/pages/index/pages-index.yml @@ -0,0 +1,31 @@ +- etosCards: + - title: Build a better web + src: ./assets/decentralized-internet-skynet.svg + alt: The top of a wrench and a cube representing a new kind of Internet + - title: Fight corporate control
of user data + src: ./assets/fight-corporate-control-skynet.svg + alt: Symbol of a strong person stretching arms out of screen + - title: Empower global citizens + src: ./assets/empower-global-citizens-skynet.svg + alt: Symbol of a fist in the air +- ecosystemCards: + - title: Easy to use + src: ./assets/decentralized-storage-without-wallet.svg + alt: Image of a finger pushing a button + text: Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps. + - title: Fast + src: ./assets/skynet-decentralized-storage-speed.svg + alt: Image of a speedometer + text: Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps! + - title: Free to use + src: ./assets/skynet-storage-free-use.svg + alt: Image of a server database and a shield + text: Focus on building, not overhead server costs. When users own their data, developers aren't asked to pay for it. + - title: Monetization + src: ./assets/monetization-skynet.svg + alt: Image of a coin symbol + text: Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers. + - title: Persistence + src: ./assets/decentralized-storage-benefits.svg + alt: Abstract image of a shield and a graph line + text: Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down. diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index 4417a21f..08b3f812 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -1,72 +1,31 @@ import * as React from "react"; +import { graphql } from "gatsby"; import { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout"; import { Carousel } from "../components/Carousel/Carousel"; import Seo from "../components/seo"; import CommunitySection from "../components/CommunitySection"; import Uploader from "../components/Uploader"; import { ArrowRight } from "../components/Icons"; -import SkynetToolBig from "../components/Icons/SkynetToolBig.svg"; -import SkynetUserBig from "../components/Icons/SkynetUserBig.svg"; -import SkynetPowerBig from "../components/Icons/SkynetPowerBig.svg"; -import SkynetMonetizationSmall from "../components/Icons/SkynetMonetizationSmall.svg"; -import SkynetPersistenceSmall from "../components/Icons/SkynetPersistenceSmall.svg"; -import SkynetSpeedSmall from "../components/Icons/SkynetSpeedSmall.svg"; -import SkynetUsageSmall from "../components/Icons/SkynetUsageSmall.svg"; -import SkynetSiaSmall from "../components/Icons/SkynetSiaSmall.svg"; import Link from "../components/Link"; -const etosCards = [ - { - src: SkynetToolBig, - title: "Build a better web", - alt: "The top of a wrench and a cube representing a new kind of Internet", - }, - { - src: SkynetUserBig, - title: "Fight corporate control
of user data", - alt: "Symbol of a strong person stretching arms out of screen", - }, - { - src: SkynetPowerBig, - title: "Empower global citizens", - alt: "Symbol of a fist in the air", - }, -]; +const IndexPage = ({ data }) => { + const etosCards = React.useMemo( + () => + data.allPagesIndexYaml.edges[0].node.etosCards.map((card) => ({ + ...card, + src: card.src.publicURL, + })), + [data] + ); + const ecosystemCards = React.useMemo( + () => + data.allPagesIndexYaml.edges[1].node.ecosystemCards.map((card) => ({ + ...card, + src: card.src.publicURL, + })), + [data] + ); -const ecosystemCards = [ - { - src: SkynetUsageSmall, - title: "Easy to use", - text: "Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps.", - alt: "Image of a finger pushing a button", - }, - { - src: SkynetSpeedSmall, - title: "Fast", - text: "Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!", - alt: "Image of a speedometer", - }, - { - src: SkynetSiaSmall, - title: "Free to use", - text: "Focus on building, not overhead server costs. When users own their data, developers aren't asked to pay for it.", - alt: "Image of a server database and a shield", - }, - { - src: SkynetMonetizationSmall, - title: "Monetization", - text: "Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.", - alt: "Image of a coin symbol", - }, - { - src: SkynetPersistenceSmall, - title: "Persistence", - text: "Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down.", - alt: "Abstract image of a shield and a graph line", - }, -]; - -const IndexPage = () => { return ( <> @@ -166,4 +125,30 @@ const IndexPage = () => { ); }; +export const query = graphql` + query MainPageQuery { + allPagesIndexYaml { + edges { + node { + etosCards { + title + alt + src { + publicURL + } + } + ecosystemCards { + title + alt + text + src { + publicURL + } + } + } + } + } + } +`; + export default IndexPage;