diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 5305cf5..a82863f 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -3,7 +3,7 @@ on: push: branches: [main] schedule: - - cron: "0 9 * * *" + - cron: '0 9 * * *' jobs: deploy: @@ -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/.prettierignore b/.prettierignore index 352ed62..eeaab03 100644 --- a/.prettierignore +++ b/.prettierignore @@ -9,3 +9,6 @@ public/build # Next.js .next/ + +# Senarai Data +app/data/*.json 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 ea305d4..f200a58 100644 --- a/app/components/action-cards.tsx +++ b/app/components/action-cards.tsx @@ -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 aaa9602..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.

{filteredMatches.map( - ({ pathname, handle, params }: { pathname: string; handle?: string; params: Record }) => ( + ({ + pathname, + handle, + params, + }: { + pathname: string + handle?: string + params: Record + }) => (
  • - {handle ?? categoriesRecord[params.categorySlug]?.title ?? 'Semua Aktivitas'} + {handle ?? + categoriesRecord[params.categorySlug]?.title ?? + 'Semua Aktivitas'}
    • diff --git a/app/components/card.tsx b/app/components/card.tsx index c9c9085..b35f571 100644 --- a/app/components/card.tsx +++ b/app/components/card.tsx @@ -37,9 +37,18 @@ export const Card: React.FC = ({
  • @@ -91,13 +103,20 @@ export const Card: React.FC = ({
    {link && cta ? ( {cta} - ) : (