feat(website): ecosystem page (#149)

* feat(website): ecosystem page layout * fix(website): ecosystem layout * feat(website): ecosystem page partners * fix(website): ecosystem page mobile layout * fix(website): image mobile pos, tabs scroll * fix(website): tabs overflow * fix(website): resolve comment * fix(website): add color to config * fix(website): change type with enum & refactor * fix(website): change types in data array * chore(website): remove unused imports * feat(website): add storybook * feat(website): use variables and update config * feat(website): storyblok init * fix(website): priority title block image * feat(website): get data from storyblok * fix(website): remove local partners data * fix(website): enums, interface, partner card * fix(website): revalidate data * fix(website): change card name font family * fix(website): revalidate data & format code * fix(website): storyblok init in exact page * fix(website): update img title block * fix(website): close burger menu after click * fi(website): img ecosystem fund page title block * fix(website): change img index page contact block * сhore(website): remove unused img * fix(website): add ecocystem link * fix(website): change icon height, link width * fix(website): storyblok data version * fix(website): use vercel_env for storyblok * fix(website): tabs border & overflow * fix(website): buttons apply block * fix(website): resolve requested comments * fix(website): resolve more requested comments * fix(website): resolve some more comments * fix(website): sbInit back into getStaticProps * fix(website): add new partner type * chore(website): remove unused async * chore(website): stop use unnecessary slug const * fix(website): storyblok data types * fix(website): filter & render filtered partners * chore: add missing new lines * fix(website): fix partner card image width * fix(website): move website link arrow card on partner card * ci: add storyblock token to build job * ci: use self-hosted runner --------- Signed-off-by: Jihad Hadj Husein <88910027+hadzhehsen@users.noreply.github.com> Co-authored-by: Oleg Shilov <me@olegshilov.com>
haqq-network · May 30, 2023 · ad08c7f · ad08c7f · vercel · May 30, 2023
1 parent feba769
commit ad08c7f
Show file tree

Hide file tree

Showing 37 changed files with 837 additions and 44 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,7 +13,7 @@ concurrency:
 jobs:
   test-and-lint:
     name: Test and Lint
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -36,8 +36,10 @@ jobs:
 
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     needs: test-and-lint
+    env:
+      STORYBLOK_ACCESS_TOKEN: ${{ secrets.STORYBLOK_ACCESS_TOKEN }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v3

diff --git a/apps/website/.gitignore b/apps/website/.gitignore
@@ -1 +1,4 @@
 .vscode
+
+# local env files
+.env*.local
diff --git a/apps/website/components/burger-menu/burger-menu.tsx b/apps/website/components/burger-menu/burger-menu.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ReactNode } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import Link from 'next/link';
 import {
   DiscordIcon,
@@ -15,15 +15,22 @@ import {
 } from '@haqq/website/ui-kit';
 import { SubscribeForm } from '@haqq/website/forms';
 
+interface NavLinkProps {
+  href: string;
+  isOutLink?: boolean;
+  onClick?: () => void;
+}
+
+type SocialLinkProps = Pick<NavLinkProps, 'href'> & {
+  icon: ReactNode;
+};
+
 function BurgerMenuNavLink({
   href,
   children,
   isOutLink = false,
-}: {
-  href: string;
-  children: ReactNode;
-  isOutLink?: boolean;
-}) {
+  onClick,
+}: PropsWithChildren<NavLinkProps>) {
   const additionalProps = isOutLink
     ? {
         target: '_blank',
@@ -34,6 +41,7 @@ function BurgerMenuNavLink({
     <Link
       href={href}
       className="text-[13px] leading-[20px] sm:text-[15px] sm:leading-[24px]"
+      onClick={onClick}
       {...additionalProps}
     >
       {children}
@@ -45,11 +53,7 @@ function BurgerMenuSocialLink({
   href,
   children,
   icon,
-}: {
-  href: string;
-  children: ReactNode;
-  icon: ReactNode;
-}) {
+}: PropsWithChildren<SocialLinkProps>) {
   return (
     <Link
       href={href}
@@ -64,7 +68,13 @@ function BurgerMenuSocialLink({
   );
 }
 
-export function BurgerMenu({ className }: { className?: string }) {
+export function BurgerMenu({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) {
   return (
     <div
       className={clsx(
@@ -73,10 +83,12 @@ export function BurgerMenu({ className }: { className?: string }) {
         // 'backdrop-blur transform-gpu',
         className,
       )}
+      onClick={onClick}
     >
       <div className="flex flex-col items-start space-y-[16px] mb-[60px] sm:mb-[80px]">
         <BurgerMenuNavLink href="/#about">About</BurgerMenuNavLink>
         <BurgerMenuNavLink href="/ecosystem-fund">Fund</BurgerMenuNavLink>
+        <BurgerMenuNavLink href="/ecosystem">Ecosystem</BurgerMenuNavLink>
         {/* <BurgerMenuNavLink href="/#technology">Technology</BurgerMenuNavLink> */}
         <BurgerMenuNavLink href="/#developers">Developers</BurgerMenuNavLink>
         <BurgerMenuNavLink href="https://docs.haqq.network" isOutLink>

diff --git a/apps/website/components/footer/footer.tsx b/apps/website/components/footer/footer.tsx
@@ -95,6 +95,7 @@ export function Footer() {
             <nav className="flex flex-col space-y-[8px] sm:space-y-[12px]">
               <FooterNavLink href="/#about">About</FooterNavLink>
               <FooterNavLink href="/ecosystem-fund">Fund</FooterNavLink>
+              <FooterNavLink href="/ecosystem">Ecosystem</FooterNavLink>
               {/* <FooterNavLink href="#technology">Technology</FooterNavLink> */}
               <FooterNavLink href="/#developers">Developers</FooterNavLink>
               <FooterNavLink href="https://docs.haqq.network" isOutLink>

diff --git a/apps/website/components/header/header.tsx b/apps/website/components/header/header.tsx
@@ -63,6 +63,7 @@ export function Header() {
         <nav className="flex-row space-x-6 items-center mr-[80px] hidden lg:flex">
           <HeaderNavLink href="/#about">About</HeaderNavLink>
           <HeaderNavLink href="/ecosystem-fund">Fund</HeaderNavLink>
+          <HeaderNavLink href="/ecosystem">Ecosystem</HeaderNavLink>
           {/* <HeaderNavLink href="/#technology">Technology</HeaderNavLink> */}
           <HeaderNavLink href="/#developers">Developers</HeaderNavLink>
           <HeaderNavLink href="https://docs.haqq.network" isOutLink>
@@ -86,7 +87,10 @@ export function Header() {
       {isBurgerMenuOpen && (
         <Fragment>
           <ScrollLock isActive />
-          <BurgerMenu className="fixed lg:hidden w-full sm:w-[468px] top-[62px] sm:top-[71px] h-[calc(100vh-62px)] sm:h-[calc(100vh-71px)] right-0 z-40" />
+          <BurgerMenu
+            onClick={handleMenuOpen}
+            className="fixed lg:hidden w-full sm:w-[468px] top-[62px] sm:top-[71px] h-[calc(100vh-62px)] sm:h-[calc(100vh-71px)] right-0 z-40"
+          />
           <div
             onClick={handleMenuOpen}
             className="hidden sm:block lg:hidden absolute w-full right-0 -z-0 bg-black/50 top-[62px] sm:top-[71px] h-[calc(100vh-62px)] sm:h-[calc(100vh-71px)]"

diff --git a/apps/website/next.config.mjs b/apps/website/next.config.mjs
@@ -32,5 +32,8 @@ export default withNx(
         },
       ];
     },
+    images: {
+      domains: ['a.storyblok.com'],
+    },
   }),
 );
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
@@ -15,6 +15,7 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
   // Use the layout defined at the page level, if available
   if (Component.getLayout) {

diff --git a/apps/website/pages/ecosystem.tsx b/apps/website/pages/ecosystem.tsx
@@ -0,0 +1,68 @@
+import { getStoryblokApi, storyblokInit, apiPlugin } from '@storyblok/react';
+
+interface PartnerData {
+  _uid: string;
+  name: string;
+  logo: {
+    filename: string;
+  };
+  link: string;
+  description: string;
+  type: string;
+  status: string;
+}
+
+interface StoryblokData {
+  story: {
+    content: {
+      body: {
+        columns: PartnerData;
+      };
+    };
+  };
+}
+
+function mapStoryblockDataToPartners(data: StoryblokData) {
+  return data.story.content.body[0].columns.map((el: PartnerData) => {
+    return {
+      _uid: el._uid,
+      name: el.name,
+      logoUrl: el.logo.filename,
+      link: el.link,
+      description: el.description,
+      type: el.type,
+      status: el.status,
+    };
+  });
+}
+
+export { EcosystemPage as default } from '@haqq/website/ecosystem-page';
+
+export async function getStaticProps() {
+  let data;
+
+  storyblokInit({
+    accessToken: process.env.STORYBLOK_ACCESS_TOKEN,
+    use: [apiPlugin],
+  });
+
+  try {
+    const storyblokApi = getStoryblokApi();
+    const response = await storyblokApi.get('cdn/stories/partners', {
+      version: process.env.VERCEL_ENV === 'production' ? 'published' : 'draft',
+    });
+    data = response?.data;
+  } catch (error) {
+    console.error(error);
+  }
+
+  const partners = mapStoryblockDataToPartners(data);
+
+  return {
+    props: {
+      partners: partners ?? [],
+      key: data?.story?.id ?? false,
+    },
+    revalidate: 1800,
+  };
+}
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
@@ -18,10 +18,12 @@ module.exports = {
         'haqq-border': '#FFFFFF3D',
         'haqq-black': '#0D0D0E',
         'haqq-orange': '#EC5728',
+        'haqq-light-orange': '#FF8D69',
         'haqq-blue': '#091D53',
         'haqq-seaweed': '#157C83',
         'haqq-bigfoot-feet': '#E98C50',
         'haqq-azure': '#ECFEFE',
+        'haqq-gold': '#E3A13F',
       },
       fontFamily: {
         serif: ['var(--font-clash)'],

diff --git a/libs/website/brand-assets-page/tsconfig.lib.json b/libs/website/brand-assets-page/tsconfig.lib.json
@@ -2,9 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
   "files": [
     "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
@@ -21,10 +19,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/libs/website/ecosystem-fund-page/src/lib/apply-block/apply-block.tsx b/libs/website/ecosystem-fund-page/src/lib/apply-block/apply-block.tsx
@@ -11,9 +11,7 @@ export function ApplyBlock() {
         backgroundImage: `url(${bgImgData.src})`,
       }}
     >
-      <Text className="text-haqq-bigfoot-feet">
-        Grants and Investment Program
-      </Text>
+      <Text className="text-haqq-gold">Grants and Investment Program</Text>
       <Heading className="mt-[8px]">
         Apply now for the HAQQ Ecosystem Fund, and let's{' '}
         <br className="hidden absolute top-0 lg:block" />
@@ -24,9 +22,9 @@ export function ApplyBlock() {
         target="_blank"
         rel={'noopener noreferrer'}
       >
-        <Button variant={2} className="uppercase mt-[24px]">
-          Apply now
-        </Button>
+        <div className="mt-[24px]">
+          <Button variant={2}>Apply now</Button>
+        </div>
       </Link>
     </section>
   );

diff --git a/libs/website/ecosystem-fund-page/tsconfig.lib.json b/libs/website/ecosystem-fund-page/tsconfig.lib.json
@@ -2,9 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
   "files": [
     "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
@@ -21,10 +19,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/libs/website/ecosystem-page/.babelrc b/libs/website/ecosystem-page/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/website/ecosystem-page/.eslintrc.json b/libs/website/ecosystem-page/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/website/ecosystem-page/README.md b/libs/website/ecosystem-page/README.md
@@ -0,0 +1,7 @@
+# website-ecosystem-page
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test website-ecosystem-page` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/website/ecosystem-page/jest.config.ts b/libs/website/ecosystem-page/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'website-ecosystem-page',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/libs/website/ecosystem-page',
+};
diff --git a/libs/website/ecosystem-page/project.json b/libs/website/ecosystem-page/project.json
@@ -0,0 +1,30 @@
+{
+  "name": "website-ecosystem-page",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/website/ecosystem-page/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/website/ecosystem-page/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/website/ecosystem-page/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}