ci(lint): configure GitHub Actions for linting (#10)

ci(lint): configure GitHub Actions for linting

.eslintignore

@@ -0,0 +1,14 @@
+.cache
+build
+node_modules
+coverage
+dist
+
+# Remix
+public/build
+
+# Remix with Deno
+server.ts
+
+# Next.js
+.next/

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('pkode/dist/config/eslintrc')

.github/workflows/deploy.yml

@@ -3,11 +3,11 @@ on:
   push:
     branches: [main]
   schedule:
-    - cron: "0 9 * * *"
+    - cron: '0 9 * * *'
 
 jobs:
   deploy:
-    name: 🤸🏽 build & deploy
+    name: 🤸🏽 Build & Deploy
     if: github.repository == 'senar-ai/web'
     runs-on: ubuntu-latest
     permissions:
@@ -30,13 +30,13 @@ jobs:
 
       - name: 📂 Make deno dir
         run: mkdir -p ./deno
-      
+
       - name: 📝 Copy Remix build files into output dir
         run: cp -R ./{build,public} ./deno
 
       - name: 🚛 Deploy to Deno Deploy
         uses: denoland/deployctl@v1
         with:
           project: senarai # the name of the project on Deno Deploy
-          entrypoint: "./build/index.js" # the entrypoint to deploy
-          root: "./deno" # the root directory of the build assets
+          entrypoint: './build/index.js' # the entrypoint to deploy
+          root: './deno' # the root directory of the build assets

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: 🧪 Lint & Test
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  deploy:
+    name: 🔬 Lint
+    if: github.repository == 'senar-ai/web'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🐑 Clone repository
+        uses: actions/checkout@v3
+
+      - name: 🦀 Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: ⛓ Install Node deps
+        uses: bahmutov/npm-install@v1
+
+      - name: 🦕 Setup Deno
+        uses: denoland/setup-deno@v1
+
+      - name: 🔬 Lint
+        run: npm run lint

.prettierignore

@@ -0,0 +1,14 @@
+.cache
+build
+node_modules
+coverage
+dist
+
+# Remix
+public/build
+
+# Next.js
+.next/
+
+# Senarai Data
+app/data/*.json

.prettierrc.js

@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = require('pkode/dist/config/prettierrc')

.vscode/extensions.json

@@ -1,5 +1,3 @@
 {
-  "recommendations": [
-    "denoland.vscode-deno"
-  ]
-}
+  "recommendations": ["denoland.vscode-deno"]
+}

README.md

@@ -12,20 +12,29 @@ npx create-remix@latest --template deno
 
 ## Managing dependencies
 
-Read about [how we recommend to manage dependencies for Remix projects using Deno](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md).
+Read about
+[how we recommend to manage dependencies for Remix projects using Deno](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md).
 
 - ✅ You should use `npm` to install NPM packages
+
   ```sh
   npm install react
   ```
+
   ```ts
   import { useState } from 'react'
   ```
-- ✅ You may use inlined URL imports or [deps.ts](https://deno.land/manual/examples/manage_dependencies#managing-dependencies) for Deno modules.
+
+- ✅ You may use inlined URL imports or
+  [deps.ts](https://deno.land/manual/examples/manage_dependencies#managing-dependencies)
+  for Deno modules.
+
   ```ts
   import { copy } from 'https://deno.land/[email protected]/streams/conversion.ts'
   ```
-- ❌ Do not use [import maps](https://deno.land/manual/linking_to_external_code/import_maps).
+
+- ❌ Do not use
+  [import maps](https://deno.land/manual/linking_to_external_code/import_maps).
 
 ## Development
 
@@ -39,11 +48,14 @@ This starts your app in development mode, rebuilding assets on file changes.
 
 ### Type hints
 
-This template provides type hinting to VS Code via a [dedicated import map](./.vscode/resolve_npm_imports.json).
+This template provides type hinting to VS Code via a
+[dedicated import map](./.vscode/resolve_npm_imports.json).
 
-To get types in another editor, use an extension for Deno that supports import maps and point your editor to `./.vscode/resolve_npm_imports.json`.
+To get types in another editor, use an extension for Deno that supports import
+maps and point your editor to `./.vscode/resolve_npm_imports.json`.
 
-For more, see [our decision doc for interop between Deno and NPM](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md#vs-code-type-hints).
+For more, see
+[our decision doc for interop between Deno and NPM](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md#vs-code-type-hints).
 
 ## Production
 
@@ -66,40 +78,47 @@ Building the Deno app (`npm run build`) results in two outputs:
 - `build/` (server bundle)
 - `public/build/` (browser bundle)
 
-You can deploy these bundles to any host that runs Deno, but here we'll focus on deploying to [Deno Deploy](https://deno.com/deploy).
+You can deploy these bundles to any host that runs Deno, but here we'll focus on
+deploying to [Deno Deploy](https://deno.com/deploy).
 
 ## Setting up Deno Deploy
 
 1. [Sign up](https://dash.deno.com/signin) for Deno Deploy.
 
 2. [Create a new Deno Deploy project](https://dash.deno.com/new) for this app.
 
-3. Replace `<your deno deploy project>` in the `deploy` script in `package.json` with your Deno Deploy project name:
+3. Replace `<your deno deploy project>` in the `deploy` script in `package.json`
+   with your Deno Deploy project name:
 
-```json
-{
-  "scripts": {
-    "deploy": "deployctl deploy --project=<your deno deploy project> --include=.cache,build,public ./build/index.js"
-  }
-}
-```
+   ```json
+   {
+     "scripts": {
+       "deploy": "deployctl deploy --project=<your deno deploy project> --include=.cache,build,public ./build/index.js"
+     }
+   }
+   ```
 
-4. [Create a personal access token](https://dash.deno.com/account) for the Deno Deploy API and export it as `DENO_DEPLOY_TOKEN`:
+4. [Create a personal access token](https://dash.deno.com/account) for the Deno
+   Deploy API and export it as `DENO_DEPLOY_TOKEN`:
 
-```sh
-export DENO_DEPLOY_TOKEN=<your Deno Deploy API token>
-```
+   ```sh
+   export DENO_DEPLOY_TOKEN=<your Deno Deploy API token>
+   ```
 
-You may want to add this to your `rc` file (e.g. `.bashrc` or `.zshrc`) to make it available for new terminal sessions, but make sure you don't commit this token into `git`.
-If you want to use this token in GitHub Actions, set it as a GitHub secret.
+   You may want to add this to your `rc` file (e.g. `.bashrc` or `.zshrc`) to
+   make it available for new terminal sessions, but make sure you don't commit
+   this token into `git`. If you want to use this token in GitHub Actions, set
+   it as a GitHub secret.
 
-5. Install the Deno Deploy CLI, [`deployctl`](https://github.com/denoland/deployctl):
+5. Install the Deno Deploy CLI,
+   [`deployctl`](https://github.com/denoland/deployctl):
 
-```sh
-deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
-```
+   ```sh
+   deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
+   ```
 
-6. If you have previously installed the Deno Deploy CLI, you should update it to the latest version:
+6. If you have previously installed the Deno Deploy CLI, you should update it to
+   the latest version:
 
 ```sh
 deployctl upgrade
@@ -118,7 +137,10 @@ npm run deploy
 #### How to use FontAwesome in the project
 
 1. Search [FontAwesome Icons](https://fontawesome.com/icons)
-2. Download the SVG code (if it's a Pro icon, please ask @zainfathoni to download it for you)
-3. Paste the SVG code into the `SVG INPUT` panel of [SVGR with these params](https://react-svgr.com/playground/?svgProps=role%3Dimg%2Cfill%3DcurrentColor&typescript=true)
+2. Download the SVG code (if it's a Pro icon, please ask @zainfathoni to
+   download it for you)
+3. Paste the SVG code into the `SVG INPUT` panel of
+   [SVGR with these params](https://react-svgr.com/playground/?svgProps=role%3Dimg%2Cfill%3DcurrentColor&typescript=true)
 4. Copy the resulting `<svg>` tag in the `JSX OUTPUT` panel
-5. Paste the `<svg>` tag into the corresponding file under the [icons](/app/icons/) directory
+5. Paste the `<svg>` tag into the corresponding file under the
+   [icons](/app/icons/) directory

app/components/action-cards.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { classNames } from '../utils/class-names'
 import { Link } from '@remix-run/react'
+import { classNames } from '../utils/class-names'
 import { Categories } from '../model/categories'
 
 export function ActionCards({ categories }: { categories: Categories }) {
@@ -10,10 +10,14 @@ export function ActionCards({ categories }: { categories: Categories }) {
         <div
           key={category.title}
           className={classNames(
-            categoryIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '',
+            categoryIdx === 0
+              ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none'
+              : '',
             categoryIdx === 1 ? 'sm:rounded-tr-lg' : '',
             categoryIdx === categories.length - 3 ? 'sm:rounded-bl-lg' : '',
-            categoryIdx === categories.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '',
+            categoryIdx === categories.length - 1
+              ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none'
+              : '',
             'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500'
           )}
         >
@@ -30,7 +34,10 @@ export function ActionCards({ categories }: { categories: Categories }) {
           </div>
           <div className="mt-8">
             <h3 className="text-lg font-medium">
-              <Link to={`/activities/${category.slug}`} className="focus:outline-none">
+              <Link
+                to={`/activities/${category.slug}`}
+                className="focus:outline-none"
+              >
                 {/* Extend touch target to entire panel */}
                 <span className="absolute inset-0" aria-hidden="true" />
                 {category.title}
@@ -45,7 +52,12 @@ export function ActionCards({ categories }: { categories: Categories }) {
             className="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
             aria-hidden="true"
           >
-            <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+            <svg
+              className="h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
               <path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
             </svg>
           </span>

app/components/activities-grid.tsx

@@ -11,34 +11,41 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
   const matches = useMatches()
   const categorySlug = matches[matches.length - 1].params?.categorySlug
   const category = getCategoryByCategorySlug(categorySlug)
-  const addNewActivityLink = `${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(category.title)}`
+  const addNewActivityLink = `${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(
+    category.title
+  )}`
   if (activities.length) {
     return (
-      <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-        {activities.map(({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
-          const { icon, iconForeground, iconBackground, title } = getCategoryByCategorySlug(categorySlug)
-          return (
-            <Card
-              key={id}
-              name={nama}
-              cta="Kunjungi"
-              link={link}
-              secondaryCta="Koreksi"
-              secondaryLink={`${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(
-                usia
-              )}&entry.105812429=${encodeURIComponent(nama)}&entry.1084985767=${encodeURIComponent(
-                ringkasan
-              )}&entry.1503344235=${encodeURIComponent(link)}`}
-              description={ringkasan}
-              image={image}
-              category={title}
-              categorySlug={categorySlug}
-              icon={icon}
-              foregroundColor={iconForeground}
-              backgroundColor={iconBackground}
-            />
-          )
-        })}
+      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {activities.map(
+          ({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
+            const { icon, iconForeground, iconBackground, title } =
+              getCategoryByCategorySlug(categorySlug)
+            return (
+              <Card
+                key={id}
+                name={nama}
+                cta="Kunjungi"
+                link={link}
+                secondaryCta="Koreksi"
+                secondaryLink={`${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(
+                  usia
+                )}&entry.105812429=${encodeURIComponent(
+                  nama
+                )}&entry.1084985767=${encodeURIComponent(
+                  ringkasan
+                )}&entry.1503344235=${encodeURIComponent(link)}`}
+                description={ringkasan}
+                image={image}
+                category={title}
+                categorySlug={categorySlug}
+                icon={icon}
+                foregroundColor={iconForeground}
+                backgroundColor={iconBackground}
+              />
+            )
+          }
+        )}
         <Card
           name="Tambah Aktivitas Baru"
           description={`Usulkan aktivitas baru untuk kategori ${category.title}`}
@@ -63,9 +70,12 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
         >
           <category.icon className="w-16 h-16 flex-shrink-0 mx-auto " />
         </div>
-        <h3 className="mt-2 text-sm font-medium text-gray-900">Belum ada aktivitas {category.title}</h3>
+        <h3 className="mt-2 text-sm font-medium text-gray-900">
+          Belum ada aktivitas {category.title}
+        </h3>
         <p className="mt-1 text-sm text-gray-500">
-          Ada usulan? Silakan tambahkan aktivitas untuk {category.description} melalui formulir berikut ini.
+          Ada usulan? Silakan tambahkan aktivitas untuk {category.description}{' '}
+          melalui formulir berikut ini.
         </p>
         <div className="mt-6">
           <a