feat: updating links

.github/workflows/ci.yml

@@ -79,7 +79,7 @@ jobs:
   client-build:
     name: Client
     runs-on: ubuntu-latest
-    container: node:14-buster
+    container: node:16-buster
     timeout-minutes: 15
     defaults:
       run:
@@ -90,13 +90,13 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Installling dependencies
-        run: yarn install
+        run: npm install
 
       - name: Lint
-        run: yarn lint
+        run: npm run lint
 
       - name: Build
-        run: yarn build
+        run: npm run build
         env:
           VITE_SENTRY_DSN: https://examplePublicKey@o0.ingest.sentry.io/0
           VITE_NODE_ENV: development

.github/workflows/pr.yml

@@ -8,7 +8,7 @@ jobs:
   client-build:
     name: Client
     runs-on: ubuntu-latest
-    container: node:14-buster
+    container: node:16-buster
     timeout-minutes: 15
     defaults:
       run:
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Installling dependencies
-        run: yarn install
+        run: npm install
 
       - name: Lint
         run: npx eslint --ext .svelte,.js,.ts --ignore-path .gitignore .
@@ -28,7 +28,7 @@ jobs:
         run: npx prettier --check --ignore-path .gitignore --plugin-search-dir=. "./**/*.(ts|json|js|svelte)"
 
       - name: Build
-        run: yarn build
+        run: npm run build
         env:
           VITE_SENTRY_DSN: https://examplePublicKey@o0.ingest.sentry.io/0
           VITE_NODE_ENV: development

client/.nvmrc

@@ -1 +1 @@
-v14.17.4
+v16.13

client/README.md

@@ -21,15 +21,15 @@ $ yarn build
 
 | Name | Version | Type |
 | --- | --- | --- |
-| @sveltejs/kit | `1.0.0-next.129` | Framework |
+| @sveltejs/kit | `1.0.0-next.195` | Framework |
-| svelte | `3.38.3` | Framework |
+| svelte | `3.44.1` | Framework |
-| typescript | `4.3.5` | Static type language |
+| typescript | `4.4.4` | Static type language |
-| svelte-i18n | `3.3.9` | i18n Library |
+| svelte-i18n | `3.3.13` | i18n Library |
-| svelte-windicss-preprocess | `4.0.12` | CSS Library |
+| svelte-windicss-preprocess | `4.1.5` | CSS Library |
 | @fontsource/fira-mono | `4.5.0` | Webfont |
 | @fontsource/rubik | `4.5.0` | Webfont |
 | dotenv | `10.0.0` | Utils |
-| @sentry/browser | `6.9.0` | Logging |
+| @sentry/browser | `6.14.1` | Logging |
 
 ## Directory structure
 

client/package.json

@@ -20,29 +20,30 @@
     "format": "prettier --write --ignore-path .gitignore --plugin-search-dir=. \"./**/*.(ts|json|js|svelte)\""
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "1.0.0-next.13",
+    "@sveltejs/adapter-static": "1.0.0-next.21",
-    "@sveltejs/kit": "1.0.0-next.129",
+    "@sveltejs/kit": "1.0.0-next.195",
-    "@typescript-eslint/eslint-plugin": "4.29.0",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
-    "@typescript-eslint/parser": "4.29.0",
+    "@typescript-eslint/parser": "5.3.0",
-    "cssnano": "5.0.7",
+    "cssnano": "5.0.10",
-    "eslint": "7.32.0",
+    "eslint": "8.2.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-svelte3": "3.2.0",
+    "eslint-plugin-svelte3": "3.2.1",
-    "prettier": "2.3.2",
+    "prettier": "2.4.1",
-    "prettier-plugin-svelte": "2.3.1",
+    "prettier-plugin-svelte": "2.4.0",
-    "svelte": "3.41.0",
+    "sass": "^1.43.4",
-    "svelte-check": "2.2.4",
+    "svelte": "3.44.1",
-    "svelte-preprocess": "4.7.4",
+    "svelte-check": "2.2.8",
-    "svelte-windicss-preprocess": "4.0.12",
+    "svelte-preprocess": "4.9.8",
-    "tslib": "2.3.0",
+    "svelte-windicss-preprocess": "4.1.5",
-    "typescript": "4.3.5"
+    "tslib": "2.3.1",
+    "typescript": "4.4.4"
   },
   "dependencies": {
     "@fontsource/fira-mono": "4.5.0",
     "@fontsource/rubik": "4.5.0",
-    "@sentry/browser": "6.10.0",
+    "@sentry/browser": "6.14.1",
     "dotenv": "10.0.0",
-    "ohmyfetch": "^0.2.0",
+    "ohmyfetch": "0.4.5",
-    "svelte-i18n": "3.3.9"
+    "svelte-i18n": "3.3.13"
   }
 }

client/src/routes/api.svelte

@@ -40,7 +40,7 @@
   </Notice>
 </section>
 
-<section>
+<section class="api_page">
   <h1>{$_('api.get.title')}</h1>
   <h2>{$_('api.get.random.title')}</h2>
   <p>{$_('api.get.random.body')}</p>
@@ -64,14 +64,21 @@
   </Codeblock>
 </section>
 
-<style>
+<style lang="scss">
   h1 {
-    @apply text-4xl font-bold py-4;
+    @apply text-4xl;
+    @apply font-bold;
+    @apply py-4;
   }
   h2 {
-    @apply text-2xl font-bold pt-6 pb-1;
+    @apply text-2xl;
+    @apply font-bold;
+    @apply pt-6;
+    @apply pb-1;
   }
   p { 
-    @apply text-base opacity-80 py-2;
+    @apply text-base;
+    @apply opacity-80;
+    @apply py-2;
   }
 </style>

client/src/routes/guide.svelte

@@ -15,7 +15,7 @@
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>
 
-<section>
+<section class="guide_page">
   <h1>{$_('navigation.guide')}</h1>
   <p>
     {$_('guide.introduction.1')}
@@ -23,18 +23,18 @@
   </p>
 </section>
 
-<section>
+<section class="guide_page">
   <h2>{$_('guide.direct.1')} <code>&lt;img&gt;</code> {$_('guide.direct.2')}</h2>
-  <Codeblock>&lt;img src="https://jokesbapak2.herokuapp.com/v1/" /&gt;</Codeblock>
+  <Codeblock>&lt;img src="https://jokesbapak2.herokuapp.com/" /&gt;</Codeblock>
 </section>
 
-<section>
+<section class="guide_page">
   <h2>{$_('guide.fetch.1')}</h2>
   <p>{$_('guide.fetch.2')}</p>
   <Codeblock>
-    fetch("https://jokesbapak2.herokuapp.com/v1/")<br />
+    fetch("https://jokesbapak2.herokuapp.com/")<br />
-    &nbsp;&nbsp;.then(response => response.text())<br />
+    &nbsp;&nbsp;.then(response =&gt; response.text())<br />
-    &nbsp;&nbsp;.then(data => console.log(data))<br />
+    &nbsp;&nbsp;.then(data =&gt; console.log(data))<br />
     <br />
     // {$_('guide.fetch.3')}<br />
     <br />
@@ -42,21 +42,31 @@
   </Codeblock>
 </section>
 
-<style>
+<style lang="scss">
   p {
-    @apply text-base py-2 'lg:w-2/3';
+    @apply text-base;
+    @apply py-2;
+    @apply lg\:w-2\/3;
   }
+
   h1 {
-    @apply text-4xl font-bold py-2;
+    @apply text-4xl;
+    @apply font-bold;
+    @apply py-2;
   }
+
   h2 { 
-    @apply text-2xl font-bold py-2;
+    @apply text-2xl;
+    @apply font-bold;
+    @apply py-2;
   }
+
   a { 
-    /* This would probably be an error if you installed WindiCSS extension on VSCode */
+    @apply hover\:underline;
-    @apply 'hover:underline' 'dark:text-dodger-200' text-dodger-700;
+    @apply dark\:text-dodger-200;
+    @apply text-dodger-700;
   }
   section {
-    @apply pt-6;
+    @apply pt-6
   }
 </style>

client/src/routes/index.svelte

@@ -43,17 +43,11 @@
       <div class="max-w-xs mx-auto">
         <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
       </div>
-      <Codeblock>$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
+      <Codeblock>$ curl -XGET 'https://jokesbapak2.herokuapp.com/'</Codeblock>
       <p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">
-        {$_('home.more.1')} <span on:click={() => goto('/guide')}>{$_('navigation.guide')}</span>
+        {$_('home.more.1')} <span class="hover:underline cursor-pointer" on:click={() => goto('/guide')}>{$_('navigation.guide')}</span>
-        {$_('home.more.2')} <span on:click={() => goto('/api')}>{$_('navigation.api')}</span>
+        {$_('home.more.2')} <span class="hover:underline cursor-pointer" on:click={() => goto('/api')}>{$_('navigation.api')}</span>
       </p>
     </div>
   </div>
 </section>
-
-<style>
-  span {
-    @apply 'hover:underline' cursor-pointer;
-  }
-</style>

client/src/routes/why.svelte

@@ -13,12 +13,12 @@
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>
 
-<section>
+<section class="why_page">
   <h1 id="why-does-this-project-exists">{$_('why.exists.title')}</h1>
   <p>{$_('why.exists.body.1')} {$_('why.exists.body.2')} {$_('why.exists.body.3')} {$_('why.exists.body.4')}</p>
   <p>{$_('why.exists.body.5')} {$_('why.exists.body.6')}</p>
 </section>
-<section>
+<section class="why_page">
   <h1 id="can-i-submit-my-dad-joke">{$_('why.submit.title')}</h1>
   <p>
     {$_('why.submit.body.1')}
@@ -29,7 +29,7 @@
     {$_('why.submit.body.6')}
   </p>
 </section>
-<section>
+<section class="why_page">
   <h1 id="can-i-contribute">{$_('why.contribute.title')}</h1>
   <p>
     {$_('why.contribute.body.1')}
@@ -38,7 +38,7 @@
     {$_('why.contribute.body.4')}
   </p>
 </section>
-<section>
+<section class="why_page">
   <h1 id="other-inquiries">{$_('why.inquiries.title')}</h1>
   <p>
     {$_('why.inquiries.body.1')}
@@ -46,18 +46,25 @@
   </p>
 </section>
 
-<style>
+<style lang="scss">
+.why_page {
   p {
-    @apply text-base py-2 'lg:w-2/3';
+    @apply text-base;
-  }
+    @apply py-2;
+    @apply lg\:w-2\/3;
+    }
   h1 {
-    @apply text-3xl font-bold py-2;
+    @apply text-3xl;
+    @apply font-bold;
+    @apply py-2;
   }
   a {
-    /* This would probably be an error if you installed WindiCSS extension on VSCode */
+    @apply hover\:underline;
-    @apply 'hover:underline' 'dark:text-dodger-200' text-dodger-700;
+    @apply dark\:text-dodger-200;
+    @apply text-dodger-700;
   }
   section {
     @apply pt-6;
   }
+}
 </style>