diff --git a/.github/actions/use-dependencies/action.yml b/.github/actions/use-dependencies/action.yml new file mode 100644 index 0000000..318ce7b --- /dev/null +++ b/.github/actions/use-dependencies/action.yml @@ -0,0 +1,22 @@ +name: "Use Dependencies" + +description: "Checks if the dependencies have been cached with the hash of the yarn.lock file." + +runs: + using: "composite" + steps: + - name: "๐Ÿ”ง Setup" + uses: actions/setup-node@v3 + with: + node-version: 'lts/*' + cache: 'yarn' + - name: "๐Ÿ’พ Cache dependencies" + uses: actions/cache@v3 + id: cache-dependencies + with: + path: node_modules + key: ${{ runner.os }}-node-${{ hashFiles('yarn.lock') }} + - name: "๐Ÿ“ฆ Install" + if: steps.cache-dependencies.outputs.cache-hit != 'true' + run: yarn install --ignore-scripts + shell: bash diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a10f6db..3274d2f 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,29 +1,34 @@ -name: Deploy +name: "Deploy" on: release: types: [released] # triggered on main branch releases jobs: + install: + name: "Install" + runs-on: ubuntu-latest + steps: + - name: "๐Ÿ›Ž Checkout" + uses: actions/checkout@v3 + - name: "๐Ÿ”ง Setup" + uses: ./.github/actions/use-dependencies + deploy: name: "Deploy" + needs: install runs-on: ubuntu-latest steps: - name: "๐Ÿ›Ž Checkout" uses: actions/checkout@v3 - name: "๐Ÿ”ง Setup" - uses: actions/setup-node@v3 - with: - node-version: 18 - cache: yarn - - name: "๐Ÿ“ฆ Install" - run: yarn install --frozen-lockfile + uses: ./.github/actions/use-dependencies - name: "๐Ÿ—๏ธ Build" run: yarn build - name: "๐Ÿš€ Deploy" uses: peaceiris/actions-gh-pages@v3 with: - force_orphan: true + force_orphan: true # create empty branch if missing personal_token: ${{ secrets.WRITE_REPOS_TOKEN }} publish_branch: gh-pages publish_dir: ./build diff --git a/.github/workflows/lint_build_test.yml b/.github/workflows/lint_build_test.yml deleted file mode 100644 index c32d062..0000000 --- a/.github/workflows/lint_build_test.yml +++ /dev/null @@ -1,24 +0,0 @@ -name: Pull Request Checks - -on: - pull_request: - -jobs: - lint_build_test: - name: "Lint, Build & Test" - runs-on: ubuntu-latest - steps: - - name: "๐Ÿ›Ž Checkout" - uses: actions/checkout@v3 - - name: "๐Ÿ”ง Setup" - uses: actions/setup-node@v3 - with: - node-version: 'lts/*' - - name: "๐Ÿ“ฆ Install" - run: yarn install --ignore-scripts - - name: "๐Ÿ‘• Lint" - run: yarn lint - - name: "๐Ÿ—๏ธ Build" - run: yarn build - - name: "๐Ÿงช Test" - run: yarn test diff --git a/.github/workflows/pull_request_checks.yml b/.github/workflows/pull_request_checks.yml new file mode 100644 index 0000000..af8c720 --- /dev/null +++ b/.github/workflows/pull_request_checks.yml @@ -0,0 +1,58 @@ +name: "Pull Request Checks" + +on: + pull_request: + +jobs: + ## + # install + ## + + install: + name: "Install" + runs-on: ubuntu-latest + steps: + - name: "๐Ÿ›Ž Checkout" + uses: actions/checkout@v3 + - name: "๐Ÿ”ง Setup" + uses: ./.github/actions/use-dependencies + + ## + # lint, build documentation, build package and test + ## + + lint: + name: "Lint" + needs: install + runs-on: ubuntu-latest + steps: + - name: "๐Ÿ›Ž Checkout" + uses: actions/checkout@v3 + - name: "๐Ÿ”ง Setup" + uses: ./.github/actions/use-dependencies + - name: "๐Ÿ‘• Lint" + run: yarn lint + + build: + name: "Build" + needs: install + runs-on: ubuntu-latest + steps: + - name: "๐Ÿ›Ž Checkout" + uses: actions/checkout@v3 + - name: "๐Ÿ”ง Setup" + uses: ./.github/actions/use-dependencies + - name: "๐Ÿ—๏ธ Build" + run: yarn build + + test: + name: "Test" + needs: install + runs-on: ubuntu-latest + steps: + - name: "๐Ÿ›Ž Checkout" + uses: actions/checkout@v3 + - name: "๐Ÿ”ง Setup" + uses: ./.github/actions/use-dependencies + - name: "๐Ÿงช Test" + run: yarn test diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 72a7192..6d4cb9a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,4 +1,4 @@ -name: Release +name: "Release" on: push: diff --git a/blog/authors.yml b/blog/authors.yml index c6b1ffc..023cea0 100644 --- a/blog/authors.yml +++ b/blog/authors.yml @@ -1,5 +1,5 @@ kieran: name: Kieran O'Neill - title: Current Custodian of Agora Labs + title: Builder at Agora Labs url: https://github.com/kieranroneill image_url: https://github.com/kieranroneill.png diff --git a/docusaurus.config.js b/docusaurus.config.js index 067258b..f5c67e9 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -14,7 +14,14 @@ 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 TITLE = 'Kibisis'; @@ -46,9 +53,13 @@ const config = { }, 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, 'navbar.scss')), + require.resolve(path.resolve(STYLES_DIR, 'variables.scss')), // vendor require.resolve( path.resolve( @@ -81,7 +92,7 @@ const config = { { name: 'keywords', content: - 'algorand, algosdk, blockchain, browser, chrome, cryptocurrency, firefox, opera, wallet', + 'algorand, algosdk, blockchain, browser, chrome, cryptocurrency, edge, firefox, opera, voi, wallet', }, ], navbar: { @@ -110,59 +121,75 @@ const config = { label: 'Overview', position: 'right', }, - { - label: 'Blog', - position: 'right', - to: '/blog', - }, - { - label: 'Docs', - position: 'right', - sidebarId: 'docsSidebar', - type: 'docSidebar', - }, + // { + // label: 'Blog', + // position: 'right', + // to: '/blog', + // }, + // { + // label: 'Docs', + // position: 'right', + // sidebarId: 'docsSidebar', + // type: 'docSidebar', + // }, ], title: TITLE, }, footer: { - style: 'dark', + copyright: ` +
+

+ Licensed under GPL-2.0. +

+

+ Icons provided by flaticon. +

+
+ `, + logo: { + alt: 'Agora Labs logo', + height: '50px', + href: AGORA_LABS_LINK, + src: '/images/developed_by_agora_labs_banner.svg', + target: '_blank', + }, links: [ { - title: 'Kibisis', + title: TITLE, items: [ { label: 'Concepts', - to: '#concepts', + to: '/#concepts', }, { label: 'Features', - to: '#features', + to: '/#features', }, { label: 'Download', - to: '#download', - }, - ], - }, - { - title: 'Learn More', - items: [ - { - label: 'Docs', - to: '/docs/intro', - }, - { - label: 'Blog', - to: '/blog', + to: '/#download', }, ], }, + // { + // title: 'Learn More', + // items: [ + // { + // label: 'Docs', + // to: '/docs/intro', + // }, + // { + // label: 'Blog', + // to: '/blog', + // }, + // ], + // }, { title: 'Social', items: [ { - label: 'Twitter', - href: 'https://twitter.com/kibisis_wallet', + label: 'X, formerly Twitter', + href: X_LINK, }, ], }, @@ -173,6 +200,14 @@ const config = { label: 'GitHub', href: GITHUB_LINK, }, + { + label: 'Report a bug', + href: REPORT_A_BUG_LINK, + }, + { + label: 'Suggest a feature', + href: SUGGEST_A_FEATURE_LINK, + }, ], }, { @@ -185,7 +220,7 @@ const config = { ], }, ], - copyright: `Developed with โค๏ธ by Agora Labs. Licensed under GPL-2.0.`, + style: 'dark', }, prism: { theme: lightCodeTheme, @@ -194,7 +229,7 @@ const config = { }), title: TITLE, trailingSlash: false, - url: 'https://kibis.is', + url: KIBISIS_LINK, }; module.exports = config; diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx index c8b3eab..f05fbe7 100644 --- a/src/components/Carousel/Carousel.tsx +++ b/src/components/Carousel/Carousel.tsx @@ -84,6 +84,7 @@ const Carousel: FC = ({ items }: IProps) => { ); }} showStatus={false} + swipeable={false} useKeyboardArrows={true} > {items.map(({ children }) => children)} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 43b7348..3f3d437 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -10,27 +10,42 @@ import styles from './styles.module.scss'; const Header: FC = () => { return (
- {/*title*/} -
-

- The AVM utility wallet -

+
+ {/*title*/} +
+

+ The AVM utility wallet +

-

- A wallet that is not just for DeFi, but also focuses on utility. -

+

+ A wallet that is not just for DeFi, but also focuses on utility. +

+
+ + {/*image*/} +
+ +
- {/*image*/} -
- + {/*attribution*/} +
+

+ Image by{` `} + + Freepik + +

); diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss index fb4f4a1..524ff9d 100644 --- a/src/components/Header/styles.module.scss +++ b/src/components/Header/styles.module.scss @@ -2,12 +2,33 @@ @import "../../styles/mixins"; @import "../../styles/variables"; +.attribution-container { + align-items: center; + display: flex; + justify-content: flex-end; + padding: 0.5rem; + @include mobile-only { + display: none; + } +} + .container { display: flex; flex: 1; padding: 2rem 0; } +.content-container { + align-items: center; + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 0 2rem; + @include tablet-and-up { + flex-direction: row; + } +} + .image { box-shadow: $screen-box-shadow; @include tablet-and-up { @@ -23,12 +44,13 @@ .text { color: text-color("light"); - &--title { - font-size: 2rem; - font-weight: 600; - @include tablet-and-up { - font-size: 4.5rem; - } + &--attribution { + background-color: #000; + color: text-color("dark"); + font-size: 1rem; + line-height: 1rem; + padding: 0.25rem; + margin: 0; } &--subtitle { @@ -37,6 +59,14 @@ font-size: 1.5rem; } } + + &--title { + font-size: 2rem; + font-weight: 600; + @include tablet-and-up { + font-size: 4.5rem; + } + } } .text-container { @@ -46,15 +76,13 @@ } .wrapper { - align-items: center; background-color: #f4f4f4; display: flex; flex-direction: column; height: calc(100vh - var(--ifm-navbar-height)); - padding: 0 2rem; + justify-content: space-between; @include tablet-and-up { background-image: url("/static/images/header_background.jpeg"); background-size: cover; - flex-direction: row; } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ae96ba8..cb471b1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,12 +12,10 @@ import Main from '@site/src/components/Main'; const IndexPage: FC = () => { const { siteConfig } = useDocusaurusContext(); + const description: string = `Step into a world where your digital assets become more than just holdings - Welcome to Kibisis, your ultimate utility wallet tailored to harness the true potential of your AVM assets. Beyond just a wallet, Kibisis is your passport to a world where digital assets become powerful tools.`; return ( - +
diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 0000000..57dc6dd --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,18 @@ +@import "./functions"; + +.footer-container { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; +} + +.footer-text { + color: text-color("dark"); + margin: 0; + + a { + color: primary-color("light"); + } +} diff --git a/src/styles/functions.scss b/src/styles/functions.scss index 8521965..f5f2387 100644 --- a/src/styles/functions.scss +++ b/src/styles/functions.scss @@ -8,3 +8,11 @@ @return #4A5568; } + +@function primary-color($theme) { + @if $theme != "light" { + @return var(--kb-primary-color-light); + } + + @return var(--kb-primary-color-dark); +} diff --git a/src/styles/global.scss b/src/styles/global.scss index fd74b9f..6c59dc4 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -23,7 +23,7 @@ :root { // overrides --ifm-color-content: var(--kb-text-color); - --ifm-color-primary: #8D029B; + --ifm-color-primary: var(--kb-primary-color-light); --ifm-color-primary-dark: #7B0285; --ifm-color-primary-darker: #66026F; --ifm-color-primary-darkest: #520159; @@ -37,6 +37,8 @@ --ifm-navbar-link-color: var(--kb-text-color); // custom + --kb-primary-color-dark: #E0B0FF; + --kb-primary-color-light: #8D029B; --kb-background-primary-color: #fff; --kb-background-accent-color: #f4f4f4; --kb-sub-text-color: rgba(255, 255, 255, 0.64); @@ -45,7 +47,7 @@ [data-theme='dark'] { // overrides - --ifm-color-primary: #E0B0FF; + --ifm-color-primary: var(--kb-primary-color-dark); --ifm-color-primary-dark: #C875FF; --ifm-color-primary-darker: #AF37FF; --ifm-color-primary-darkest: #9500F8; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 9f985c7..d0bd56b 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -20,3 +20,9 @@ $desktop-width: 1024px; @content; } } + +/* anchor */ + +//@mixin anchor-link-dark { +// +//} diff --git a/static/images/concept_001.svg b/static/images/concept_001.svg index ffcee67..f3ee398 100644 --- a/static/images/concept_001.svg +++ b/static/images/concept_001.svg @@ -1,107 +1,16 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + version="1.1" + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg"> + + + + + + + + + + diff --git a/static/images/concept_002.svg b/static/images/concept_002.svg index 8b2e1f4..d947dde 100644 --- a/static/images/concept_002.svg +++ b/static/images/concept_002.svg @@ -3,27 +3,14 @@ version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> - - - - - - - + + + + + + + + + + diff --git a/static/images/concept_003.svg b/static/images/concept_003.svg index 4409c35..e6d38ac 100644 --- a/static/images/concept_003.svg +++ b/static/images/concept_003.svg @@ -3,155 +3,16 @@ version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/static/images/developed_by_agora_labs_banner.svg b/static/images/developed_by_agora_labs_banner.svg new file mode 100644 index 0000000..ee9eeec --- /dev/null +++ b/static/images/developed_by_agora_labs_banner.svg @@ -0,0 +1,14 @@ + + + + +