From 56d50737552b32a91864a6d3734859b5248488d5 Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 10 Jun 2021 15:24:39 +0200 Subject: [PATCH 1/4] replace svg componenents with img /w svg src --- packages/website/gatsby-config.js | 2 +- packages/website/package-lock.json | 239 ++---------------- packages/website/package.json | 2 +- .../website/src/components/Icons/index.js | 94 +++---- .../website/src/components/Layout/Section.js | 8 +- .../src/components/Navigation/Navigation.js | 6 +- packages/website/src/pages/index.js | 56 ++-- 7 files changed, 104 insertions(+), 303 deletions(-) diff --git a/packages/website/gatsby-config.js b/packages/website/gatsby-config.js index b5c484a8..c375a834 100644 --- a/packages/website/gatsby-config.js +++ b/packages/website/gatsby-config.js @@ -42,7 +42,7 @@ module.exports = { `gatsby-plugin-react-helmet`, `gatsby-plugin-image`, `gatsby-plugin-sharp`, - `gatsby-plugin-react-svg`, + `gatsby-plugin-svgr`, `gatsby-plugin-robots-txt`, `gatsby-transformer-sharp`, `gatsby-transformer-json`, diff --git a/packages/website/package-lock.json b/packages/website/package-lock.json index 95012c4e..5219dffb 100644 --- a/packages/website/package-lock.json +++ b/packages/website/package-lock.json @@ -28,9 +28,9 @@ "gatsby-plugin-postcss": "^4.6.0", "gatsby-plugin-purgecss": "^6.0.2", "gatsby-plugin-react-helmet": "^4.6.0", - "gatsby-plugin-react-svg": "^3.0.0", "gatsby-plugin-robots-txt": "^1.6.2", "gatsby-plugin-sharp": "^3.6.0", + "gatsby-plugin-svgr": "^3.0.0-beta.0", "gatsby-remark-classes": "^1.0.0", "gatsby-remark-copy-linked-files": "^4.3.0", "gatsby-remark-images": "^5.3.0", @@ -7012,17 +7012,6 @@ "node": ">=8" } }, - "node_modules/css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dependencies": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - } - }, "node_modules/css-color-names": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz", @@ -7293,14 +7282,6 @@ "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" }, - "node_modules/css/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -11876,17 +11857,6 @@ "react-helmet": "^5.1.3 || ^6.0.0" } }, - "node_modules/gatsby-plugin-react-svg": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.0.1.tgz", - "integrity": "sha512-bjVSCAOeRWmf5a96/BL81sHITGFV/2Ql+IwP3ET5O5BZYOpt0f7QVCspkvCj0hsy4BJgCgANpzFstuaxUNsojA==", - "dependencies": { - "svg-react-loader": "^0.4.4" - }, - "peerDependencies": { - "gatsby": "^3.0.0 || ^2.0.0" - } - }, "node_modules/gatsby-plugin-robots-txt": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/gatsby-plugin-robots-txt/-/gatsby-plugin-robots-txt-1.6.2.tgz", @@ -12131,6 +12101,15 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/gatsby-plugin-svgr": { + "version": "3.0.0-beta.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-svgr/-/gatsby-plugin-svgr-3.0.0-beta.0.tgz", + "integrity": "sha512-oALTh6VwO6l3khgC/vGr706aqt38EkXwdr6iXVei/auOKGxpCLEuDCQVal1a4SpYXdjHjRsEyab6bxaHL2lzsA==", + "peerDependencies": { + "@svgr/webpack": ">=2.0.0", + "gatsby": ">=3.0.0" + } + }, "node_modules/gatsby-plugin-typescript": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-3.6.0.tgz", @@ -13992,7 +13971,7 @@ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "engines": { - "node": ">=4" + "node": ">=8" } }, "node_modules/has-symbol-support-x": { @@ -23075,11 +23054,6 @@ "queue-microtask": "^1.2.2" } }, - "node_modules/rx": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", - "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=" - }, "node_modules/rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -24330,11 +24304,6 @@ "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" }, - "bin": { - "sshpk-conv": "bin/sshpk-conv", - "sshpk-sign": "bin/sshpk-sign", - "sshpk-verify": "bin/sshpk-verify" - }, "engines": { "node": ">=0.10.0" } @@ -24938,7 +24907,7 @@ "has-flag": "^3.0.0" }, "engines": { - "node": ">=4" + "node": ">=10" } }, "node_modules/svg-parser": { @@ -24946,81 +24915,6 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, - "node_modules/svg-react-loader": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz", - "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==", - "dependencies": { - "css": "2.2.4", - "loader-utils": "1.1.0", - "ramda": "0.21.0", - "rx": "4.1.0", - "traverse": "0.6.6", - "xml2js": "0.4.17" - } - }, - "node_modules/svg-react-loader/node_modules/big.js": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", - "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==", - "engines": { - "node": "*" - } - }, - "node_modules/svg-react-loader/node_modules/emojis-list": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/svg-react-loader/node_modules/json5": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", - "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", - "bin": { - "json5": "lib/cli.js" - } - }, - "node_modules/svg-react-loader/node_modules/loader-utils": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", - "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", - "dependencies": { - "big.js": "^3.1.3", - "emojis-list": "^2.0.0", - "json5": "^0.5.0" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/svg-react-loader/node_modules/ramda": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz", - "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=" - }, - "node_modules/svg-react-loader/node_modules/xml2js": { - "version": "0.4.17", - "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", - "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=", - "dependencies": { - "sax": ">=0.6.0", - "xmlbuilder": "^4.1.0" - } - }, - "node_modules/svg-react-loader/node_modules/xmlbuilder": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz", - "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=", - "dependencies": { - "lodash": "^4.0.0" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -25858,11 +25752,6 @@ "node": ">=0.8" } }, - "node_modules/traverse": { - "version": "0.6.6", - "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", - "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" - }, "node_modules/trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", @@ -33978,24 +33867,6 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" }, - "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "requires": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } - } - }, "css-color-names": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz", @@ -37875,14 +37746,6 @@ "@babel/runtime": "^7.12.5" } }, - "gatsby-plugin-react-svg": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.0.1.tgz", - "integrity": "sha512-bjVSCAOeRWmf5a96/BL81sHITGFV/2Ql+IwP3ET5O5BZYOpt0f7QVCspkvCj0hsy4BJgCgANpzFstuaxUNsojA==", - "requires": { - "svg-react-loader": "^0.4.4" - } - }, "gatsby-plugin-robots-txt": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/gatsby-plugin-robots-txt/-/gatsby-plugin-robots-txt-1.6.2.tgz", @@ -38063,6 +37926,12 @@ } } }, + "gatsby-plugin-svgr": { + "version": "3.0.0-beta.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-svgr/-/gatsby-plugin-svgr-3.0.0-beta.0.tgz", + "integrity": "sha512-oALTh6VwO6l3khgC/vGr706aqt38EkXwdr6iXVei/auOKGxpCLEuDCQVal1a4SpYXdjHjRsEyab6bxaHL2lzsA==", + "requires": {} + }, "gatsby-plugin-typescript": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-3.6.0.tgz", @@ -46224,11 +46093,6 @@ "queue-microtask": "^1.2.2" } }, - "rx": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", - "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=" - }, "rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -47732,68 +47596,6 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, - "svg-react-loader": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz", - "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==", - "requires": { - "css": "2.2.4", - "loader-utils": "1.1.0", - "ramda": "0.21.0", - "rx": "4.1.0", - "traverse": "0.6.6", - "xml2js": "0.4.17" - }, - "dependencies": { - "big.js": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", - "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==" - }, - "emojis-list": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" - }, - "json5": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", - "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=" - }, - "loader-utils": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", - "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", - "requires": { - "big.js": "^3.1.3", - "emojis-list": "^2.0.0", - "json5": "^0.5.0" - } - }, - "ramda": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz", - "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=" - }, - "xml2js": { - "version": "0.4.17", - "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", - "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=", - "requires": { - "sax": ">=0.6.0", - "xmlbuilder": "^4.1.0" - } - }, - "xmlbuilder": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz", - "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=", - "requires": { - "lodash": "^4.0.0" - } - } - } - }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -48455,11 +48257,6 @@ "punycode": "^2.1.1" } }, - "traverse": { - "version": "0.6.6", - "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", - "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" - }, "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", diff --git a/packages/website/package.json b/packages/website/package.json index 23a469e8..11424dcc 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -25,9 +25,9 @@ "gatsby-plugin-postcss": "^4.6.0", "gatsby-plugin-purgecss": "^6.0.2", "gatsby-plugin-react-helmet": "^4.6.0", - "gatsby-plugin-react-svg": "^3.0.0", "gatsby-plugin-robots-txt": "^1.6.2", "gatsby-plugin-sharp": "^3.6.0", + "gatsby-plugin-svgr": "^3.0.0-beta.0", "gatsby-remark-classes": "^1.0.0", "gatsby-remark-copy-linked-files": "^4.3.0", "gatsby-remark-images": "^5.3.0", diff --git a/packages/website/src/components/Icons/index.js b/packages/website/src/components/Icons/index.js index a168d81f..c2181d6a 100644 --- a/packages/website/src/components/Icons/index.js +++ b/packages/website/src/components/Icons/index.js @@ -1,47 +1,47 @@ -export { default as Add } from "./Add.svg"; -export { default as ArrowRight } from "./ArrowRight.svg"; -export { default as ArrowUpCircle } from "./ArrowUpCircle.svg"; -export { default as CheckActive } from "./CheckActive.svg"; -export { default as CheckCircle } from "./CheckCircle.svg"; -export { default as Cloud } from "./Cloud.svg"; -export { default as Cogs } from "./Cogs.svg"; -export { default as ComputerScreen } from "./ComputerScreen.svg"; -export { default as DataSwap } from "./DataSwap.svg"; -export { default as DevBig } from "./DevBig.svg"; -export { default as DiscordSmall } from "./DiscordSmall.svg"; -export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg"; -export { default as Encryption } from "./Encryption.svg"; -export { default as Error } from "./Error.svg"; -export { default as ExternalLink } from "./ExternalLink.svg"; -export { default as FacebookSmall } from "./FacebookSmall.svg"; -export { default as Fingerprint } from "./Fingerprint.svg"; -export { default as GithubSmall } from "./GithubSmall.svg"; -export { default as GitlabSmall } from "./GitlabSmall.svg"; -export { default as Info } from "./Info.svg"; -export { default as Join } from "./Join.svg"; -export { default as Layers } from "./Layers.svg"; -export { default as LinkedinSmall } from "./LinkedinSmall.svg"; -export { default as LogoBlackText } from "./LogoBlackText.svg"; -export { default as LogoWhiteText } from "./LogoWhiteText.svg"; -export { default as MediumSmall } from "./MediumSmall.svg"; -export { default as MenuMobile } from "./MenuMobile.svg"; -export { default as MenuMobileClose } from "./MenuMobileClose.svg"; -export { default as Mesh } from "./Mesh.svg"; -export { default as ProgressRound } from "./ProgressRound.svg"; -export { default as RedditSmall } from "./RedditSmall.svg"; -export { default as Shield } from "./Shield.svg"; -export { default as SkynetMonetizationSmall } from "./SkynetMonetizationSmall.svg"; -export { default as SkynetPersistenceSmall } from "./SkynetPersistenceSmall.svg"; -export { default as SkynetPowerBig } from "./SkynetPowerBig.svg"; -export { default as SkynetSiaSmall } from "./SkynetSiaSmall.svg"; -export { default as SkynetSpeedSmall } from "./SkynetSpeedSmall.svg"; -export { default as SkynetToolBig } from "./SkynetToolBig.svg"; -export { default as SkynetUsageSmall } from "./SkynetUsageSmall.svg"; -export { default as SkynetUserBig } from "./SkynetUserBig.svg"; -export { default as TikTokSmall } from "./TikTokSmall.svg"; -export { default as Toolkit } from "./Toolkit.svg"; -export { default as TwitterSmall } from "./TwitterSmall.svg"; -export { default as Unlock } from "./Unlock.svg"; -export { default as UserArrows } from "./UserArrows.svg"; -export { default as UserAtom } from "./UserAtom.svg"; -export { default as YoutubeSmall } from "./YoutubeSmall.svg"; +export { ReactComponent as Add } from "./Add.svg"; +export { ReactComponent as ArrowRight } from "./ArrowRight.svg"; +export { ReactComponent as ArrowUpCircle } from "./ArrowUpCircle.svg"; +export { ReactComponent as CheckActive } from "./CheckActive.svg"; +export { ReactComponent as CheckCircle } from "./CheckCircle.svg"; +export { ReactComponent as Cloud } from "./Cloud.svg"; +export { ReactComponent as Cogs } from "./Cogs.svg"; +export { ReactComponent as ComputerScreen } from "./ComputerScreen.svg"; +export { ReactComponent as DataSwap } from "./DataSwap.svg"; +export { ReactComponent as DevBig } from "./DevBig.svg"; +export { ReactComponent as DiscordSmall } from "./DiscordSmall.svg"; +export { ReactComponent as DiscordSmallWhite } from "./DiscordSmallWhite.svg"; +export { ReactComponent as Encryption } from "./Encryption.svg"; +export { ReactComponent as Error } from "./Error.svg"; +export { ReactComponent as ExternalLink } from "./ExternalLink.svg"; +export { ReactComponent as FacebookSmall } from "./FacebookSmall.svg"; +export { ReactComponent as Fingerprint } from "./Fingerprint.svg"; +export { ReactComponent as GithubSmall } from "./GithubSmall.svg"; +export { ReactComponent as GitlabSmall } from "./GitlabSmall.svg"; +export { ReactComponent as Info } from "./Info.svg"; +export { ReactComponent as Join } from "./Join.svg"; +export { ReactComponent as Layers } from "./Layers.svg"; +export { ReactComponent as LinkedinSmall } from "./LinkedinSmall.svg"; +export { ReactComponent as LogoBlackText } from "./LogoBlackText.svg"; +export { ReactComponent as LogoWhiteText } from "./LogoWhiteText.svg"; +export { ReactComponent as MediumSmall } from "./MediumSmall.svg"; +export { ReactComponent as MenuMobile } from "./MenuMobile.svg"; +export { ReactComponent as MenuMobileClose } from "./MenuMobileClose.svg"; +export { ReactComponent as Mesh } from "./Mesh.svg"; +export { ReactComponent as ProgressRound } from "./ProgressRound.svg"; +export { ReactComponent as RedditSmall } from "./RedditSmall.svg"; +export { ReactComponent as Shield } from "./Shield.svg"; +export { ReactComponent as SkynetMonetizationSmall } from "./SkynetMonetizationSmall.svg"; +export { ReactComponent as SkynetPersistenceSmall } from "./SkynetPersistenceSmall.svg"; +export { ReactComponent as SkynetPowerBig } from "./SkynetPowerBig.svg"; +export { ReactComponent as SkynetSiaSmall } from "./SkynetSiaSmall.svg"; +export { ReactComponent as SkynetSpeedSmall } from "./SkynetSpeedSmall.svg"; +export { ReactComponent as SkynetToolBig } from "./SkynetToolBig.svg"; +export { ReactComponent as SkynetUsageSmall } from "./SkynetUsageSmall.svg"; +export { ReactComponent as SkynetUserBig } from "./SkynetUserBig.svg"; +export { ReactComponent as TikTokSmall } from "./TikTokSmall.svg"; +export { ReactComponent as Toolkit } from "./Toolkit.svg"; +export { ReactComponent as TwitterSmall } from "./TwitterSmall.svg"; +export { ReactComponent as Unlock } from "./Unlock.svg"; +export { ReactComponent as UserArrows } from "./UserArrows.svg"; +export { ReactComponent as UserAtom } from "./UserAtom.svg"; +export { ReactComponent as YoutubeSmall } from "./YoutubeSmall.svg"; diff --git a/packages/website/src/components/Layout/Section.js b/packages/website/src/components/Layout/Section.js index e75fbbc9..b22cd518 100644 --- a/packages/website/src/components/Layout/Section.js +++ b/packages/website/src/components/Layout/Section.js @@ -93,9 +93,9 @@ export const CardCarousel = ({ CardComponent, cards, interval = null, fullWidth ); }; -export const CardWithTitle = ({ Icon, title }) => ( +export const CardWithTitle = ({ Icon, src, alt, title }) => (
- + {src ? {alt} : }

); @@ -108,10 +108,10 @@ export const Label = ({ children }) => ( ); -export const CardWithDescription = ({ Icon, label, title, text }) => ( +export const CardWithDescription = ({ Icon, src, alt, label, title, text }) => (
- + {src ? {alt} : } {label && }

{title}

diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js index c15c9523..f4e077b5 100644 --- a/packages/website/src/components/Navigation/Navigation.js +++ b/packages/website/src/components/Navigation/Navigation.js @@ -3,11 +3,7 @@ import PropTypes from "prop-types"; import Link from "../Link"; import classnames from "classnames"; import useAuthenticatedStatus from "../../services/useAuthenticatedStatus"; -import LogoWhiteText from "../Icons/LogoWhiteText.svg"; -import LogoBlackText from "../Icons/LogoBlackText.svg"; -import MenuMobile from "../Icons/MenuMobile.svg"; -import MenuMobileClose from "../Icons/MenuMobileClose.svg"; -import DiscordSmall from "../Icons/DiscordSmall.svg"; +import {LogoWhiteText, LogoBlackText, MenuMobile, MenuMobileClose, DiscordSmall} from "../Icons"; import { useWindowSize, useWindowScroll } from "react-use"; const routes = [ diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index 30c69728..4417a21f 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -4,59 +4,65 @@ import { Carousel } from "../components/Carousel/Carousel"; import Seo from "../components/seo"; import CommunitySection from "../components/CommunitySection"; import Uploader from "../components/Uploader"; -import { - ArrowRight, - SkynetToolBig, - SkynetUserBig, - SkynetPowerBig, - SkynetMonetizationSmall, - SkynetPersistenceSmall, - SkynetSpeedSmall, - SkynetUsageSmall, - SkynetSiaSmall, -} from "../components/Icons"; +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 = [ { - Icon: SkynetToolBig, + src: SkynetToolBig, title: "Build a better web", + alt: "The top of a wrench and a cube representing a new kind of Internet", }, { - Icon: SkynetUserBig, + src: SkynetUserBig, title: "Fight corporate control
of user data", + alt: "Symbol of a strong person stretching arms out of screen", }, { - Icon: SkynetPowerBig, + src: SkynetPowerBig, title: "Empower global citizens", + alt: "Symbol of a fist in the air", }, ]; const ecosystemCards = [ { - Icon: SkynetUsageSmall, + 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", }, { - Icon: SkynetSpeedSmall, + 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", }, { - Icon: SkynetSiaSmall, + 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", }, { - Icon: SkynetMonetizationSmall, + 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", }, { - Icon: SkynetPersistenceSmall, + 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", }, ]; @@ -74,11 +80,13 @@ const IndexPage = () => {

- Skynet is a content and application hosting platform bringing - decentralized storage to users, creators and app developers. + + Skynet is a hosting platform that makes it easy to join the decentralized + + internet movement. Start your free account today. - Skynet is a content and application hosting platform bringing decentralized storage to users, creators and - app developers. + Skynet is a hosting platform that makes it easy to join the decentralized internet movement. Start your + free account today.

@@ -105,7 +113,7 @@ const IndexPage = () => {

Skynet apps pave the way for a new web that prioritizes the privacy, security, and experience of users. Join - our decentralized ecosystem and revolution. + our decentralized internet ecosystem and revolution.

Date: Thu, 10 Jun 2021 16:03:59 +0200 Subject: [PATCH 2/4] 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; From 36d281af70110da99de71affcbb5dfedc0c1f047 Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 10 Jun 2021 16:05:07 +0200 Subject: [PATCH 3/4] fix prettier formatting --- packages/website/src/components/Navigation/Navigation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js index f4e077b5..26375aec 100644 --- a/packages/website/src/components/Navigation/Navigation.js +++ b/packages/website/src/components/Navigation/Navigation.js @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import Link from "../Link"; import classnames from "classnames"; import useAuthenticatedStatus from "../../services/useAuthenticatedStatus"; -import {LogoWhiteText, LogoBlackText, MenuMobile, MenuMobileClose, DiscordSmall} from "../Icons"; +import { LogoWhiteText, LogoBlackText, MenuMobile, MenuMobileClose, DiscordSmall } from "../Icons"; import { useWindowSize, useWindowScroll } from "react-use"; const routes = [ From 317e601aed75497edeae85690ebcc4c728d5f84f Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 10 Jun 2021 16:17:14 +0200 Subject: [PATCH 4/4] hide sign up cta when authenticated --- packages/website/src/components/Uploader/Uploader.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js index dadd1c64..8e6343ce 100644 --- a/packages/website/src/components/Uploader/Uploader.js +++ b/packages/website/src/components/Uploader/Uploader.js @@ -10,6 +10,7 @@ import { useDropzone } from "react-dropzone"; import { SkynetClient } from "skynet-js"; import { useTimeoutFn } from "react-use"; import ms from "ms"; +import useAuthenticatedStatus from "../../services/useAuthenticatedStatus"; import Link from "../Link"; const getFilePath = (file) => file.webkitRelativePath || file.path || file.name; @@ -147,6 +148,9 @@ const Uploader = () => { const [mode, setMode] = React.useState("file"); const [files, setFiles] = React.useState([]); + const { data: authenticationStatus } = useAuthenticatedStatus(); + const authenticated = authenticationStatus?.authenticated ?? false; + const handleDrop = async (acceptedFiles) => { if (mode === "directory" && acceptedFiles.length) { const rootDir = getRootDirectory(acceptedFiles[0]); // get the file path from the first file @@ -307,7 +311,7 @@ const Uploader = () => { )}
- {files.length === 0 && ( + {files.length === 0 && !authenticated && (