diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..f743457 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,8 @@ +>0.5% +not dead +not op_mini all + +[development] +last 1 chrome version +last 1 firefox version +last 1 safari version diff --git a/.github/workflows/pull_request_checks.yml b/.github/workflows/pull_request_checks.yml index e2366a0..67f8b49 100644 --- a/.github/workflows/pull_request_checks.yml +++ b/.github/workflows/pull_request_checks.yml @@ -18,12 +18,24 @@ jobs: uses: ./.github/actions/use-dependencies ## - # lint, build documentation, build package and test + # validate pr title, lint, build and test ## + validate_pr_title: + name: "Validate PR Title" + needs: install + runs-on: ubuntu-latest + steps: + - name: "šŸ›Ž Checkout" + uses: actions/checkout@v4 + - name: "šŸ”§ Setup" + uses: ./.github/actions/use-dependencies + - name: "āœ… Validate" + run: echo "${{ github.event.pull_request.title }}" | yarn commitlint + lint: name: "Lint" - needs: install + needs: [install, validate_pr_title] runs-on: ubuntu-latest steps: - name: "šŸ›Ž Checkout" @@ -35,7 +47,7 @@ jobs: build: name: "Build" - needs: install + needs: [install, validate_pr_title] runs-on: ubuntu-latest steps: - name: "šŸ›Ž Checkout" @@ -47,7 +59,7 @@ jobs: test: name: "Test" - needs: install + needs: [install, validate_pr_title] runs-on: ubuntu-latest steps: - name: "šŸ›Ž Checkout" diff --git a/blog/2023-12-21-introducing-kibisis/index.mdx b/blog/2023-12-21-introducing-kibisis/index.mdx index 11c5fa4..47ff835 100644 --- a/blog/2023-12-21-introducing-kibisis/index.mdx +++ b/blog/2023-12-21-introducing-kibisis/index.mdx @@ -13,8 +13,8 @@ import BlogScreenshotImage from '@site/src/components/BlogScreenshotImage'; import { CHROME_STORE_LINK } from '@site/src/constants'; -import sendAssetsDarkImage from '@site/static/images/send_assets_screen-dark.png'; -import sendAssetsLightImage from '@site/static/images/send_assets_screen-light.png'; +import sendAssetsDarkImage from './send_assets_screen-dark.png'; +import sendAssetsLightImage from './send_assets_screen-light.png'; import switchNetworksDarkImage from './switch_networks-dark.png'; import switchNetworksLightImage from './switch_networks-light.png'; import viewAssetsDarkImage from './view_assets-dark.png'; @@ -26,6 +26,8 @@ import viewAssetsLightImage from './view_assets-light.png'; We are thrilled to announce the official release of Kibisis, the cutting-edge AVM wallet, now available on the Chrome Store! Packed with a host of powerful features, Kibisis redefines the way you manage your AVM accounts. Let's dive into the exciting features that make Kibisis your go-to wallet for a secure and user-friendly AVM experience. + + ### Create or Import AVM Accounts with Ease Kibisis simplifies the onboarding process by allowing you to effortlessly create new AVM accounts or import existing ones. Whether you're a seasoned blockchain enthusiast or a newcomer to the AVM space, Kibisis ensures a user-friendly experience from the get-go. diff --git a/static/images/send_assets_screen-dark.png b/blog/2023-12-21-introducing-kibisis/send_assets_screen-dark.png similarity index 100% rename from static/images/send_assets_screen-dark.png rename to blog/2023-12-21-introducing-kibisis/send_assets_screen-dark.png diff --git a/static/images/send_assets_screen-light.png b/blog/2023-12-21-introducing-kibisis/send_assets_screen-light.png similarity index 100% rename from static/images/send_assets_screen-light.png rename to blog/2023-12-21-introducing-kibisis/send_assets_screen-light.png diff --git a/static/images/arc0200_support_screen-dark.png b/blog/2023-12-27-1-8-0-new-release/arc0200_support_screen-dark.png similarity index 100% rename from static/images/arc0200_support_screen-dark.png rename to blog/2023-12-27-1-8-0-new-release/arc0200_support_screen-dark.png diff --git a/static/images/arc0200_support_screen-light.png b/blog/2023-12-27-1-8-0-new-release/arc0200_support_screen-light.png similarity index 100% rename from static/images/arc0200_support_screen-light.png rename to blog/2023-12-27-1-8-0-new-release/arc0200_support_screen-light.png diff --git a/blog/2023-12-27-1-8-0-new-release/index.mdx b/blog/2023-12-27-1-8-0-new-release/index.mdx index 6e47475..5192019 100644 --- a/blog/2023-12-27-1-8-0-new-release/index.mdx +++ b/blog/2023-12-27-1-8-0-new-release/index.mdx @@ -13,8 +13,8 @@ import BlogScreenshotImage from '@site/src/components/BlogScreenshotImage'; import { AGORA_LABS_LINK, REPORT_A_BUG_LINK, SUGGEST_A_FEATURE_LINK } from '@site/src/constants'; -import addARC0200AssetDarkImage from '@site/static/images/arc0200_support_screen-dark.png'; -import addARC0200AssetLightImage from '@site/static/images/arc0200_support_screen-light.png'; +import addARC0200AssetDarkImage from './arc0200_support_screen-dark.png'; +import addARC0200AssetLightImage from './arc0200_support_screen-light.png'; import arc0200SupportDarkImage from './arc200_support-dark.png'; import arc0200SupportLightImage from './arc200_support-light.png'; @@ -28,6 +28,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.8.0! First and foremost, a Merry Christmas šŸŽ„ from the team here at Agora Labs! The new version of Kibisis, version 1.8.0, is all about supporting ARC-200 tokens, the sexy new type of AVM assets. But that's not all, we have also brought in Standard Asset opt-ins as well as various fixes that squash some annoying bugs. + + Below you will find more details about what is new in this release. diff --git a/blog/2024-01-03-1-9-0-new-release/index.mdx b/blog/2024-01-03-1-9-0-new-release/index.mdx index da68efa..d630eac 100644 --- a/blog/2024-01-03-1-9-0-new-release/index.mdx +++ b/blog/2024-01-03-1-9-0-new-release/index.mdx @@ -30,6 +30,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.9.0! As we enter the new year, we have but a humble update as version 1.9.0 is all about the little things. We have been working on improving some quality of life features that may not be big or bold, but do pack a punch; because we all know it is the little things that count šŸ˜‰ + + Below you will find more details about what is new in this release. diff --git a/blog/2024-01-25-1-10-1-new-release/index.mdx b/blog/2024-01-25-1-10-1-new-release/index.mdx index 050e83c..0f38fbc 100644 --- a/blog/2024-01-25-1-10-1-new-release/index.mdx +++ b/blog/2024-01-25-1-10-1-new-release/index.mdx @@ -27,7 +27,9 @@ import hideArc200AssetLightImage from './hide_arc200_asset-light.png'; We are proud to present a new milestone in the development of Kibisis: v1.10.1! -This new update mainly focuses on some underlying infrastructure work that allows Kibisis to more robustly connect with dapps. +This new update mainly focuses on some underlying infrastructure work that allows Kibisis to more robustly connect with dApps. + + Below you will find more details about what is new in this release. diff --git a/blog/2024-02-08-1-11-0-new-release/index.mdx b/blog/2024-02-08-1-11-0-new-release/index.mdx index 9bc9a1e..79b2f72 100644 --- a/blog/2024-02-08-1-11-0-new-release/index.mdx +++ b/blog/2024-02-08-1-11-0-new-release/index.mdx @@ -33,6 +33,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.11.0! The latest features of v1.11.0 has been shaped based heavily of user feedback. As has been requested, you can now choose to enable a password lock, so you do not have to keep entering your password on sensitive operations. Also, by popular demand, is the ability to select one of your wallet accounts when sending an asset. + + Below you will find more details about what is new in this release. diff --git a/blog/2024-02-29-1-12-0-new-release/index.mdx b/blog/2024-02-29-1-12-0-new-release/index.mdx index 3792528..39dcb54 100644 --- a/blog/2024-02-29-1-12-0-new-release/index.mdx +++ b/blog/2024-02-29-1-12-0-new-release/index.mdx @@ -29,6 +29,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.12.0! The latest features of v1.12.0 mostly center around the extended use of the QR code. Kibisis can now utilize your device's camera and scan a QR code! But that is not all, you can also add ARC-0200 assets via a QR code. + + Below you will find more details about what is new in this release. diff --git a/blog/2024-03-05-1-13-0-new-release/index.mdx b/blog/2024-03-05-1-13-0-new-release/index.mdx index 09788ed..34a73bd 100644 --- a/blog/2024-03-05-1-13-0-new-release/index.mdx +++ b/blog/2024-03-05-1-13-0-new-release/index.mdx @@ -27,6 +27,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.13.0! By popular demand, version 1.13.0 now allows you to re-view your seed phrase for any imported or created accounts. Furthermore, as the previous versions brought the ability to import and account via a QR code, now version 1.13.0 allows you to export an account via a QR code. + + Below you will find more details about what else is new in this release. diff --git a/blog/2024-03-12-1-14-0-new-release/index.mdx b/blog/2024-03-12-1-14-0-new-release/index.mdx index 04c254f..3ae61d6 100644 --- a/blog/2024-03-12-1-14-0-new-release/index.mdx +++ b/blog/2024-03-12-1-14-0-new-release/index.mdx @@ -33,6 +33,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.14.0! It has been a long time coming, but we are very excited to announce the release of NFTs! You can now view your ARC-0072 NFTs under the NFT tab on the accounts page. + + Below you will find more details about what else is new in this release. diff --git a/blog/2024-04-30-the-voiage-to-mainnet/index.mdx b/blog/2024-04-30-the-voiage-to-mainnet/index.mdx index 5f8632f..83ac52c 100644 --- a/blog/2024-04-30-the-voiage-to-mainnet/index.mdx +++ b/blog/2024-04-30-the-voiage-to-mainnet/index.mdx @@ -21,6 +21,8 @@ Hello fellow Voiagers! As you may be aware, Voi will soon be releasing mainnet and as a user of Kibisis you have been part of this extraordinary journey. Therefore, we at Kibisis would like to cordially invite you to undertake a few quests to earn rewards that will be redeemable once we enter mainnet. + + ## Repeatable quests Repeatable quests are simple, every day actions that have varying reward multipliers depending on the ease of the task. These quests can be repeated as many times as you like and include, but not limited to: diff --git a/blog/2024-05-01-1-15-0-new-release/index.mdx b/blog/2024-05-01-1-15-0-new-release/index.mdx index 873b746..dc9cdc2 100644 --- a/blog/2024-05-01-1-15-0-new-release/index.mdx +++ b/blog/2024-05-01-1-15-0-new-release/index.mdx @@ -27,6 +27,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.15.0! The latest release of Kibisis lays the groundwork for the [Voiage To Mainnet](the-voiage-to-mainnet). + + Below you will find more details about what else is new in this release. diff --git a/blog/2024-05-14-1-16-0-new-release/index.mdx b/blog/2024-05-14-1-16-0-new-release/index.mdx index cbeeaf4..ac425e6 100644 --- a/blog/2024-05-14-1-16-0-new-release/index.mdx +++ b/blog/2024-05-14-1-16-0-new-release/index.mdx @@ -29,6 +29,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.16.0! On the journey to fully embrace ARC-0200 assets, the latest version of Kibisis now displays a richer appearance for outgoing ARC-0200 transactions. Not only that, we have also added a few nuggets such as already added assets appearing in the add asset list. + + Below you will find more details about what else is new in this release. diff --git a/blog/2024-06-18-1-17-0-new-release/index.mdx b/blog/2024-06-18-1-17-0-new-release/index.mdx index 119c4ca..98b8c9b 100644 --- a/blog/2024-06-18-1-17-0-new-release/index.mdx +++ b/blog/2024-06-18-1-17-0-new-release/index.mdx @@ -31,6 +31,8 @@ We are proud to present a new milestone in the development of Kibisis: v1.17.0! The latest release from Kibisis brings one of the stand-out & staple features of the AVM: re-keyed accounts. This release also packs an extra feature-punch with watch accounts and quest completion notifications. + + Below you will find more details about what else is new in this release. diff --git a/blog/2024-08-27-1-18-0-new-release/index.mdx b/blog/2024-08-27-1-18-0-new-release/index.mdx index 5c68a4d..9b7aa1d 100644 --- a/blog/2024-08-27-1-18-0-new-release/index.mdx +++ b/blog/2024-08-27-1-18-0-new-release/index.mdx @@ -33,6 +33,8 @@ This version of Kibisis comes with a lot of updates. First and foremost, we have As an added bonus (and for us a very exciting feature), we have added support for passkeys for authentication! + + Below you will find more details about what else is new in this release. diff --git a/blog/authors.yml b/blog/authors.yml index 9bc4d2d..83bfda6 100644 --- a/blog/authors.yml +++ b/blog/authors.yml @@ -3,4 +3,4 @@ kieran: title: Builder at Agora Labs url: https://kieranoneill.com image_url: https://agoralabs.sh/images/builder_kieran-512x512.png - email: kieran@agoralabs.sh + email: kieran@kibis.is diff --git a/docusaurus.config.js b/docusaurus.config.js deleted file mode 100644 index 966582f..0000000 --- a/docusaurus.config.js +++ /dev/null @@ -1,251 +0,0 @@ -// @ts-check -// Note: type annotations allow type checking and IDEs autocompletion - -/* eslint-disable @typescript-eslint/no-var-requires */ -const path = require('path'); -const lightCodeTheme = require('prism-react-renderer/themes/github'); -const darkCodeTheme = require('prism-react-renderer/themes/dracula'); -/* eslint-enable @typescript-eslint/no-var-requires */ - -// directories -const NODE_MODULES_DIR = path.resolve(__dirname, 'node_modules'); -const SOURCE_DIR = path.resolve(__dirname, 'src'); -const STATIC_DIR = path.resolve(__dirname, 'static'); -const STYLES_DIR = path.resolve(SOURCE_DIR, 'styles'); - -// links -const AGORA_LABS_LINK = 'https://agoralabs.sh'; -const GITHUB_LINK = 'https://github.com/agoralabs-sh/kibisis-web-extension'; -const KIBISIS_LINK = 'https://kibis.is'; -const REPORT_A_BUG_LINK = - 'https://github.com/agoralabs-sh/kibisis-web-extension/issues/new?assignees=kieranroneill&labels=%F0%9F%90%9B+bug&projects=&template=bug_report_template.yml&title=%5BBug%5D%3A+'; -const SUGGEST_A_FEATURE_LINK = - 'https://github.com/agoralabs-sh/kibisis-web-extension/issues/new?assignees=&labels=%E2%9C%A8+feature&projects=&template=feature_request_template.yml&title=%5BFeature%5D%3A+'; -const X_LINK = 'https://x.com/kibisis_wallet'; - -// application -const TAGLINE = 'Not just for DeFi'; -const TITLE = 'Kibisis'; - -/** @type {import('@docusaurus/types').Config} */ -const config = { - baseUrl: '/', - deploymentBranch: 'gh-pages', - favicon: 'images/favicon.ico', - i18n: { - defaultLocale: 'en', - locales: ['en'], - }, - onBrokenLinks: 'warn', - onBrokenMarkdownLinks: 'throw', - onDuplicateRoutes: 'throw', - organizationName: 'agoralabs-sh ', - plugins: ['docusaurus-plugin-sass'], - presets: [ - [ - 'classic', - /** @type {import('@docusaurus/preset-classic').Options} */ - ({ - docs: { - remarkPlugins: [ - [ - require('@docusaurus/remark-plugin-npm2yarn'), - { - sync: true, - }, - ], - ], - routeBasePath: '/', - sidebarPath: require.resolve(path.resolve(__dirname, 'sidebars.js')), - }, - blog: { - showReadingTime: true, - }, - theme: { - customCss: [ - require.resolve(path.resolve(STYLES_DIR, 'button.scss')), - require.resolve(path.resolve(STYLES_DIR, 'footer.scss')), - require.resolve(path.resolve(STYLES_DIR, 'global.scss')), - require.resolve(path.resolve(STYLES_DIR, 'functions.scss')), - require.resolve(path.resolve(STYLES_DIR, 'mixins.scss')), - require.resolve(path.resolve(STYLES_DIR, 'variables.scss')), - // vendor - require.resolve( - path.resolve( - NODE_MODULES_DIR, - 'react-responsive-carousel', - 'lib', - 'styles', - 'carousel.min.css' - ) - ), - ], - }, - sitemap: { - changefreq: 'weekly', - priority: 0.5, - ignorePatterns: ['/tags/**'], - filename: 'sitemap.xml', - }, - }), - ], - ], - projectName: 'kibisis-website', - staticDirectories: [STATIC_DIR], - tagline: TAGLINE, - themeConfig: - /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ - ({ - image: 'images/social_card.png', - metadata: [ - { - name: 'keywords', - content: - 'algorand, algosdk, blockchain, browser, chrome, cryptocurrency, edge, firefox, opera, voi, wallet', - }, - ], - navbar: { - logo: { - alt: 'Kibisis Site Logo', - src: 'images/logo.svg', - srcDark: 'images/logo-dark.svg', - }, - items: [ - // right - { - items: [ - { - label: 'Download', - href: '/#download', - }, - { - label: 'Concepts', - href: '/#concepts', - }, - { - label: 'Features', - href: '/#features', - }, - ], - label: 'Overview', - position: 'right', - }, - { - label: 'Blog', - position: 'right', - to: '/blog', - }, - { - label: 'Learn', - position: 'right', - sidebarId: 'docsSidebar', - type: 'docSidebar', - }, - ], - title: TITLE, - }, - footer: { - copyright: ` - - `, - logo: { - alt: 'Agora Labs logo', - height: '50px', - href: AGORA_LABS_LINK, - src: '/images/developed_by_agora_labs_banner.svg', - target: '_blank', - }, - links: [ - { - title: TITLE, - items: [ - { - label: 'Download', - href: '/#download', - }, - { - label: 'Concepts', - href: '/#concepts', - }, - { - label: 'Features', - href: '/#features', - }, - ], - }, - { - title: 'Learn More', - items: [ - { - label: 'Documentation', - to: '/overview', - }, - { - label: 'Blog', - to: '/blog', - }, - ], - }, - { - title: 'Social', - items: [ - { - html: ` - - `, - }, - ], - }, - { - title: 'Get Involved', - items: [ - { - label: 'Report a bug', - href: REPORT_A_BUG_LINK, - }, - { - label: 'Suggest a feature', - href: SUGGEST_A_FEATURE_LINK, - }, - ], - }, - { - title: 'Legal', - items: [ - { - label: 'Privacy', - to: '/privacy-policy', - }, - ], - }, - ], - style: 'dark', - }, - prism: { - theme: lightCodeTheme, - darkTheme: darkCodeTheme, - }, - }), - title: TITLE, - trailingSlash: false, - url: KIBISIS_LINK, -}; - -module.exports = config; diff --git a/docusaurus.config.ts b/docusaurus.config.ts new file mode 100644 index 0000000..274e75b --- /dev/null +++ b/docusaurus.config.ts @@ -0,0 +1,212 @@ +import type { Config } from '@docusaurus/types'; +import { resolve } from 'node:path'; +import { themes } from 'prism-react-renderer'; + +// constants +import { + GITHUB_LINK, + KIBISIS_LINK, + REPORT_A_BUG_LINK, + SUGGEST_A_FEATURE_LINK, + X_LINK, +} from './src/constants'; + +// directories +const srcDir = resolve(__dirname, 'src'); +const staticDir = resolve(__dirname, 'static'); +const stylesDir = resolve(srcDir, 'styles'); + +// application +const title = 'Kibisis'; + +const config: Config = { + baseUrl: '/', + deploymentBranch: 'gh-pages', + favicon: 'images/favicon.ico', + i18n: { + defaultLocale: 'en', + locales: ['en'], + }, + onBrokenLinks: 'warn', + onBrokenMarkdownLinks: 'throw', + onDuplicateRoutes: 'throw', + organizationName: 'agoralabs-sh ', + plugins: ['docusaurus-plugin-sass'], + presets: [ + [ + 'classic', + { + docs: { + remarkPlugins: [ + [ + require('@docusaurus/remark-plugin-npm2yarn'), + { + sync: true, + }, + ], + ], + routeBasePath: '/', + sidebarPath: require.resolve(resolve(__dirname, 'sidebars.js')), + }, + blog: { + showReadingTime: true, + }, + theme: { + customCss: [ + require.resolve(resolve(stylesDir, 'button.scss')), + require.resolve(resolve(stylesDir, 'footer.scss')), + require.resolve(resolve(stylesDir, 'global.scss')), + ], + }, + sitemap: { + changefreq: 'weekly', + priority: 0.5, + ignorePatterns: ['/tags/**'], + filename: 'sitemap.xml', + }, + }, + ], + ], + projectName: 'kibisis-website', + staticDirectories: [staticDir], + tagline: 'Your Lifestyle App', + themeConfig: { + image: 'images/social_card.png', + metadata: [ + { + name: 'keywords', + content: + 'algorand, algosdk, blockchain, browser, chrome, cryptocurrency, edge, firefox, opera, voi, wallet', + }, + ], + navbar: { + logo: { + alt: 'Kibisis Site Logo', + src: 'images/logo.svg', + srcDark: 'images/logo-dark.svg', + }, + items: [ + // right + { + label: 'Download', + position: 'right', + to: '/#download', + }, + { + label: 'Features', + position: 'right', + to: '/#features', + }, + { + label: 'Blog', + position: 'right', + to: '/blog', + }, + { + label: 'Learn', + position: 'right', + sidebarId: 'docsSidebar', + type: 'docSidebar', + }, + ], + title: title, + }, + footer: { + copyright: ` + + `, + links: [ + { + title: title, + items: [ + { + label: 'Download', + href: '/#download', + }, + { + label: 'Features', + href: '/#features', + }, + ], + }, + { + title: 'Learn More', + items: [ + { + label: 'Documentation', + to: '/overview', + }, + { + label: 'Blog', + to: '/blog', + }, + ], + }, + { + title: 'Connect', + items: [ + { + html: ` + + `, + }, + ], + }, + { + title: 'Get Involved', + items: [ + { + label: 'Report a bug', + href: REPORT_A_BUG_LINK, + }, + { + label: 'Suggest a feature', + href: SUGGEST_A_FEATURE_LINK, + }, + ], + }, + { + title: 'Legal', + items: [ + { + label: 'Privacy', + to: '/privacy-policy', + }, + ], + }, + ], + style: 'dark', + }, + prism: { + theme: themes.github, + darkTheme: themes.dracula, + }, + }, + title: 'Kibisis', + trailingSlash: false, + url: KIBISIS_LINK, +}; + +export default config; diff --git a/i18n/en/code.json b/i18n/en/code.json new file mode 100644 index 0000000..347f1a9 --- /dev/null +++ b/i18n/en/code.json @@ -0,0 +1,427 @@ +{ + "theme.ErrorPageContent.title": { + "message": "This page crashed.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.blog.archive.title": { + "message": "Archive", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "Archive", + "description": "The page & hero description of the blog archive page" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Scroll back to top", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Blog list page navigation", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "Newer entries", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Older entries", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Blog post page navigation", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Newer post", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Older post", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "View all tags", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel": { + "message": "Switch between dark and light mode (currently {mode})", + "description": "The ARIA label for the navbar color mode toggle" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "dark mode", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "light mode", + "description": "The name for the light color mode" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Breadcrumbs", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "1 item|{count} items", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Docs pages", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "Previous", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "Next", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "One doc tagged|{count} docs tagged", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} with \"{tagName}\"", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "Version: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "This is unreleased documentation for {siteTitle} {versionLabel} version.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "latest version", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "Edit this page", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "Direct link to {heading}", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " on {date}", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " by {user}", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Last updated{atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Versions", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "Page Not Found", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "Tags:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "caution", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "danger", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "info", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "note", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "tip", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "warning", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Close", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Blog recent posts navigation", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.CodeBlock.copied": { + "message": "Copied", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "Copy code to clipboard", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.copy": { + "message": "Copy", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Toggle word wrap", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Expand sidebar category '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Collapse sidebar category '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.NavBar.navAriaLabel": { + "message": "Main", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Languages", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "We could not find what you were looking for.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "On this page", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "Read more", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "Read more about {title}", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "One min read|{readingTime} min read", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.breadcrumbs.home": { + "message": "Home page", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Collapse sidebar", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Collapse sidebar", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Docs sidebar", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Close navigation bar", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "ā† Back to main menu", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "Toggle navigation bar", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Expand sidebar", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Expand sidebar", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.blog.post.plurals": { + "message": "One post|{count} posts", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} tagged with \"{tagName}\"", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "Authors", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "View all authors", + "description": "The label of the link targeting the blog authors page" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Unlisted page", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Draft page", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Try again", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "Skip to main content", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "Tags", + "description": "The title of the tag list page" + }, + + "button.downloadNow": { + "message": "Download Now" + }, + + "caption.header": { + "message": "Kibisis is more than just a wallet. It is your gateway to a secure and self-custodial lifestyle.", + "description": "The caption that appears in the hero section." + }, + "caption.imageBy": { + "message": "Image by" + }, + "caption.storysetAttribution": { + "message": "{type} illustrations by Storyset" + }, + + "feature.assets.description1": { + "message": "Kibisis supports a wide range of asset types and we believe accessing your assets should not be difficult. That is why Kibisis endeavors to make this process a rich and rewarding experience.", + "description": "A description of the assets feature section." + }, + "feature.assets.description2": { + "message": "We always strive to work with the latest dApps to achieve this rich experience.", + "description": "A description of the assets feature section." + }, + "feature.assets.imageAlt": { + "message": "A woman entering putting a puzzle piece on a giant computer screen.", + "description": "The alt text for the feature image." + }, + "feature.assets.title": { + "message": "Your Assets In One Place", + "description": "The title of the assets feature." + }, + "feature.identity.description1": { + "message": "A wallet is more than just a place to keep your assets; it is your identity.", + "description": "A description of the identity feature section." + }, + "feature.identity.description2": { + "message": "We see your wallet as away to prove your identity without having store your credentials in the cloud.", + "description": "A description of the identity feature section." + }, + "feature.identity.description3": { + "message": "You should own your identity.", + "description": "A description of the identity feature section." + }, + "feature.identity.imageAlt": { + "message": "A man sitting down filling out a form online using his tablet.", + "description": "The alt text for the feature image." + }, + "feature.identity.title": { + "message": "Your Online Identity", + "description": "The title of the identity feature." + }, + "feature.payment.description": { + "message": "Whether you are on your phone, your tablet or your desktop, Kibisis will always be there so you can make, or take, payments seamlessly.", + "description": "A description of the payment section." + }, + "feature.payment.imageAlt": { + "message": "A man sitting down shopping online using his phone.", + "description": "The alt text for the feature image." + }, + "feature.payment.title": { + "message": "Your Payments Made Easy", + "description": "The title of the payment feature." + }, + "feature.security.description1": { + "message": "Kibisis uses the best-in-class security techniques to insure your accounts are secure.", + "description": "A description of the security section." + }, + "feature.security.description2": { + "message": "We are firmly committed to empowering the individual, so Kibisis is a fully self-custodial wallet and will never transfer your private keys from your device.", + "description": "A description of the security section." + }, + "feature.security.imageAlt": { + "message": "A man using a password to on a giant cell phone to highlight security.", + "description": "The alt text for the feature image." + }, + "feature.security.title": { + "message": "Your Security Is Important", + "description": "The title of the security feature." + }, + + "heading.androidDownload": { + "message": "Install on Android", + "description": "The heading that appears on the Android download section." + }, + "heading.identity": { + "message": "Identity" + }, + "heading.iOSDownload": { + "message": "Install on iOS", + "description": "The heading that appears on the iOS download section." + }, + "heading.lifestyle": { + "message": "Lifestyle" + }, + "heading.payments": { + "message": "Payments" + }, + "heading.security": { + "message": "Security" + }, + "heading.webDownload": { + "message": "Install on your preferred browser", + "description": "The heading that appears on the web download section." + }, + "heading.headerPrefix": { + "message": "The Wallet For Your", + "description": "The prefix that appears on in the header before the rolling text." + }, + + "title.download": { + "message": "Download", + "description": "The title of the download section." + }, + "title.features": { + "message": "Features", + "description": "The title of the features section." + } +} diff --git a/i18n/en/docusaurus-plugin-content-blog/options.json b/i18n/en/docusaurus-plugin-content-blog/options.json new file mode 100644 index 0000000..9239ff7 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/en/docusaurus-plugin-content-docs/current.json b/i18n/en/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..3279cb1 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,10 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docsSidebar.category.Getting Started": { + "message": "Getting Started", + "description": "The label for category Getting Started in sidebar docsSidebar" + } +} diff --git a/i18n/en/docusaurus-theme-classic/footer.json b/i18n/en/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..de22196 --- /dev/null +++ b/i18n/en/docusaurus-theme-classic/footer.json @@ -0,0 +1,54 @@ +{ + "link.title.Kibisis": { + "message": "Kibisis", + "description": "The title of the footer links column with title=Kibisis in the footer" + }, + "link.title.Learn More": { + "message": "Learn More", + "description": "The title of the footer links column with title=Learn More in the footer" + }, + "link.title.Social": { + "message": "Social", + "description": "The title of the footer links column with title=Social in the footer" + }, + "link.title.Get Involved": { + "message": "Get Involved", + "description": "The title of the footer links column with title=Get Involved in the footer" + }, + "link.title.Legal": { + "message": "Legal", + "description": "The title of the footer links column with title=Legal in the footer" + }, + "link.item.label.Download": { + "message": "Download", + "description": "The label of footer link with label=Download linking to /#download" + }, + "link.item.label.Features": { + "message": "Features", + "description": "The label of footer link with label=Features linking to /#features" + }, + "link.item.label.Documentation": { + "message": "Documentation", + "description": "The label of footer link with label=Documentation linking to /overview" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to /blog" + }, + "link.item.label.Report a bug": { + "message": "Report a bug", + "description": "The label of footer link with label=Report a bug linking to https://github.com/agoralabs-sh/kibisis-web-extension/issues/new?assignees=kieranroneill&labels=%F0%9F%90%9B+bug&projects=&template=bug_report_template.yml&title=%5BBug%5D%3A+" + }, + "link.item.label.Suggest a feature": { + "message": "Suggest a feature", + "description": "The label of footer link with label=Suggest a feature linking to https://github.com/agoralabs-sh/kibisis-web-extension/issues/new?assignees=&labels=%E2%9C%A8+feature&projects=&template=feature_request_template.yml&title=%5BFeature%5D%3A+" + }, + "link.item.label.Privacy": { + "message": "Privacy", + "description": "The label of footer link with label=Privacy linking to /privacy-policy" + }, + "copyright": { + "message": "\n\n ", + "description": "The footer copyright" + } +} diff --git a/i18n/en/docusaurus-theme-classic/navbar.json b/i18n/en/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..45c5917 --- /dev/null +++ b/i18n/en/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "Kibisis", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "Kibisis Site Logo", + "description": "The alt text of navbar logo" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + }, + "item.label.Features": { + "message": "Features", + "description": "Navbar item with label Features" + }, + "item.label.Blog": { + "message": "Blog", + "description": "Navbar item with label Blog" + }, + "item.label.Learn": { + "message": "Learn", + "description": "Navbar item with label Learn" + } +} diff --git a/package.json b/package.json index a22debc..dfcd340 100644 --- a/package.json +++ b/package.json @@ -20,18 +20,6 @@ "engines": { "node": ">=20.9.0" }, - "browserslist": { - "production": [ - ">0.5%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, "scripts": { "build": "docusaurus build", "clear": "docusaurus clear", @@ -40,20 +28,21 @@ "prepare": "husky install", "prettier": "prettier --config .prettierrc --write \"**/*.{js,json,ts,tsx}\"", "serve": "docusaurus serve", - "start": "docusaurus start", + "start": "docusaurus start --port 8080 --no-open", "swizzle": "docusaurus swizzle", "test": "exit 0", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids" }, "devDependencies": { - "@commitlint/cli": "^17.8.0", - "@commitlint/config-conventional": "^17.8.0", - "@docusaurus/module-type-aliases": "^2.4.3", - "@tsconfig/docusaurus": "^2.0.2", + "@commitlint/cli": "^19.5.0", + "@commitlint/config-conventional": "^19.5.0", + "@docusaurus/tsconfig": "^3.5.2", + "@docusaurus/types": "^3.5.2", "@types/node": "^20.8.7", "@typescript-eslint/eslint-plugin": "^6.8.0", "@typescript-eslint/parser": "^6.8.0", + "docusaurus-plugin-sass": "^0.2.5", "eslint": "^8.51.0", "eslint-config-prettier": "^9.0.0", "husky": "^8.0.3", @@ -63,16 +52,19 @@ "typescript": "^5.2.2" }, "dependencies": { - "@docusaurus/core": "2.4.3", - "@docusaurus/preset-classic": "2.4.3", - "@docusaurus/remark-plugin-npm2yarn": "^3.0.1", - "@mdx-js/react": "^1.6.22", + "@chakra-ui/react": "^2.9.4", + "@docusaurus/core": "3.5.2", + "@docusaurus/module-type-aliases": "^3.5.2", + "@docusaurus/preset-classic": "3.5.2", + "@docusaurus/remark-plugin-npm2yarn": "^3.5.2", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", + "@mdx-js/react": "^3.0.1", "clsx": "^1.2.1", - "docusaurus-plugin-sass": "^0.2.5", - "prism-react-renderer": "^1.3.5", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-icons": "^4.12.0", - "react-responsive-carousel": "^3.2.23" + "framer-motion": "^11.5.5", + "prism-react-renderer": "^2.4.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-icons": "^5.3.0" } } diff --git a/src/components/Attribution/Attribution.tsx b/src/components/Attribution/Attribution.tsx new file mode 100644 index 0000000..ef7a076 --- /dev/null +++ b/src/components/Attribution/Attribution.tsx @@ -0,0 +1,21 @@ +import { Box } from '@chakra-ui/react'; +import { cloneElement, FC } from 'react'; + +// types +import type { IProps } from './types'; + +const Attribution: FC = ({ children }) => { + return ( + + {cloneElement(children, { + color: 'whiteAlpha.800', + fontSize: 'xs', + lineHeight: '1rem', + m: 0, + p: 0, + })} + + ); +}; + +export default Attribution; diff --git a/src/components/Attribution/index.ts b/src/components/Attribution/index.ts new file mode 100644 index 0000000..fd200de --- /dev/null +++ b/src/components/Attribution/index.ts @@ -0,0 +1 @@ +export { default } from './Attribution'; diff --git a/src/components/Attribution/types/IProps.ts b/src/components/Attribution/types/IProps.ts new file mode 100644 index 0000000..7abdcba --- /dev/null +++ b/src/components/Attribution/types/IProps.ts @@ -0,0 +1,8 @@ +import type { TextProps } from '@chakra-ui/react'; +import type { ReactElement } from 'react'; + +interface IProps { + children: ReactElement; +} + +export default IProps; diff --git a/src/components/Attribution/types/index.ts b/src/components/Attribution/types/index.ts new file mode 100644 index 0000000..060e5a5 --- /dev/null +++ b/src/components/Attribution/types/index.ts @@ -0,0 +1 @@ +export { default as IProps } from './IProps'; diff --git a/src/components/BlogScreenshotImage/BlogScreenshotImage.tsx b/src/components/BlogScreenshotImage/BlogScreenshotImage.tsx index de7a4d3..37d2e65 100644 --- a/src/components/BlogScreenshotImage/BlogScreenshotImage.tsx +++ b/src/components/BlogScreenshotImage/BlogScreenshotImage.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React, { FC } from 'react'; +import React, { type FC } from 'react'; // components import ThemedImage from '@theme/ThemedImage'; @@ -8,19 +8,13 @@ import ThemedImage from '@theme/ThemedImage'; import styles from './styles.module.scss'; // types -import { IThemedImageSources } from '@site/src/types'; - -interface IProps { - label: string; - maxWidth?: string; - imageSources: IThemedImageSources; -} +import type { IProps } from './types'; const BlogScreenshotImage: FC = ({ label, maxWidth = '400px', imageSources, -}: IProps) => { +}) => { return (
= (props) => ( + + + + + + + + + + + + + + + + + + + + + +); + +export default BraveIcon; diff --git a/src/components/BraveIcon/index.ts b/src/components/BraveIcon/index.ts new file mode 100644 index 0000000..ea3541f --- /dev/null +++ b/src/components/BraveIcon/index.ts @@ -0,0 +1 @@ +export { default } from './BraveIcon'; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 7eb5bad..9abe857 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,21 +1,33 @@ -import clsx from 'clsx'; -import React, { FC, ButtonHTMLAttributes } from 'react'; +import { + type PropsWithoutRef, + type ForwardRefExoticComponent, + forwardRef, + type RefAttributes, +} from 'react'; +import { Button as ChakraButton, type ButtonProps } from '@chakra-ui/react'; -// styles -import styles from './styles.module.scss'; +// hooks +import usePrimaryButtonTextColor from '@site/src/hooks/usePrimaryButtonTextColor'; +import usePrimaryColorScheme from '@site/src/hooks/usePrimaryColorScheme'; -interface IProps extends ButtonHTMLAttributes { - fullWidth?: boolean; -} +const Button: ForwardRefExoticComponent< + PropsWithoutRef & RefAttributes +> = forwardRef((props: ButtonProps, ref) => { + // hooks + const primaryButtonTextColor = usePrimaryButtonTextColor(); + const primaryColorScheme = usePrimaryColorScheme(); -const Button: FC = ({ fullWidth = false, ...buttonProps }: IProps) => { - const classNames: string[] = [styles.button]; + return ( + + ); +}); - if (fullWidth) { - classNames.push(styles['link-button--full-width']); - } - - return -
- ); -}; - -export default CarouselButton; diff --git a/src/components/Carousel/index.ts b/src/components/Carousel/index.ts deleted file mode 100644 index 76a7d01..0000000 --- a/src/components/Carousel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Carousel'; diff --git a/src/components/Carousel/styles.module.scss b/src/components/Carousel/styles.module.scss deleted file mode 100644 index a4c50bf..0000000 --- a/src/components/Carousel/styles.module.scss +++ /dev/null @@ -1,62 +0,0 @@ -@import "../../styles/mixins"; - -.button { - background: none; - border: none; - border-radius: 5px; - cursor: pointer; - margin: 0; - padding: 0; -} - -.container { - align-items: center; - bottom: 0; - display: flex; - position: absolute; - top: 0; - z-index: 1; - - &--next { - @extend .container; - right: 0; - } - - &--previous { - @extend .container; - left: 0; - } -} - -.icon { - fill: var(--kb-text-color); - height: 3rem; - transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default); - width: 3rem; - - @include tablet-and-up { - height: 3rem; - width: 3rem; - } - - &:hover { - fill: var(--ifm-color-primary) - } -} - -.indicator { - background: var(--ifm-color-primary); - display: inline-block; - opacity: 0.3; - border-radius: 50%; - width: 8px; - height: 8px; - cursor: pointer; - margin: 0 8px; - transition: opacity .25s ease-in; - - &--selected, - &:hover { - opacity: 1; - } -} diff --git a/src/components/Carousel/types/ICarouselItemProps.ts b/src/components/Carousel/types/ICarouselItemProps.ts deleted file mode 100644 index 02061c0..0000000 --- a/src/components/Carousel/types/ICarouselItemProps.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ReactElement } from 'react'; - -interface ICarouselItemProps { - children: ReactElement; - label?: string; -} - -export default ICarouselItemProps; diff --git a/src/components/Carousel/types/index.ts b/src/components/Carousel/types/index.ts deleted file mode 100644 index 205b6c1..0000000 --- a/src/components/Carousel/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ICarouselItemProps } from './ICarouselItemProps'; diff --git a/src/components/CenteredImage/CenteredImage.tsx b/src/components/CenteredImage/CenteredImage.tsx index 11d6087..a8299ac 100644 --- a/src/components/CenteredImage/CenteredImage.tsx +++ b/src/components/CenteredImage/CenteredImage.tsx @@ -4,17 +4,10 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import clsx from 'clsx'; -interface IProps { - label: string; - maxWidth?: string; - src: string; -} +// types +import type { IProps } from './types'; -const CenteredImage: FC = ({ - label, - maxWidth = '400px', - src, -}: IProps) => { +const CenteredImage: FC = ({ label, maxWidth = '400px', src }) => { return (
- - - - - - +import { Icon, type IconProps } from '@chakra-ui/react'; +import type { FC } from 'react'; + +const ChromeIcon: FC = (props) => ( + + + + + + + +); + +export default ChromeIcon; diff --git a/src/components/ChromeIcon/index.ts b/src/components/ChromeIcon/index.ts new file mode 100644 index 0000000..85cd4bc --- /dev/null +++ b/src/components/ChromeIcon/index.ts @@ -0,0 +1 @@ +export { default } from './ChromeIcon'; diff --git a/src/components/ConceptsSection/ConceptItem.tsx b/src/components/ConceptsSection/ConceptItem.tsx deleted file mode 100644 index 839137f..0000000 --- a/src/components/ConceptsSection/ConceptItem.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { FC } from 'react'; - -// components -import Heading from '@site/src/components/Heading'; -import Text from '@site/src/components/Text'; - -// styles -import styles from './styles.module.scss'; - -// types -import { IConceptItemProps } from './types'; - -type IProps = IConceptItemProps; - -const ConceptItem: FC = ({ - title, - SvgComponent, - description, -}: IProps) => { - return ( -
-
- -
- -
- {title} - {description} -
-
- ); -}; - -export default ConceptItem; diff --git a/src/components/ConceptsSection/ConceptsSection.tsx b/src/components/ConceptsSection/ConceptsSection.tsx deleted file mode 100644 index 1198cc4..0000000 --- a/src/components/ConceptsSection/ConceptsSection.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { FC } from 'react'; - -// components -import Section from '@site/src/components/Section'; -import ConceptItem from './ConceptItem'; - -// images -import concept001Svg from '@site/static/images/concept_001.svg'; -import concept002Svg from '@site/static/images/concept_002.svg'; -import concept003Svg from '@site/static/images/concept_003.svg'; - -// styles -import styles from './styles.module.scss'; - -// types -import { IDefaultSectionProps } from '@site/src/types'; -import { IConceptItemProps } from './types'; - -type IProps = IDefaultSectionProps; - -const ConceptsSection: FC = ({ variant }: IProps) => { - const items: IConceptItemProps[] = [ - { - title: 'Not Just For DeFi', - SvgComponent: concept001Svg, - description: ( - <> - Kibisis differs from most wallets by focusing on assets as a utility, - not just for DeFi. - - ), - }, - { - title: 'AVM Compatible', - SvgComponent: concept002Svg, - description: ( - <> - Kibisis not only works with Algorand, but endeavours to encompass all - AVM chains. - - ), - }, - { - title: 'Browser Extension', - SvgComponent: concept003Svg, - description: ( - <> - Leveraging the security and convenience of browser extensions, Kibisis - will always be there when you need it most. - - ), - }, - ]; - - return ( -
-
- {items.map((props, index) => ( - - ))} -
-
- ); -}; - -export default ConceptsSection; diff --git a/src/components/ConceptsSection/index.ts b/src/components/ConceptsSection/index.ts deleted file mode 100644 index 89be340..0000000 --- a/src/components/ConceptsSection/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default } from './ConceptsSection'; -export { default as ConceptItem } from './ConceptItem'; -export * from './types'; diff --git a/src/components/ConceptsSection/styles.module.scss b/src/components/ConceptsSection/styles.module.scss deleted file mode 100644 index 72eb8ec..0000000 --- a/src/components/ConceptsSection/styles.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import "../../styles/mixins"; - -$max-width: 300px; - -.container { - &__image { - display: flex; - justify-content: center; - max-width: $max-width; - width: 100%; - } - - &__items { - align-items: center; - display: flex; - flex-direction: column; - padding: 3rem 0; - width: 100%; - @include tablet-and-up { - align-items: flex-start; - flex-direction: row; - justify-content: center; - } - } - - &__text { - padding-top: 1rem; - text-align: center; - max-width: $max-width; - width: 100%; - } -} - -.image { - height: 100px; - width: 100px; -} - -.item { - padding: 1rem; - - @include desktop-and-up { - padding: 0 2rem; - } -} diff --git a/src/components/ConceptsSection/types/IConceptItemProps.ts b/src/components/ConceptsSection/types/IConceptItemProps.ts deleted file mode 100644 index 9fa3f91..0000000 --- a/src/components/ConceptsSection/types/IConceptItemProps.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ComponentProps, ComponentType, ReactElement } from 'react'; - -interface IConceptItemProps { - SvgComponent: ComponentType>; - description: ReactElement; - title: string; -} - -export default IConceptItemProps; diff --git a/src/components/ConceptsSection/types/index.ts b/src/components/ConceptsSection/types/index.ts deleted file mode 100644 index ba33de8..0000000 --- a/src/components/ConceptsSection/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as IConceptItemProps } from './IConceptItemProps'; diff --git a/src/components/DownloadSection/DownloadItem.tsx b/src/components/DownloadSection/DownloadItem.tsx deleted file mode 100644 index f01296e..0000000 --- a/src/components/DownloadSection/DownloadItem.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { FC } from 'react'; - -// components -import LinkButton from '@site/src/components/LinkButton'; -import Heading from '@site/src/components/Heading'; - -// styles -import styles from './styles.module.scss'; - -// types -import { IDownloadItemProps } from './types'; - -type IProps = IDownloadItemProps; - -const DownloadItem: FC = ({ - buttonLabel, - downloadUri, - name, - SvgComponent, -}: IProps) => { - return ( -
- {/*image*/} -
- -
- - {/*name*/} -
- {name} -
- - {/*button*/} - - {downloadUri ? buttonLabel : 'Coming Soon!'} - -
- ); -}; - -export default DownloadItem; diff --git a/src/components/DownloadSection/DownloadSection.tsx b/src/components/DownloadSection/DownloadSection.tsx index edbf146..2674038 100644 --- a/src/components/DownloadSection/DownloadSection.tsx +++ b/src/components/DownloadSection/DownloadSection.tsx @@ -1,66 +1,235 @@ -import React, { FC } from 'react'; +import { + Heading, + HStack, + Image, + Stack, + VStack, + Wrap, + WrapItem, +} from '@chakra-ui/react'; +import { useColorMode } from '@docusaurus/theme-common'; +import { translate } from '@docusaurus/Translate'; +import { type FC, useEffect, useState } from 'react'; // components +import BraveIcon from '@site/src/components/BraveIcon'; +import ChromeIcon from '@site/src/components/ChromeIcon'; +import EdgeIcon from '@site/src/components/EdgeIcon'; +import FirefoxIcon from '@site/src/components/FirefoxIcon'; +import PillTabs from '@site/src/components/PillTabs'; import Section from '@site/src/components/Section'; -import DownloadItem from './DownloadItem'; +import StoreBadge from '@site/src/components/StoreBadge'; +import WebDownloadItem from '@site/src/components/WebDownloadItem'; // constants -import { - CHROME_STORE_LINK, - EDGE_STORE_LINK, - // FIREFOX_ADD_ON_LINK, -} from '@site/src/constants'; +import { CHROME_STORE_LINK, DEFAULT_GAP } from '@site/src/constants'; -// images -import braveSvg from '@site/static/images/brave.svg'; -import chromeSvg from '@site/static/images/chrome.svg'; -import edgeSvg from '@site/static/images/edge.svg'; -// import firefoxSvg from '@site/static/images/firefox.svg'; +// enums +import { PlatformEnum } from '@site/src/enums'; -// styles -import styles from './styles.module.scss'; +// hooks +import useDefaultTextColor from '@site/src/hooks/useDefaultTextColor'; +import useDesktopAndUp from '@site/src/hooks/useDesktopAndUp'; // types -import { IDefaultSectionProps } from '@site/src/types'; -import { IDownloadItemProps } from './types'; - -type IProps = IDefaultSectionProps; - -const DownloadSection: FC = ({ variant }: IProps) => { - const items: IDownloadItemProps[] = [ - { - buttonLabel: 'Install', - downloadUri: CHROME_STORE_LINK, - name: 'Chrome', - SvgComponent: chromeSvg, - }, - // { - // buttonLabel: 'Install', - // downloadUri: FIREFOX_ADD_ON_LINK, - // name: 'Firefox', - // SvgComponent: firefoxSvg, - // }, - { - buttonLabel: 'Install', - downloadUri: EDGE_STORE_LINK, - name: 'Edge', - SvgComponent: edgeSvg, - }, - { - buttonLabel: 'Install', - downloadUri: CHROME_STORE_LINK, - name: 'Brave', - SvgComponent: braveSvg, - }, - ]; +import type { IDefaultSectionProps } from '@site/src/types'; + +// utils +import checkPlatform from '@site/src/utils/checkPlatform'; + +const DownloadSection: FC = ({ variant }) => { + const { colorMode } = useColorMode(); + // hooks + const defaultTextColor = useDefaultTextColor(); + const desktopAndUp = useDesktopAndUp(); + // states + const [index, setIndex] = useState(0); + + useEffect(() => { + const platform = checkPlatform(); + let _index = 0; + + switch (platform) { + case PlatformEnum.Android: + _index = 1; + break; + case PlatformEnum.IOS: + _index = 2; + break; + case PlatformEnum.Web: + default: + break; + } + + setIndex(_index); + }, []); return ( -
-
- {items.map((props, index) => ( - - ))} -
+
+ + {/*screenshot*/} + {desktopAndUp && ( + Home screen of the web extension + )} + + + + {translate({ id: 'heading.webDownload' })} + + + + {/*brave*/} + + } + name="Brave" + /> + + + {/*chrome*/} + + } + name="Chrome" + /> + + + {/*edge*/} + + } name="Edge" /> + + + {/*firefox*/} + + } name="Firefox" /> + + + + + ), + title: 'Web', + }, + { + content: ( + + {/*screenshot*/} + {desktopAndUp && ( + + Home screen of the Android app + + )} + + + + {translate({ id: 'heading.androidDownload' })} + + + {/*badges*/} + + {/*play store*/} + + + + + {/*f-droid*/} + + + + + {/*direct download*/} + + + + + + + ), + title: 'Android', + }, + { + content: ( + + {/*screenshot*/} + {desktopAndUp && ( + + Home screen of the iOS app + + )} + + + + {translate({ id: 'heading.iOSDownload' })} + + + {/*badge*/} + + + + + + + + ), + title: 'iOS', + }, + ]} + />
); }; diff --git a/src/components/DownloadSection/styles.module.scss b/src/components/DownloadSection/styles.module.scss deleted file mode 100644 index 5b88ca6..0000000 --- a/src/components/DownloadSection/styles.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import "../../styles/mixins"; - -.items-container { - align-items: center; - display: flex; - flex-direction: column; - padding: 3rem 0; - width: 100%; - - @include tablet-and-up { - align-items: flex-start; - flex-direction: row; - justify-content: center; - } -} - -.image-container { - display: flex; - justify-content: center; - padding-bottom: 1rem; - width: 100%; -} - -.image { - height: 100px; - width: 100px; -} - -.item { - padding: 1rem 1rem 2rem; - min-width: 200px; - text-align: center; - - @include desktop-and-up { - padding: 0 2rem; - } -} - -.text-container { - padding-bottom: 0.3rem; -} diff --git a/src/components/DownloadSection/types/IDownloadItemProps.ts b/src/components/DownloadSection/types/IDownloadItemProps.ts deleted file mode 100644 index 905a44e..0000000 --- a/src/components/DownloadSection/types/IDownloadItemProps.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { ComponentProps, ComponentType } from 'react'; - -interface IDownloadItemProps { - buttonLabel: string; - downloadUri?: string; - name: string; - SvgComponent: ComponentType>; -} - -export default IDownloadItemProps; diff --git a/src/components/DownloadSection/types/index.ts b/src/components/DownloadSection/types/index.ts deleted file mode 100644 index 159d036..0000000 --- a/src/components/DownloadSection/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as IDownloadItemProps } from './IDownloadItemProps'; diff --git a/static/images/edge.svg b/src/components/EdgeIcon/EdgeIcon.tsx similarity index 92% rename from static/images/edge.svg rename to src/components/EdgeIcon/EdgeIcon.tsx index 9b40b1d..e0768b3 100644 --- a/static/images/edge.svg +++ b/src/components/EdgeIcon/EdgeIcon.tsx @@ -1,8 +1,24 @@ - - - - - +import { Icon, type IconProps } from '@chakra-ui/react'; +import type { FC } from 'react'; + +const EdgeIcon: FC = (props) => ( + + + + + +); + +export default EdgeIcon; diff --git a/src/components/EdgeIcon/index.ts b/src/components/EdgeIcon/index.ts new file mode 100644 index 0000000..a8ef949 --- /dev/null +++ b/src/components/EdgeIcon/index.ts @@ -0,0 +1 @@ +export { default } from './EdgeIcon'; diff --git a/src/components/FeatureItem/FeatureItem.tsx b/src/components/FeatureItem/FeatureItem.tsx new file mode 100644 index 0000000..736c9a8 --- /dev/null +++ b/src/components/FeatureItem/FeatureItem.tsx @@ -0,0 +1,97 @@ +import { Heading, Image, Stack, Text, VStack } from '@chakra-ui/react'; +import { translate } from '@docusaurus/Translate'; +import { type FC } from 'react'; + +// components +import Attribution from '@site/src/components/Attribution'; + +// constants +import { DEFAULT_GAP } from '@site/src/constants'; + +// hooks +import useDefaultTextColor from '@site/src/hooks/useDefaultTextColor'; +import useDesktopAndUp from '@site/src/hooks/useDesktopAndUp'; + +// types +import type { IProps } from './types'; + +const FeatureItem: FC = ({ + attribution, + altID, + descriptionIDs, + index, + src, + titleID, +}) => { + // hooks + const defaultTextColor = useDefaultTextColor(); + const desktopAndUp = useDesktopAndUp(); + // misc + const isEven = index % 2 === 0; + const textAlign = desktopAndUp ? 'left' : 'center'; + const renderContent = () => { + const imageElement = ( + + {/*image*/} + {translate({ + + {/*attribution*/} + {attribution && ( + + {attribution} + + )} + + ); + const textElement = ( + + {/*title*/} + + {translate({ id: titleID })} + + + {/*descriptions*/} + {descriptionIDs.map((value) => ( + + {translate({ id: value })} + + ))} + + ); + + if (!isEven || !desktopAndUp) { + return ( + <> + {imageElement} + {textElement} + + ); + } + + return ( + <> + {textElement} + {imageElement} + + ); + }; + + return ( + + {renderContent()} + + ); +}; + +export default FeatureItem; diff --git a/src/components/FeatureItem/index.ts b/src/components/FeatureItem/index.ts new file mode 100644 index 0000000..6bf6bf4 --- /dev/null +++ b/src/components/FeatureItem/index.ts @@ -0,0 +1 @@ +export { default } from './FeatureItem'; diff --git a/src/components/FeatureItem/types/IProps.ts b/src/components/FeatureItem/types/IProps.ts new file mode 100644 index 0000000..d5a0d0a --- /dev/null +++ b/src/components/FeatureItem/types/IProps.ts @@ -0,0 +1,13 @@ +import type { TextProps } from '@chakra-ui/react'; +import type { ReactElement } from 'react'; + +interface IProps { + altID: string; + attribution?: ReactElement; + descriptionIDs: string[]; + index: number; + src: string; + titleID: string; +} + +export default IProps; diff --git a/src/components/FeatureItem/types/index.ts b/src/components/FeatureItem/types/index.ts new file mode 100644 index 0000000..060e5a5 --- /dev/null +++ b/src/components/FeatureItem/types/index.ts @@ -0,0 +1 @@ +export { default as IProps } from './IProps'; diff --git a/src/components/FeaturesSection/FeatureItem.tsx b/src/components/FeaturesSection/FeatureItem.tsx deleted file mode 100644 index 95e93e3..0000000 --- a/src/components/FeaturesSection/FeatureItem.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import clsx from 'clsx'; -import React, { FC } from 'react'; - -// components -import Heading from '@site/src/components/Heading'; -import Text from '@site/src/components/Text'; -import ThemedImage from '@theme/ThemedImage'; - -// styles -import styles from './styles.module.scss'; - -// types -import { IFeatureItemProps } from './types'; - -type IProps = IFeatureItemProps; - -const FeatureItem: FC = ({ - alt, - description, - imageSources, - title, -}: IProps) => { - return ( -
- {/*title/description*/} -
- {title} - - {description} -
- - {/*image*/} -
- -
-
- ); -}; - -export default FeatureItem; diff --git a/src/components/FeaturesSection/FeaturesSection.tsx b/src/components/FeaturesSection/FeaturesSection.tsx index ce0f9e9..49e0682 100644 --- a/src/components/FeaturesSection/FeaturesSection.tsx +++ b/src/components/FeaturesSection/FeaturesSection.tsx @@ -1,72 +1,159 @@ -import React, { FC } from 'react'; +import { Link, Text, VStack } from '@chakra-ui/react'; +import { useColorMode } from '@docusaurus/theme-common'; +import { translate } from '@docusaurus/Translate'; +import { type FC } from 'react'; // components -import Carousel from '@site/src/components/Carousel'; +import FeatureItem from '@site/src/components/FeatureItem'; import Section from '@site/src/components/Section'; -import FeatureItem from './FeatureItem'; - -// styles -import styles from './styles.module.scss'; // types -import { IDefaultSectionProps } from '@site/src/types'; -import { IFeatureItemProps } from './types'; - -type IProps = IDefaultSectionProps; +import type { IDefaultSectionProps } from '@site/src/types'; +import type { IProps as IFeatureItemProps } from '@site/src/components/FeatureItem'; +import { DEFAULT_GAP } from '@site/src/constants'; -const FeaturesSection: FC = ({ variant }: IProps) => { +const FeaturesSection: FC = ({ variant }) => { + const { colorMode } = useColorMode(); + // misc const items: IFeatureItemProps[] = [ { - alt: 'Home screen', - description: - 'Kibisis treats assets more as a utility rather than just a fungible currency.', - imageSources: { - dark: '/images/home_screen-dark.png', - light: '/images/home_screen-light.png', - }, - title: 'Assets Are Not Just Fungible Currency', + altID: 'feature.security.imageAlt', + attribution: ( + + + {translate( + { + id: 'caption.storysetAttribution', + }, + { + type: 'Data', + } + )} + + + ), + descriptionIDs: [ + 'feature.security.description1', + 'feature.security.description2', + ], + index: 0, + src: `/images/features/security_feature-${colorMode}.svg`, + titleID: 'feature.security.title', }, { - alt: 'Asset transfer screen', - description: 'Seamlessly transfer any asset to another address.', - imageSources: { - dark: '/images/send_assets_screen-dark.png', - light: '/images/send_assets_screen-light.png', - }, - title: 'Asset Transfer', + altID: 'feature.assets.imageAlt', + attribution: ( + + + {translate( + { + id: 'caption.storysetAttribution', + }, + { + type: 'Work', + } + )} + + + ), + descriptionIDs: [ + 'feature.assets.description1', + 'feature.assets.description2', + ], + index: 1, + src: `/images/features/assets_feature-${colorMode}.svg`, + titleID: 'feature.assets.title', }, { - alt: 'Add ARC-200 screen', - description: - 'Kibisis not only supports AVM standard assets, it also supports ARC-0200. From Kibisis, you can check your balance, transfer and add any ARC-0200 asset.', - imageSources: { - dark: '/images/arc0200_support_screen-dark.png', - light: '/images/arc0200_support_screen-light.png', - }, - title: 'ARC-0200 Support', + altID: 'feature.payment.imageAlt', + attribution: ( + + + {translate( + { + id: 'caption.storysetAttribution', + }, + { + type: 'Business', + } + )} + + + ), + descriptionIDs: ['feature.payment.description'], + index: 2, + src: `/images/features/payments_feature-${colorMode}.svg`, + titleID: 'feature.payment.title', }, { - alt: 'Atomic transaction screen', - description: - 'With AVM chains allowing up to 16 transactions to be grouped as an atomic transfer, Kibisis can sign all or multiple transactions within the atomic group.', - imageSources: { - dark: '/images/atomic_transactions_screen-dark.png', - light: '/images/atomic_transactions_screen-light.png', - }, - title: 'Atomic Transactions', + altID: 'feature.identity.imageAlt', + attribution: ( + + + {translate( + { + id: 'caption.storysetAttribution', + }, + { + type: 'Online', + } + )} + + + ), + descriptionIDs: [ + 'feature.identity.description1', + 'feature.identity.description2', + 'feature.identity.description3', + ], + index: 3, + src: `/images/features/identity_feature-${colorMode}.svg`, + titleID: 'feature.identity.title', }, ]; return ( -
-
- ({ - children: , - label: props.title, - }))} - /> -
+
+ + {items.map((props, index) => ( + + ))} +
); }; diff --git a/src/components/FeaturesSection/styles.module.scss b/src/components/FeaturesSection/styles.module.scss deleted file mode 100644 index 4e4aca7..0000000 --- a/src/components/FeaturesSection/styles.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import "../../styles/mixins"; -@import "../../styles/variables"; - -$section-y-padding: 3rem; - -.carousel-container { - padding-top: $section-y-padding; - width: 100%; -} - -.image { - box-shadow: $screen-box-shadow; - max-width: 400px; -} - -.image-container { - display: flex; - justify-content: center; -} - -.item { - flex: 1; - padding-bottom: $section-y-padding; - - @include tablet-and-up { - padding-bottom: 0; - } -} - -.item-container { - display: flex; - flex-direction: column; - padding: 0 3rem; - - @include tablet-and-up { - flex-direction: row; - padding: 0 3rem $section-y-padding * 2; - } - } - -.text-container { - align-items: center; - display: flex; - flex-direction: column; - text-align: center; - - @include tablet-and-up { - align-items: flex-start; - justify-content: center; - padding-right: 1rem; - text-align: left; - } -} diff --git a/src/components/FeaturesSection/types/IFeatureItemProps.ts b/src/components/FeaturesSection/types/IFeatureItemProps.ts deleted file mode 100644 index 07907f9..0000000 --- a/src/components/FeaturesSection/types/IFeatureItemProps.ts +++ /dev/null @@ -1,11 +0,0 @@ -// types -import { IThemedImageSources } from '@site/src/types'; - -interface IFeatureItemProps { - alt: string; - description: string; - imageSources: IThemedImageSources; - title: string; -} - -export default IFeatureItemProps; diff --git a/src/components/FeaturesSection/types/index.ts b/src/components/FeaturesSection/types/index.ts deleted file mode 100644 index 7ec814e..0000000 --- a/src/components/FeaturesSection/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as IFeatureItemProps } from './IFeatureItemProps'; diff --git a/static/images/firefox.svg b/src/components/FirefoxIcon/FirefoxIcon.tsx similarity index 88% rename from static/images/firefox.svg rename to src/components/FirefoxIcon/FirefoxIcon.tsx index a324e9a..37a3327 100644 --- a/static/images/firefox.svg +++ b/src/components/FirefoxIcon/FirefoxIcon.tsx @@ -1,12 +1,44 @@ - - - - - - - - - +import { Icon, type IconProps } from '@chakra-ui/react'; +import type { FC } from 'react'; + +const FirefoxIcon: FC = (props) => ( + + + + + + + + + +); + +export default FirefoxIcon; diff --git a/src/components/FirefoxIcon/index.ts b/src/components/FirefoxIcon/index.ts new file mode 100644 index 0000000..3bf93b4 --- /dev/null +++ b/src/components/FirefoxIcon/index.ts @@ -0,0 +1 @@ +export { default } from './FirefoxIcon'; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a5b9d2c..6490867 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,62 +1,155 @@ -import clsx from 'clsx'; -import React, { FC } from 'react'; +import { + Box, + Heading, + Link, + List, + ListItem, + Stack, + Text, + VStack, +} from '@chakra-ui/react'; +import { keyframes } from '@emotion/react'; +import { translate } from '@docusaurus/Translate'; +import type { FC } from 'react'; +import { IoArrowDownOutline } from 'react-icons/io5'; // components +import Attribution from '@site/src/components/Attribution'; import LinkButton from '@site/src/components/LinkButton'; -import ThemedImage from '@theme/ThemedImage'; -// styles -import styles from './styles.module.scss'; +// constants +import { DEFAULT_GAP } from '@site/src/constants'; + +// hooks +import useDesktopAndUp from '@site/src/hooks/useDesktopAndUp'; +import usePrimaryColor from '@site/src/hooks/usePrimaryColor'; const Header: FC = () => { + // hooks + const desktopAndUp = useDesktopAndUp(); + const primaryColor = usePrimaryColor(); + // misc + const itemHeightInRem = 3.6; + const headerItems = [ + translate({ id: 'heading.identity' }), + translate({ id: 'heading.payments' }), + translate({ id: 'heading.lifestyle' }), + ]; + const scrollingAnimation = keyframes` + 0% { margin-top: -${itemHeightInRem * 6}rem; } + 5% { margin-top: -${itemHeightInRem * 4}rem; } + 33% { margin-top: -${itemHeightInRem * 4}rem; } + 38% { margin-top: -${itemHeightInRem * 2}rem; } + 66% { margin-top: -${itemHeightInRem * 2}rem; } + 71% { margin-top: 0; } + 99.99% { margin-top: 0; } + 100% { margin-top: -${itemHeightInRem * 6}rem; } + `; + const defaultHeadingColor = 'whiteAlpha.900'; + return ( -
-
+ + {/*title*/} -
-

- Your Ultimate AVM Utility Wallet -

- - {/*subtitle*/} -

- An AVM wallet in your browser that goes beyond just DeFi. -

- - {/*button*/} -
- - Download Now - -
-
- - {/*image*/} -
- -
-
+ + + {translate({ id: 'heading.headerPrefix' })} + + + + + {headerItems.map((value, index) => ( + + + {value} + + + ))} + + + + + {/*subtitle*/} + + {translate({ id: 'caption.header' })} + + + {/*button*/} + } + size="lg" + > + {translate({ id: 'button.downloadNow' })} + + {/*attribution*/} -
-

- Image by{` `} - - Freepik - -

-
-
+ + + + {`${translate({ id: 'caption.imageBy' })} `} + + freepik + + + + + ); }; diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss deleted file mode 100644 index c92a25a..0000000 --- a/src/components/Header/styles.module.scss +++ /dev/null @@ -1,98 +0,0 @@ -@import "../../styles/functions"; -@import "../../styles/mixins"; -@import "../../styles/variables"; - -.button-container { - align-self: center; - padding: 1rem; - width: 50%; -} - -.container { - display: flex; - flex: 1; - padding: 2rem 0; - - &__attribution { - align-items: center; - display: flex; - justify-content: flex-end; - padding: 0.5rem; - @include mobile-only { - display: none; - } - } - - &__content { - align-items: center; - display: flex; - flex-direction: column; - flex-grow: 1; - padding: 0 2rem; - @include tablet-and-up { - flex-direction: row; - } - } - - &__image { - align-items: center; - justify-content: center; - } - - &__outer { - background-color: #f4f4f4; - display: flex; - flex-direction: column; - height: calc(100vh - var(--ifm-navbar-height)); - justify-content: space-between; - @include tablet-and-up { - background-image: url("/static/images/header_background.jpeg"); - background-size: cover; - } - } - - &__text { - align-items: flex-start; - flex-direction: column; - justify-content: center; - } -} - -.image { - box-shadow: $screen-box-shadow; - @include tablet-and-up { - max-height: 600px; - } -} - -.text { - color: text-color("light"); - - &--attribution { - background-color: #000; - color: text-color("dark"); - font-size: 1rem; - line-height: 1rem; - padding: 0.25rem; - margin: 0; - - a { - color: primary-color("dark"); - } - } - - &--subtitle { - font-size: 1rem; - @include tablet-and-up { - font-size: 1.5rem; - } - } - - &--title { - font-size: 2rem; - font-weight: 600; - @include tablet-and-up { - font-size: 4.5rem; - } - } -} diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx index ef0754f..08e0312 100644 --- a/src/components/Heading/Heading.tsx +++ b/src/components/Heading/Heading.tsx @@ -1,14 +1,12 @@ -import React, { FC, ReactElement } from 'react'; +import React, { type FC, type PropsWithChildren } from 'react'; // styles -import styles from './index.module.scss'; +import styles from './styles.module.scss'; -interface IProps { - children: ReactElement | string; - level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; -} +// types +import type { IProps } from './types'; -const Heading: FC = ({ children, level }: IProps) => { +const Heading: FC = ({ children, level }) => { switch (level) { case 'h1': return

{children}

; diff --git a/src/components/Heading/index.module.scss b/src/components/Heading/styles.module.scss similarity index 100% rename from src/components/Heading/index.module.scss rename to src/components/Heading/styles.module.scss diff --git a/src/components/Heading/types/IProps.ts b/src/components/Heading/types/IProps.ts new file mode 100644 index 0000000..9fa30f9 --- /dev/null +++ b/src/components/Heading/types/IProps.ts @@ -0,0 +1,5 @@ +interface IProps { + level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; +} + +export default IProps; diff --git a/src/components/Heading/types/index.ts b/src/components/Heading/types/index.ts new file mode 100644 index 0000000..060e5a5 --- /dev/null +++ b/src/components/Heading/types/index.ts @@ -0,0 +1 @@ +export { default as IProps } from './IProps'; diff --git a/src/components/KibisisIcon/KibisisIcon.tsx b/src/components/KibisisIcon/KibisisIcon.tsx new file mode 100644 index 0000000..26c1fa6 --- /dev/null +++ b/src/components/KibisisIcon/KibisisIcon.tsx @@ -0,0 +1,13 @@ +import { Icon, type IconProps } from '@chakra-ui/react'; +import type { FC } from 'react'; + +const KibisisIcon: FC = (props) => ( + + + +); + +export default KibisisIcon; diff --git a/src/components/KibisisIcon/index.ts b/src/components/KibisisIcon/index.ts new file mode 100644 index 0000000..f93f34a --- /dev/null +++ b/src/components/KibisisIcon/index.ts @@ -0,0 +1 @@ +export { default } from './KibisisIcon'; diff --git a/src/components/LinkButton/LinkButton.tsx b/src/components/LinkButton/LinkButton.tsx index 788a576..16d5079 100644 --- a/src/components/LinkButton/LinkButton.tsx +++ b/src/components/LinkButton/LinkButton.tsx @@ -1,30 +1,51 @@ -import clsx from 'clsx'; -import React, { FC, AnchorHTMLAttributes } from 'react'; +import { + type PropsWithoutRef, + type ForwardRefExoticComponent, + forwardRef, + type RefAttributes, +} from 'react'; +import { + type ButtonProps, + Link as ChakraLink, + type LinkProps, +} from '@chakra-ui/react'; +import { IoOpenOutline } from 'react-icons/io5'; -// styles -import styles from './styles.module.scss'; +// components +import Button from '@site/src/components/Button'; -interface IProps extends AnchorHTMLAttributes { - disabled?: boolean; - fullWidth?: boolean; -} +// hooks +import usePrimaryButtonTextColor from '@site/src/hooks/usePrimaryButtonTextColor'; -const LinkButton: FC = ({ - disabled = false, - fullWidth = false, - ...anchorProps -}: IProps) => { - const classNames: string[] = [styles['link-button']]; +const LinkButton: ForwardRefExoticComponent< + PropsWithoutRef & + PropsWithoutRef & + RefAttributes +> = forwardRef((props, ref) => { + // hooks + const primaryButtonTextColor = usePrimaryButtonTextColor(); - if (disabled) { - classNames.push(styles['link-button--disabled']); - } + return ( +