From 5d712ad1236f204f44342edd98da3ec572dcd4f0 Mon Sep 17 00:00:00 2001 From: JE Boska <67412874+je-boska@users.noreply.github.com> Date: Tue, 6 Sep 2022 09:37:24 +0200 Subject: [PATCH] Feature/unbounded typeface (#3745) * Change fonts to Inter/Unbounded, adjust breakpoints and fix visual bugs * Adjust footer spacing * Adjust spacing around Social column * Remove padding from custom breakpoints class * Set variable font weight limits, make footer nav headings Unbounded * Adjust font weights of headings * fix formatting * update format lint Co-authored-by: rmnprkrl --- .editorconfig | 6 +- .prettierrc.json | 3 +- polkadot-wiki/docusaurus.config.js | 148 ++++---- polkadot-wiki/sidebars.js | 319 +++++++++--------- polkadot-wiki/src/pages/index.js | 129 ++++--- polkadot-wiki/src/theme/Footer.js | 150 ++++---- polkadot-wiki/static/css/custom.css | 140 +++++--- .../static/fonts/Unbounded-Variable.woff2 | Bin 0 -> 214960 bytes 8 files changed, 487 insertions(+), 408 deletions(-) create mode 100644 polkadot-wiki/static/fonts/Unbounded-Variable.woff2 diff --git a/.editorconfig b/.editorconfig index b3fc4f8263db..26febcfbfd5a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,5 +1,7 @@ # Matches multiple files with brace expansion notation [*.{js,jsx,html,sass}] charset = utf-8 -indent_style = tab -indent_size = 4 \ No newline at end of file +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.prettierrc.json b/.prettierrc.json index 703cbdc8f298..0cf1091a9a5d 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,8 +1,7 @@ { "trailingComma": "es5", - "tabWidth": 2, "semi": true, - "singleQuote": true, + "singleQuote": false, "printWidth": 100, "proseWrap": "always" } diff --git a/polkadot-wiki/docusaurus.config.js b/polkadot-wiki/docusaurus.config.js index a70beb912e67..9aca9f45446a 100644 --- a/polkadot-wiki/docusaurus.config.js +++ b/polkadot-wiki/docusaurus.config.js @@ -1,88 +1,88 @@ -const { baseUrlPattern } = require('../scripts/utils'); -const { injectPlugin } = require('../scripts/injectPlugin'); -const i18n = require('./i18n'); +const { baseUrlPattern } = require("../scripts/utils"); +const { injectPlugin } = require("../scripts/injectPlugin"); +const i18n = require("./i18n"); -const isBuilding = process.env.BUILDING === 'true'; -const isPublishing = process.env.PUBLISHING === 'true'; +const isBuilding = process.env.BUILDING === "true"; +const isPublishing = process.env.PUBLISHING === "true"; module.exports = { - title: 'Polkadot Wiki', - tagline: 'The hub for those interested in learning, building, or running a node on Polkadot.', - titleDelimiter: '·', - url: 'https://wiki.polkadot.network', - baseUrl: '/', - projectName: 'polkadot-wiki', - organizationName: 'w3f', + title: "Polkadot Wiki", + tagline: "The hub for those interested in learning, building, or running a node on Polkadot.", + titleDelimiter: "·", + url: "https://wiki.polkadot.network", + baseUrl: "/", + projectName: "polkadot-wiki", + organizationName: "w3f", scripts: [ - 'https://buttons.github.io/buttons.js', - 'https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js', - 'https://unpkg.com/aos@next/dist/aos.js', + "https://buttons.github.io/buttons.js", + "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js", + "https://unpkg.com/aos@next/dist/aos.js", { - src: 'https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js', - onload: 'addBackToTop()', + src: "https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js", + onload: "addBackToTop()", defer: true, }, - { + { src: "https://apisa.web3.foundation/latest.js", async: true, defer: true, }, - '../js/custom.js', - '../js/clipboard.min.js', - '../js/copycode.js', + "../js/custom.js", + "../js/clipboard.min.js", + "../js/copycode.js", ], stylesheets: [ - 'https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css', - 'https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap', - 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', - 'https://unpkg.com/aos@next/dist/aos.css', - 'https://fonts.googleapis.com/icon?family=Material+Icons', + "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css", + "https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap", + "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", + "https://unpkg.com/aos@next/dist/aos.css", + "https://fonts.googleapis.com/icon?family=Material+Icons", ], i18n, - favicon: 'img/Polkadot_Favicon.png', + favicon: "img/Polkadot_Favicon.png", trailingSlash: false, - onBrokenLinks: 'log', - onBrokenMarkdownLinks: 'log', - onDuplicateRoutes: 'log', + onBrokenLinks: "log", + onBrokenMarkdownLinks: "log", + onDuplicateRoutes: "log", presets: [ [ - '@docusaurus/preset-classic', + "@docusaurus/preset-classic", { docs: { editUrl: ({ docPath }) => `https://github.com/w3f/polkadot-wiki/edit/master/docs/${docPath}`, - path: '../docs', + path: "../docs", showLastUpdateAuthor: true, showLastUpdateTime: true, - sidebarPath: require.resolve('./sidebars.js'), - routeBasePath: 'docs', + sidebarPath: require.resolve("./sidebars.js"), + routeBasePath: "docs", remarkPlugins: [injectPlugin({ isPolkadot: true })], }, theme: { customCss: [ - require.resolve('./static/css/custom.css'), - require.resolve('./static/css/copycode.css'), - require.resolve('./static/css/socicon.css'), + require.resolve("./static/css/custom.css"), + require.resolve("./static/css/copycode.css"), + require.resolve("./static/css/socicon.css"), ], }, }, ], ], plugins: [ - 'remark-docusaurus-tabs', + "remark-docusaurus-tabs", [ - '@docusaurus/plugin-client-redirects', + "@docusaurus/plugin-client-redirects", { redirects: [ { - to: '/', + to: "/", - from: ['/en/latest', '/en/'], + from: ["/en/latest", "/en/"], }, ], createRedirects: function (existingPath) { - if (existingPath.startsWith('/docs/')) { - return [existingPath.replace('/docs/', '/docs/en/')]; + if (existingPath.startsWith("/docs/")) { + return [existingPath.replace("/docs/", "/docs/en/")]; } }, }, @@ -93,7 +93,7 @@ module.exports = { disableSwitch: true, }, prism: { - theme: require('prism-react-renderer/themes/github'), + theme: require("prism-react-renderer/themes/github"), }, /* announcementBar: { @@ -109,54 +109,54 @@ module.exports = { * The position of the live playground, above or under the editor * Possible values: "top" | "bottom" */ - playgroundPosition: 'bottom', + playgroundPosition: "bottom", }, navbar: { logo: { - src: 'img/Polkadot_Logo_Horizontal_Pink-Black.svg', + src: "img/Polkadot_Logo_Horizontal_Pink-Black.svg", }, items: [ { - to: 'docs/getting-started', - label: 'Get Started', - position: 'right', + to: "docs/getting-started", + label: "Get Started", + position: "right", }, { - to: 'docs/learn-launch', - label: 'Learn', - position: 'right', + to: "docs/learn-launch", + label: "Learn", + position: "right", }, { - to: 'docs/build-index', - label: 'Build', - position: 'right', + to: "docs/build-index", + label: "Build", + position: "right", }, { - to: 'docs/maintain-index', - label: 'Maintain ', - position: 'right', + to: "docs/maintain-index", + label: "Maintain ", + position: "right", }, { - href: 'https://guide.kusama.network', - label: 'Kusama', - position: 'right', + href: "https://guide.kusama.network", + label: "Kusama", + position: "right", }, { - type: 'search', - position: 'right', + type: "search", + position: "right", }, { - to: 'docs/contributing', - label: 'Contribute', - position: 'right', + to: "docs/contributing", + label: "Contribute", + position: "right", }, { - type: 'localeDropdown', - position: 'right', + type: "localeDropdown", + position: "right", dropdownItemsAfter: [ { - to: 'https://crowdin.com/project/polkadot-wiki', - label: 'Help us translate', + to: "https://crowdin.com/project/polkadot-wiki", + label: "Help us translate", }, ], }, @@ -165,13 +165,13 @@ module.exports = { footer: { copyright: `© ${new Date().getFullYear()} Web3 Foundation`, logo: { - src: 'img/Polkadot_Logo_Horizontal_White.svg', + src: "img/Polkadot_Logo_Horizontal_White.svg", }, }, algolia: { - appId: 'BEUYRRAUZN', - apiKey: 'e472cf1f938eb8c46dd952ff22332538', - indexName: 'polkadot', + appId: "BEUYRRAUZN", + apiKey: "e472cf1f938eb8c46dd952ff22332538", + indexName: "polkadot", contextualSearch: true, }, docsSideNavCollapsible: true, diff --git a/polkadot-wiki/sidebars.js b/polkadot-wiki/sidebars.js index f622d16a6635..a53475ea31b7 100644 --- a/polkadot-wiki/sidebars.js +++ b/polkadot-wiki/sidebars.js @@ -1,248 +1,245 @@ module.exports = { docs: [ { - type: 'category', - label: 'General', + type: "category", + label: "General", items: [ - 'general/getting-started', - 'general/claims', - 'general/redenomination', - 'general/grants', - 'general/ambassadors', - 'general/research', - 'general/community', - 'general/contributing', - 'general/contributors', - 'general/glossary', - 'general/ens', - 'general/ledger', - 'general/scams', - 'general/how-to-dyor', - 'general/doc-thousand-validators', - 'general/faq', + "general/getting-started", + "general/claims", + "general/redenomination", + "general/grants", + "general/ambassadors", + "general/research", + "general/community", + "general/contributing", + "general/contributors", + "general/glossary", + "general/ens", + "general/ledger", + "general/scams", + "general/how-to-dyor", + "general/doc-thousand-validators", + "general/faq", { - type: 'category', - label: 'Programmes', + type: "category", + label: "Programmes", items: [ - 'general/grants', - 'maintain/maintain-bug-bounty', - 'general/builders-program', - 'general/doc-thousand-validators', - 'general/doc-thousand-contributors', + "general/grants", + "maintain/maintain-bug-bounty", + "general/builders-program", + "general/doc-thousand-validators", + "general/doc-thousand-contributors", ], }, ], }, { - type: 'category', - label: 'Learn', + type: "category", + label: "Learn", items: [ { - type: 'category', - label: 'Basics', + type: "category", + label: "Basics", items: [ { - type: 'category', - label: 'Accounts', + type: "category", + label: "Accounts", items: [ - 'learn/learn-accounts', - 'learn/learn-account-generation', - 'learn/learn-account-restore', - 'learn/learn-balance-transfers', + "learn/learn-accounts", + "learn/learn-account-generation", + "learn/learn-account-restore", + "learn/learn-balance-transfers", ], }, { - type: 'category', - label: 'Tokens and Assets', + type: "category", + label: "Tokens and Assets", items: [ - 'learn/learn-assets', - 'learn/learn-DOT', - 'learn/learn-nft', - 'learn/learn-statemint', - 'learn/learn-teleport', + "learn/learn-assets", + "learn/learn-DOT", + "learn/learn-nft", + "learn/learn-statemint", + "learn/learn-teleport", ], }, { - type: 'category', - label: 'Components', + type: "category", + label: "Components", items: [ - 'learn/learn-architecture', - 'learn/learn-collator', - 'learn/learn-consensus', - 'learn/learn-governance', - 'learn/learn-identity', - 'learn/learn-security', - 'learn/learn-nominator', - 'learn/learn-polkadot-host', - 'learn/learn-polkadotjs', - 'learn/learn-registrar', - 'learn/learn-runtime-upgrades', - 'learn/learn-transaction-fees', - 'learn/learn-treasury', - 'learn/learn-validator', + "learn/learn-architecture", + "learn/learn-collator", + "learn/learn-consensus", + "learn/learn-governance", + "learn/learn-identity", + "learn/learn-security", + "learn/learn-nominator", + "learn/learn-polkadot-host", + "learn/learn-polkadotjs", + "learn/learn-registrar", + "learn/learn-runtime-upgrades", + "learn/learn-transaction-fees", + "learn/learn-treasury", + "learn/learn-validator", ], }, { - type: 'category', - label: 'Staking', + type: "category", + label: "Staking", items: [ - 'learn/learn-staking', - 'learn/learn-staking-faq', - 'learn/learn-nomination-pools', + "learn/learn-staking", + "learn/learn-staking-faq", + "learn/learn-nomination-pools", ], }, ], }, { - type: 'category', - label: 'Advanced', + type: "category", + label: "Advanced", items: [ - 'learn/learn-availability', - 'learn/learn-cross-consensus', - 'learn/learn-phragmen', - 'learn/learn-proxies', - 'learn/learn-randomness', - 'learn/learn-simple-payouts', - 'learn/learn-spree', - 'learn/learn-staking-miner', - 'learn/learn-wasm', + "learn/learn-availability", + "learn/learn-cross-consensus", + "learn/learn-phragmen", + "learn/learn-proxies", + "learn/learn-randomness", + "learn/learn-simple-payouts", + "learn/learn-spree", + "learn/learn-staking-miner", + "learn/learn-wasm", ], }, { - type: 'category', - label: 'Cryptography', - items: ['learn/learn-cryptography', 'learn/learn-keys'], + type: "category", + label: "Cryptography", + items: ["learn/learn-cryptography", "learn/learn-keys"], }, { - type: 'category', - label: 'Paraobjects', + type: "category", + label: "Paraobjects", items: [ { - type: 'category', - label: 'Parachains', + type: "category", + label: "Parachains", items: [ - 'learn/learn-parachains', - 'learn/learn-common-goods', - 'learn/learn-auction', - 'learn/learn-crowdloans', - 'learn/learn-teleport', + "learn/learn-parachains", + "learn/learn-common-goods", + "learn/learn-auction", + "learn/learn-crowdloans", + "learn/learn-teleport", ], }, - 'learn/learn-parathreads', - 'learn/learn-bridges', + "learn/learn-parathreads", + "learn/learn-bridges", ], }, { - type: 'category', - label: 'Polkadot Comparisons', + type: "category", + label: "Polkadot Comparisons", items: [ - 'learn/learn-kusama-vs-polkadot', - 'learn/learn-comparisons', - 'learn/learn-comparisons-ethereum-2', - 'learn/learn-comparisons-cosmos', + "learn/learn-kusama-vs-polkadot", + "learn/learn-comparisons", + "learn/learn-comparisons-ethereum-2", + "learn/learn-comparisons-cosmos", ], }, - 'learn/learn-launch', - 'learn/learn-video-tutorials', + "learn/learn-launch", + "learn/learn-video-tutorials", ], }, { - type: 'category', - label: 'Build', + type: "category", + label: "Build", items: [ - 'build/build-index', + "build/build-index", { - type: 'category', - label: 'Development Guide', + type: "category", + label: "Development Guide", items: [ - 'build/build-guide', - 'build/build-parachains', - 'build/build-storage', - 'build/build-smart-contracts', - 'build/build-oracle', - 'build/build-data', - 'build/build-wallets', - 'build/build-substrate', - 'build/build-ss58-registry', - 'build/build-hrmp-channels', + "build/build-guide", + "build/build-parachains", + "build/build-storage", + "build/build-smart-contracts", + "build/build-oracle", + "build/build-data", + "build/build-wallets", + "build/build-substrate", + "build/build-ss58-registry", + "build/build-hrmp-channels", ], }, { - type: 'category', - label: 'Integration Guide', + type: "category", + label: "Integration Guide", items: [ - 'build/build-integration', - 'build/build-protocol-info', - 'build/build-integrate-assets', - 'build/build-node-management', - 'build/build-node-interaction', - 'build/build-transaction-construction', + "build/build-integration", + "build/build-protocol-info", + "build/build-integrate-assets", + "build/build-node-management", + "build/build-node-interaction", + "build/build-transaction-construction", ], }, { - type: 'category', - label: 'Tools', - items: [ - 'build/build-tools-index', - 'build/build-open-source' - ], + type: "category", + label: "Tools", + items: ["build/build-tools-index", "build/build-open-source"], }, { - type: 'category', - label: 'Resources', - items: ['build/build-hackathon'], + type: "category", + label: "Resources", + items: ["build/build-hackathon"], }, ], }, { - type: 'category', - label: 'Maintain', + type: "category", + label: "Maintain", items: [ - 'maintain/maintain-index', - 'maintain/maintain-polkadot-parameters', - 'maintain/maintain-endpoints', + "maintain/maintain-index", + "maintain/maintain-polkadot-parameters", + "maintain/maintain-endpoints", { - type: 'category', - label: 'Nodes and Dapps', + type: "category", + label: "Nodes and Dapps", items: [ - 'maintain/maintain-sync', - 'maintain/maintain-networks', - 'maintain/maintain-wss', - 'maintain/maintain-errors', + "maintain/maintain-sync", + "maintain/maintain-networks", + "maintain/maintain-wss", + "maintain/maintain-errors", ], }, { - type: 'category', - label: 'Nominator Guides', + type: "category", + label: "Nominator Guides", items: [ - 'maintain/maintain-guides-how-to-nominate-polkadot', - 'maintain/maintain-guides-how-to-unbond', + "maintain/maintain-guides-how-to-nominate-polkadot", + "maintain/maintain-guides-how-to-unbond", ], }, { - type: 'category', - label: 'Validator Guides', + type: "category", + label: "Validator Guides", items: [ - 'maintain/maintain-guides-how-to-validate-polkadot', - 'maintain/maintain-guides-validator-payout', - 'maintain/maintain-guides-how-to-systemd', - 'maintain/maintain-guides-secure-validator', - 'maintain/maintain-guides-how-to-use-polkadot-validator-setup', - 'maintain/maintain-guides-how-to-setup-a-validator-with-reverse-proxy', - 'maintain/maintain-guides-how-to-upgrade', - 'maintain/maintain-guides-how-to-monitor-your-node', - 'maintain/maintain-guides-how-to-chill', - 'maintain/maintain-guides-how-to-stop-validating', - 'maintain/doc-maintain-guides-validator-community', + "maintain/maintain-guides-how-to-validate-polkadot", + "maintain/maintain-guides-validator-payout", + "maintain/maintain-guides-how-to-systemd", + "maintain/maintain-guides-secure-validator", + "maintain/maintain-guides-how-to-use-polkadot-validator-setup", + "maintain/maintain-guides-how-to-setup-a-validator-with-reverse-proxy", + "maintain/maintain-guides-how-to-upgrade", + "maintain/maintain-guides-how-to-monitor-your-node", + "maintain/maintain-guides-how-to-chill", + "maintain/maintain-guides-how-to-stop-validating", + "maintain/doc-maintain-guides-validator-community", ], }, { - type: 'category', - label: 'Governance Guides', + type: "category", + label: "Governance Guides", items: [ - 'maintain/maintain-guides-democracy', - 'maintain/maintain-guides-how-to-join-council', - 'maintain/maintain-guides-how-to-vote-councillor', + "maintain/maintain-guides-democracy", + "maintain/maintain-guides-how-to-join-council", + "maintain/maintain-guides-how-to-vote-councillor", ], }, ], diff --git a/polkadot-wiki/src/pages/index.js b/polkadot-wiki/src/pages/index.js index da91af8d4900..ac0e01a9372a 100644 --- a/polkadot-wiki/src/pages/index.js +++ b/polkadot-wiki/src/pages/index.js @@ -27,83 +27,80 @@ function HomeNav() { const NavItem = ({ href, aosDelay, children }) => ( - +
{children}
 ); const NavItemTitle = ({ children }) => ( -

- {children} -

+

{children}

); - const NavItemContent = ({ children }) => ( -

{children}

- ); + const NavItemContent = ({ children }) =>
{children}
; return ( - - - Learn - - - - Polkadot is a sharded protocol that enables blockchain networks to - operate together seamlessly. - + + + Learn + + +

+ + Polkadot is a sharded protocol that enables blockchain networks to operate together + seamlessly. + +

- - - Build - - - - Most up-to-date information on the status of the development tools - in the Polkadot ecosystem. - + + + Build + + +

+ + Most up-to-date information on the status of the development tools in the Polkadot + ecosystem. + +

- - - Maintain - - - - Information and guides on how to deploy a node and run the network. - + + + Maintain + + +

+ + Information and guides on how to deploy a node and run the network. + +

@@ -145,7 +142,7 @@ function Banner() { function HomeFooter() { const FooterContainer = ({ children }) => (
- + {children}
@@ -154,7 +151,7 @@ function HomeFooter() { const LearnKusama = () => ( -

+

- Kusama is Polkadot’s “canary network”, a scalable, multi-chain network - for radical innovation and early stage Polkadot deployments. For - developers, Kusama is a proving ground for all things Polkadot I.e - runtime upgrades, on-chain governance, parachains, parathreads, etc. + Kusama is Polkadot’s “canary network”, a scalable, multi-chain network for radical + innovation and early stage Polkadot deployments. For developers, Kusama is a proving + ground for all things Polkadot I.e runtime upgrades, on-chain governance, parachains, + parathreads, etc.

@@ -193,7 +190,7 @@ function HomeFooter() { language -

+

- This wiki was started by and is maintained by Web3 Foundation. It is - an open-source-ish project and aims to be the most extensive resource - of knowledge on Polkadot and the Polkadot ecosystem. + This wiki was started by and is maintained by Web3 Foundation. It is an open-source-ish + project and aims to be the most extensive resource of knowledge on Polkadot and the + Polkadot ecosystem.

diff --git a/polkadot-wiki/src/theme/Footer.js b/polkadot-wiki/src/theme/Footer.js index 0fa3a976a459..4426539d8a3c 100644 --- a/polkadot-wiki/src/theme/Footer.js +++ b/polkadot-wiki/src/theme/Footer.js @@ -11,8 +11,8 @@ import Logo from "@site/static/img/Polkadot_Logo_Horizontal_White.svg"; function FooterNavColumn({ headline, children }) { return ( - -
{headline}
+ +
{headline}
    {children}
); @@ -21,7 +21,7 @@ function FooterNavColumn({ headline, children }) { function FooterSocialColumn() { const SocialItem = ({ href, className }) => { return ( -
  • +
  • @@ -30,37 +30,22 @@ function FooterSocialColumn() { }; const Social = () => ( -