diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..42f5357 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,14 @@ +.cache +build +node_modules +coverage +dist + +# Remix +public/build + +# Remix with Deno +server.ts + +# Next.js +.next/ diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c19deac --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1 @@ +module.exports = require('pkode/dist/config/eslintrc') diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 51efb8e..a82863f 100644 --- a/.github/workflows/deploy.yml +++ b/.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,7 +30,7 @@ jobs: - name: πŸ“‚ Make deno dir run: mkdir -p ./deno - + - name: πŸ“ Copy Remix build files into output dir run: cp -R ./{build,public} ./deno @@ -38,5 +38,5 @@ jobs: 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 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..f4ad020 --- /dev/null +++ b/.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 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..eeaab03 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +.cache +build +node_modules +coverage +dist + +# Remix +public/build + +# Next.js +.next/ + +# Senarai Data +app/data/*.json diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..b48282f --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,3 @@ +'use strict' + +module.exports = require('pkode/dist/config/prettierrc') diff --git a/.vscode/extensions.json b/.vscode/extensions.json index c4eb3fe..74baffc 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,3 @@ { - "recommendations": [ - "denoland.vscode-deno" - ] -} \ No newline at end of file + "recommendations": ["denoland.vscode-deno"] +} diff --git a/README.md b/README.md index a731e89..40ae67a 100644 --- a/README.md +++ b/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/std@0.138.0/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,7 +78,8 @@ 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 @@ -74,32 +87,38 @@ You can deploy these bundles to any host that runs Deno, but here we'll focus on 2. [Create a new Deno Deploy project](https://dash.deno.com/new) for this app. -3. Replace `` in the `deploy` script in `package.json` with your Deno Deploy project name: +3. Replace `` in the `deploy` script in `package.json` + with your Deno Deploy project name: -```json -{ - "scripts": { - "deploy": "deployctl deploy --project= --include=.cache,build,public ./build/index.js" - } -} -``` + ```json + { + "scripts": { + "deploy": "deployctl 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= -``` + ```sh + export DENO_DEPLOY_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 `` tag in the `JSX OUTPUT` panel -5. Paste the `` tag into the corresponding file under the [icons](/app/icons/) directory +5. Paste the `` tag into the corresponding file under the + [icons](/app/icons/) directory diff --git a/app/components/action-cards.tsx b/app/components/action-cards.tsx index b0c4771..f200a58 100644 --- a/app/components/action-cards.tsx +++ b/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 }) {
@@ -30,7 +34,10 @@ export function ActionCards({ categories }: { categories: Categories }) {

- + {/* Extend touch target to entire panel */} diff --git a/app/components/activities-grid.tsx b/app/components/activities-grid.tsx index 0181453..34f1f0b 100644 --- a/app/components/activities-grid.tsx +++ b/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 ( -
    - {activities.map(({ id, nama, link, ringkasan, image, usia, categorySlug }) => { - const { icon, iconForeground, iconBackground, title } = getCategoryByCategorySlug(categorySlug) - return ( - - ) - })} +
      + {activities.map( + ({ id, nama, link, ringkasan, image, usia, categorySlug }) => { + const { icon, iconForeground, iconBackground, title } = + getCategoryByCategorySlug(categorySlug) + return ( + + ) + } + )}

-

Belum ada aktivitas {category.title}

+

+ Belum ada aktivitas {category.title} +

- Ada usulan? Silakan tambahkan aktivitas untuk {category.description} melalui formulir berikut ini. + Ada usulan? Silakan tambahkan aktivitas untuk {category.description}{' '} + melalui formulir berikut ini.

match.pathname !== '/' || !match.pathname.endsWith('/')) + const filteredMatches = matches.filter( + (match) => match.pathname !== '/' || !match.pathname.endsWith('/') + ) if (filteredMatches.length && filteredMatches[0].pathname === '/activities') { return (