Feat/rbcn2 (#113)

* feat: add env.example

* tooling: add lint config files

* feat: update pkgs & run lint format

* chore: modify logo img file format

* style: run lint format

* migrate: move unused css files into old directory

* style: add typo css

* feat: add main sections components

* tooling: add pkgs and update tsnconfigs

* feat: update types with npm run codegen

* feat: run lint for banner components

* feat: update types

* feat: update card components styles

* enhance: add rules to i18config

* rename: modify file name casing

* feat: split isValidTicket(dateTime)

* chore: sync renamed component import

* feat: add views components

* chore: add export index.ts

* chore: cleanups

* style: update vuetify config

* feat: update contenful helper method and comment unused content

* feat: add vitest setup

* feat: update router index

* feat: add infinite spinner component

* feat: add ticket card component

* migrate: static -> contentful template rendering

* style: update navbar

* style: update page section

* style: remove old css imports

* chore: cleanups

* fix: sync import name

* feat: update components index.ts

* chore: modify file name casing

* enhance: update genentries for contentful

* chore: add fallback whitebg

* chore: update components.d.ts

* style: fix robocon icon color

* chore: add ticketlink

* enhance: click to router link & card bg update

* style: add section title css

* feat: bulk update for style changes

* feat: bulk update for style changes

* chore: run lint

Author: jalyn-lee

.env.example

@@ -0,0 +1,10 @@
+PUBLIC_APP_KEY=
+PRIVATE_APP_KEY=
+BASE_URL=https://api.contentful.com
+
+# Required for setup script only
+CMA_TOKEN= # You can obtain this token from the contentful web app
+ORG_ID= # Your contentful organisation id
+SPACE_ID= # Your contentful space id
+ENVIRONMENT_ID= # Your contentul enviornment name
+HOSTED_APP_URL= # Where your app will be hosted

.eslintignore

@@ -0,0 +1,10 @@
+{
+  "overrides": [
+    {
+      "files": [ "src/**/*.{js,ts,vue}" ],
+      "rules": {
+        "quotes": [ 2, "single" ]
+      }
+    }
+  ]
+}

.eslintrc.js

@@ -1,37 +1,80 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
+  "root": true,
+  "env": {
+    "node": true
   },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
+  "plugins": [
+    "sonarjs",
+    "unused-imports",
+    "sort-exports"
   ],
-  parserOptions: {
-    ecmaVersion: 2020
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020
   },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/no-unused-components': 'warn',
-    'vue/no-multiple-template-root': 'off',
-    'no-unused-vars': 'warn',
-    'space-before-function-paren': ['warn', 'never'],
-    indent: [2, 2],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "vue/no-unused-components": "warn",
+    "vue/no-multiple-template-root": "off",
+    "no-unused-vars": "warn",
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        "ignores": [
+          "default"
+        ]
+      }
+    ],
+    "space-before-function-paren": [
+      "warn",
+      "never"
+    ],
+    "indent": [
+      2,
+      2
+    ],
     "sort-exports/sort-exports": [
       "error",
-      { "sortDir": "asc", "ignoreCase": true, "sortExportKindFirst": "type" }
+      {
+        "sortDir": "asc",
+        "ignoreCase": true,
+        "sortExportKindFirst": "type"
+      }
     ],
     "sort-imports": [
       "error",
       {
         "ignoreCase": false,
         "ignoreDeclarationSort": true,
         "ignoreMemberSort": false,
-        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "memberSyntaxSortOrder": [
+          "none",
+          "all",
+          "multiple",
+          "single"
+        ],
         "allowSeparatedGroups": true
       }
     ],
-  }
-}
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".vue",
+        ".js"
+      ]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        // use a glob pattern
+        "project": "packages/*/tsconfig.json"
+      }
+    }
+  },
+}

.prettierignore

@@ -0,0 +1,3 @@
+src/assets
+.d.ts
+registerServiceWorker.js

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "prettier.semi": false
+}

components.d.ts

@@ -7,48 +7,38 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Banner: typeof import('./src/components/banners/Banner.vue')['default']
-    Banner404: typeof import('./src/components/banners/Banner404.vue')['default']
-    BannerComingSoon: typeof import('./src/components/banners/BannerComingSoon.vue')['default']
-    BannerTwo: typeof import('./src/components/banners/BannerTwo.vue')['default']
+    BaseBanner: typeof import('./src/components/banners/custom/BaseBanner.vue')['default']
     BaseIcon: typeof import('./src/components/icons/BaseIcon.vue')['default']
     ChevronIcon: typeof import('./src/components/icons/ChevronIcon.vue')['default']
     ComingSoonBanner: typeof import('./src/components/banners/ComingSoonBanner.vue')['default']
-    copy: typeof import('./src/components/cards/EventCards copy.vue')['default']
     EventCard: typeof import('./src/components/cards/EventCard.vue')['default']
-    EventCards: typeof import('./src/components/cards/EventCards.vue')['default']
     GlobeIcon: typeof import('./src/components/icons/GlobeIcon.vue')['default']
     GlobeRBCN: typeof import('./src/components/icons/GlobeRBCN.vue')['default']
+    InfiniteSpinner: typeof import('./src/components/spinners/InfiniteSpinner.vue')['default']
     LinkIcon: typeof import('./src/components/icons/LinkIcon.vue')['default']
-    LocaleToggler: typeof import('./src/components/blocks/LocaleToggler.vue')['default']
     Logo: typeof import('./src/components/blocks/Logo.vue')['default']
     MainBanner: typeof import('./src/components/banners/custom/MainBanner.vue')['default']
     Navbar: typeof import('./src/components/navigation/Navbar.vue')['default']
-    NavMobile: typeof import('./src/components/NavMobile.vue')['default']
     NewsBanner: typeof import('./src/components/NewsBanner.vue')['default']
     NewTabIcon: typeof import('./src/components/icons/NewTabIcon.vue')['default']
     NotFoundBanner: typeof import('./src/components/banners/NotFoundBanner.vue')['default']
-    NotFouondBanner: typeof import('./src/components/banners/NotFouondBanner.vue')['default']
     PageFooter: typeof import('./src/components/footer/PageFooter.vue')['default']
     PageSection: typeof import('./src/components/sections/PageSection.vue')['default']
     PreviousTalks: typeof import('./src/components/PreviousTalks.vue')['default']
     RobotIcon: typeof import('./src/components/icons/RobotIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Settings: typeof import('./src/components/blocks/Settings.vue')['default']
     SpeakerCards: typeof import('./src/components/cards/SpeakerCards.vue')['default']
-    SponsorCards: typeof import('./src/components/cards/SponsorCards.vue')['default']
-    SponsorGrid: typeof import('./src/components/cards/SponsorGrid.vue')['default']
+    SponsorCard: typeof import('./src/components/cards/SponsorCard.vue')['default']
     SponsorItem: typeof import('./src/components/SponsorItem.vue')['default']
     Sponsors: typeof import('./src/components/Sponsors.vue')['default']
     TabBox: typeof import('./src/components/TabBox.vue')['default']
     Talks: typeof import('./src/components/Talks.vue')['default']
     Talks2023: typeof import('./src/components/Talks2023.vue')['default']
     Talks24: typeof import('./src/components/Talks24.vue')['default']
-    ThemeToggler: typeof import('./src/components/blocks/ThemeToggler.vue')['default']
+    TicketCard: typeof import('./src/components/tickets/TicketCard.vue')['default']
     TicketItem: typeof import('./src/components/TicketItem.vue')['default']
     Timeline: typeof import('./src/components/Timeline.vue')['default']
-    ToggleDirection: typeof import('./src/components/blocks/ToggleDirection.vue')['default']
     Tutorials24: typeof import('./src/components/Tutorials24.vue')['default']
     Workshops24: typeof import('./src/components/Workshops24.vue')['default']
   }

getContentfulEnvironment.ts

@@ -0,0 +1,27 @@
+import { strict as assert } from "assert";
+import { createClient, type Environment } from "contentful-management";
+import { config } from "dotenv";
+
+config({ path: ".env.local" });
+
+const {
+  VITE_CONTENTFUL_ACCESS_TOKEN,
+  VITE_CONTENTFUL_SPACE_ID,
+  VITE_CONTENTFUL_ENVIRONMENT_ID,
+} = process.env;
+
+assert(VITE_CONTENTFUL_ACCESS_TOKEN);
+assert(VITE_CONTENTFUL_SPACE_ID);
+assert(VITE_CONTENTFUL_ENVIRONMENT_ID);
+
+const getContentfulEnvironment = (): Promise<Environment> => {
+  const contentfulClient = createClient({
+    accessToken: VITE_CONTENTFUL_ACCESS_TOKEN,
+  });
+
+  return contentfulClient
+    .getSpace(VITE_CONTENTFUL_SPACE_ID)
+    .then((space) => space.getEnvironment(VITE_CONTENTFUL_ENVIRONMENT_ID));
+};
+
+module.exports = getContentfulEnvironment;

lint-staged.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  '*.{js,jsx,vue,ts,tsx}': 'vue-cli-service lint'
-}
+  "{src,test}/**/*.ts": ["prettier --write"],
+};