📝 Update documents etc.

usagizmo · Apr 27, 2024 · d0f4c82 · d0f4c82
1 parent cd60678
commit d0f4c82
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Monorepo template for creating a web application.
 
 - [Turborepo](https://turborepo.org/) x [pnpm](https://pnpm.io/)
 - [Prettier](https://prettier.io/) (w/ [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) + [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss))
-- [ESLint](https://eslint.org/) (w/ [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)) / [CSpell](https://cspell.org/)
+- [ESLint](https://eslint.org/) / [CSpell](https://cspell.org/)
 - [lint-staged](https://github.com/okonet/lint-staged) / [husky](https://github.com/typicode/husky)
 - GitHub Actions (Linting + Testing (Validate `href` and `src` paths))
 - Execute `eslint --fix` and `prettier` when saving with VS Code
@@ -17,20 +17,21 @@ Monorepo template for creating a web application.
 
 #### `apps/`
 
-- [`nhost`](./apps/nhost/)  
-  Local environment test server and production [Nhost](https://nhost.io/) migration.
+- [`backend`](./apps/backend/)  
+  A [Supabase](https://supabase.io/) [Local Dev / CLI](https://supabase.com/docs/guides/cli).
 - [`mockup`](./apps/mockup/) [[Demo](https://webapp-template-mockup.usagizmo.com/)]  
   A starting point for building a static site.  
   [Tailwind CSS](https://tailwindcss.com/) + Vanilla JS + [Vitest](https://vitest.dev/) (Check links + file names)
 - [`web`](./apps/web/) [[Demo](https://webapp-template.usagizmo.com/)]  
   A starting point for building Svelte application.  
   [SvelteKit](https://kit.svelte.dev/) (w/ [Tailwind CSS](https://tailwindcss.com/))  
-  [Nhost](https://nhost.io/) / [Vitest](https://vitest.dev/)
+  [Supabase](https://supabase.io/) / [Vitest](https://vitest.dev/)
 
 #### `packages/`
 
 - `eslint-config`  
-  `eslint` configurations. (w/ [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) + eslint-config-[[prettier](https://github.com/prettier/eslint-config-prettier)|[turbo](https://www.npmjs.com/package/eslint-config-turbo)])
+  ESLint 9 (flat) configuration for JavaScript and TypeScript.
+  [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte) + [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
 
 ### VS Code Extensions (Recommend)
 
@@ -42,25 +43,39 @@ Monorepo template for creating a web application.
 
 ## Breaking changes
 
+### v2.0.0
+
+- **Update Framework/Library Versions:**
+  - Switch to Svelte 5 (integrated with TypeScript and using the Rune compiler)
+  - Update to Tailwind CSS 4
+- **Backend Change:**
+  - Replace [Next.js](https://nextjs.org/) with [Supabase](https://supabase.com/) for backend services
+
 ### v1.9.0
 
-- Change from JavaScript to TypeScript
-- Svelte 4 → Svelte 5 (Rune)
-- Prepend `@repo/` to custom package names (`packages/*`)
-  - Merge `eslint-config-custom-typescript` into `eslint-config-custom`
+- **Language and Compiler Changes:**
+  - Migrated codebase from JavaScript to TypeScript
+  - Upgraded from Svelte 4 to Svelte 5 (Rune)
+- **Package Naming and Structure:**
+  - Custom package names now prefixed with `@repo/`
+  - Merged `eslint-config-custom-typescript` into `eslint-config-custom`
 
 ### v1.6.0
 
-- Change from TypeScript to JavaScript + JSDoc
+- **Language Reversion and Documentation:**
+  - Reverted codebase from TypeScript back to JavaScript, supplementing with JSDoc for documentation
 
 ### v1.0.0
 
-- Change frontend framework (`apps/web`): [Next.js](https://nextjs.org/) → [SvelteKit](https://kit.svelte.jp/)
-- Change repository name: `nextjs-template` → `webapp-template`
+- **Frontend Framework Change:**
+  - Switched from [Next.js](https://nextjs.org/) to [SvelteKit](https://kit.svelte.jp/) for the frontend framework in `apps/web`
+- **Repository Rebranding:**
+  - Renamed `nextjs-template` repository to `webapp-template`
 
 ### v0.23.0
 
-- Replace [Firebase](https://firebase.google.com/) (`apps/firebase`) and [Hasura](https://hasura.io/) (`apps/hasura`) apps with [Nhost](https://nhost.io/) (`apps/nhost`)
+- **Backend Services Integration:**
+  - Replaced individual [Firebase](https://firebase.google.com/) and [Hasura](https://hasura.io/) applications with a unified [Nhost](https://nhost.io/) application in `apps/nhost`
 
 ## Commands
 
@@ -70,22 +85,23 @@ pnpm i  # Resolve dependency packages and prepare .env files
 
 pnpm build   # Build all apps and packages
 pnpm dev     # Set up file monitoring builds and local servers for development
-pnpm lint    # eslint + markuplint | prettier --check
+pnpm lint    # markuplint + eslint + prettier --check
 pnpm test    # Testing
 pnpm format  # eslint --fix + prettier --write + format project-words.txt
 ```
 
 ## List of listening port numbers
 
-- `1337`: `apps/nhost/` - Hasura
-  - `3030`: Nhost Dashboard
-  - `5432`: Postgres
-  - `8080`: GraphQL Endpoint
-  - `8025`: MailHog
-  - `9695`: Hasura Console
-- `5173`: `apps/web/` - SvelteKit application
-- `8000`: `apps/mockup/` - Static site
-- `49160`: `apps/mockup/` - Express server
+- `apps/backend/` - Supabase Local Dev / CLI
+  - `54321`: API / GraphQL / S3 Storage
+  - `54322`: DB (Postgres)
+  - `54323`: Studio
+  - `54324`: Inbucket
+- `apps/web/` - SvelteKit application
+  - `5173`: Development server
+- `apps/mockup/` - Static site
+  - `8000`: BrowserSync server
+  - `49160`: Express server
 
 ## Registering environment variables for GitHub / Vercel
 

diff --git a/apps/backend/README.md b/apps/backend/README.md
@@ -0,0 +1,11 @@
+# `backend` app
+
+This app is a [Supabase](https://supabase.io/) [Local Dev / CLI](https://supabase.com/docs/guides/cli).
+
+## Commands
+
+```bash
+pnpm pull   # Pull the latest changes from the supabase server
+pnpm start  # Start the supabase server
+pnpm stop   # Stop the supabase server
+```
diff --git a/apps/backend/package.json b/apps/backend/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "pull": "supabase db pull --local --schema auth,storage",
+    "pull": "supabase db pull --local --schema auth --schema storage",
     "start": "supabase start",
     "stop": "supabase stop"
   },

diff --git a/apps/mockup/README.md b/apps/mockup/README.md
@@ -8,7 +8,7 @@ A starting point for building a static site.
 
 ```bash
 pnpm build       # Output `public/styles.css`
-pnpm dev         # Watch input.css and launch browser-sync server on port 8000
+pnpm dev         # Watch app.css and launch browser-sync server on port 8000
 pnpm lint        # markuplint + cspell
 pnpm test        # Check links (href/src) + image file names
 pnpm format      # Format with `prettier`

diff --git a/apps/mockup/public/index.html b/apps/mockup/public/index.html
@@ -62,7 +62,7 @@ <h1 class="text-center text-[26px] font-bold leading-tight tracking-tighter lg:t
 
     <main class="pt-10 px-4 pb-20">
       <div class="mx-auto max-w-[1120px] space-y-9">
-        <!-- Development -->
+        <!-- What's inside? -->
         <div>
           <h2 class="mb-4 text-2xl font-bold md:text-3xl">What's inside?</h2>
           <section class="rounded-lg border border-slate-200 bg-slate-50 pt-5 px-6 pb-8">
@@ -131,19 +131,7 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Uses</h3>
                     class="font-semibold text-blue-500"
                     >ESLint</a
                   >
-                  (w/
-                  <ul class="inline">
-                    <li class="inline [&:not(:first-child):before]:content-['_+_']">
-                      <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href="https://github.com/import-js/eslint-plugin-import"
-                        class="font-semibold text-blue-500"
-                        >eslint-plugin-import</a
-                      >
-                    </li>
-                  </ul>
-                  ) /
+                  /
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -211,16 +199,22 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">apps/</h3>
                   <li
                     class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
-                    <strong class="font-semibold">nhost</strong><br />
-                    Local environment test server and production
+                    <strong class="font-semibold">backend</strong><br />
+                    A
                     <a
                       target="_blank"
                       rel="noopener noreferrer"
-                      href="https://nhost.io/"
+                      href="https://supabase.io/"
                       class="font-semibold text-blue-500"
-                      >Nhost</a
+                      >Supabase</a
                     >
-                    migration.
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://supabase.com/docs/guides/cli"
+                      class="font-semibold text-blue-500"
+                      >Local Dev / CLI</a
+                    >.
                   </li>
                   <li
                     class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
@@ -289,9 +283,9 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">apps/</h3>
                     <a
                       target="_blank"
                       rel="noopener noreferrer"
-                      href="https://nhost.io/"
+                      href="https://supabase.io/"
                       class="font-semibold text-blue-500"
-                      >Nhost</a
+                      >Supabase</a
                     >
                     /
                     <a
@@ -317,36 +311,27 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">packages/</h3>
                     class="relative pl-5 before:absolute before:top-2 before:left-0 before:h-2.5 before:w-2.5 before:rounded-full before:bg-zinc-900"
                   >
                     <strong class="font-semibold">eslint-config</strong><br />
-                    <code class="font-mono font-bold text-black">`eslint`</code>
-                    configurations.<br />
-                    (w/
+                    ESLint 9 (flat) configuration for JavaScript and TypeScript.<br />
                     <ul class="inline">
                       <li class="inline [&:not(:first-child):before]:content-['_+_']">
                         <a
                           target="_blank"
                           rel="noopener noreferrer"
-                          href="https://github.com/sveltejs/prettier-plugin-svelte"
+                          href="https://github.com/sveltejs/eslint-plugin-svelte"
                           class="font-semibold text-blue-500"
-                          >prettier-plugin-svelte</a
+                          >eslint-plugin-svelte</a
                         >
                       </li>
                       <li class="inline [&:not(:first-child):before]:content-['_+_']">
-                        eslint-config-[<a
+                        <a
                           target="_blank"
                           rel="noopener noreferrer"
                           href="https://github.com/prettier/eslint-config-prettier"
                           class="font-semibold text-blue-500"
-                          >prettier</a
-                        >|<a
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          href="https://www.npmjs.com/package/eslint-config-turbo"
-                          class="font-semibold text-blue-500"
-                          >turbo</a
-                        >]
+                          >eslint-config-prettier</a
+                        >
                       </li>
                     </ul>
-                    )
                   </li>
                 </ul>
               </div>
@@ -365,7 +350,7 @@ <h2 class="mb-4 text-2xl font-bold md:text-3xl">Commands</h2>
 
 <span class="text-sky-300">pnpm</span> build   <span class="text-slate-500"># Build all apps and packages</span>
 <span class="text-sky-300">pnpm</span> dev     <span class="text-slate-500"># Set up file monitoring builds and local servers for development</span>
-<span class="text-sky-300">pnpm</span> lint    <span class="text-slate-500"># eslint + markuplint | prettier --check</span>
+<span class="text-sky-300">pnpm</span> lint    <span class="text-slate-500"># markuplint + eslint + prettier --check</span>
 <span class="text-sky-300">pnpm</span> test    <span class="text-slate-500"># Testing</span>
 <span class="text-sky-300">pnpm</span> format  <span class="text-slate-500"># eslint --fix + prettier --write + format project-words.txt</span></code></pre>
 

diff --git a/apps/mockup/tests/external-links.txt b/apps/mockup/tests/external-links.txt
@@ -4,21 +4,21 @@ https://eslint.org
 https://fonts.googleapis.com
 https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap
 https://fonts.gstatic.com
-https://github.com/import-js/eslint-plugin-import
 https://github.com/okonet/lint-staged
 https://github.com/prettier/eslint-config-prettier
+https://github.com/sveltejs/eslint-plugin-svelte
 https://github.com/sveltejs/prettier-plugin-svelte
 https://github.com/tailwindlabs/prettier-plugin-tailwindcss
 https://github.com/typicode/husky
 https://github.com/usagizmo/webapp-template
 https://kit.svelte.dev/
-https://nhost.io/
 https://pnpm.io/
 https://prettier.io/
+https://supabase.com/docs/guides/cli
+https://supabase.io/
 https://tailwindcss.com
 https://tailwindcss.com/
 https://turborepo.org/
 https://usagizmo.com
 https://vitest.dev/
-https://webapp-template-mockup.usagizmo.com
-https://www.npmjs.com/package/eslint-config-turbo
+https://webapp-template-mockup.usagizmo.com
diff --git a/apps/web/README.md b/apps/web/README.md
@@ -11,17 +11,13 @@ Everything you need to build a Svelte project, powered by [`create-svelte`](http
 ## Commands
 
 ```bash
-pnpm generate  # Output `.svelte-kit`
+pnpm generate  # Output `src/lib/$generated/supabase-types.ts`
 pnpm build     # Output `.svelte-kit/output/`
 pnpm preview   # Preview the production build (after `pnpm build`)
 
-pnpm dev       # start the server and open the app in a new browser tab on port 3000
-pnpm lint      # markuplint + cspell + eslint
-pnpm format    # Format with `prettier`
-
-# Others
-pnpm package
-pnpm check[:watch]
+pnpm dev       # start the server and open the app in a new browser tab on port 5173
+pnpm lint      # markuplint + cspell + eslint + prettier
+pnpm format    # Format with eslint + prettier
 ```
 
 You can preview the production build with `pnpm preview`.
@@ -32,4 +28,4 @@ You can preview the production build with `pnpm preview`.
 
 - Framework Preset: `SvelteKit`
 - Root Directory: `apps/web`
-- Environment Variables: Set 5 environment variables in `env`
+- Environment Variables: Set 2 environment variables in `.env`
diff --git a/project-words.txt b/project-words.txt
@@ -9,6 +9,7 @@ graphqurl
 hasura
 hiragino
 icns
+inbucket
 jsnext
 kaku
 lucida