feat: update concept content (#9)

* ci: add composite action to install dependencies

* ci: use concurrent jobs for pr checks workflow and use cached dependencies

* fix: remove swipe on feature carousel

* feat: update site description

* feat: add attribution to header image

* feat: add agora labs banner logo to the footer

* feat: add new concept images

* feat: add attribution to footer

.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

.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

.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

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Release
+name: "Release"
 
 on:
   push:

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

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: `
+<div class="footer-container">
+    <p class="footer-text">
+        Licensed under <a href="${GITHUB_LINK}/blob/main/LICENSE" target="_blank">GPL-2.0</a>.
+    </p>
+    <p class="footer-text">
+        Icons provided by <a href="https://www.flaticon.com/" target="_blank">flaticon</a>.
+    </p>
+</div>
+        `,
+        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 <a href="${GITHUB_LINK}/blob/main/LICENSE" target="_blank">GPL-2.0</a>.`,
+        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;

src/components/Carousel/Carousel.tsx

@@ -84,6 +84,7 @@ const Carousel: FC<IProps> = ({ items }: IProps) => {
         );
       }}
       showStatus={false}
+      swipeable={false}
       useKeyboardArrows={true}
     >
       {items.map(({ children }) => children)}