Next 13 (#16)

* upgrade to v13 * updating to app directory pattern * updating to next 13 pages * trying to fix the version * upgrades to rollup v3 * new seed script * fast store * moving everything in app dir and updates to browser-extension * adding svelte-demo * upgrade to 13.0.2 * save the svelte experiment for later and fix the tests * adding apollo in favor of fastify * upgrading next.js * formmating * upgrading integration tests Co-authored-by: Charlie ⚡ <[email protected]>
charliewilco · Nov 20, 2022 · 3ebff2e · 3ebff2e · vercel · Nov 20, 2022
1 parent 862ceb7
commit 3ebff2e
Show file tree

Hide file tree

Showing 159 changed files with 42,995 additions and 38,581 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,9 +1,9 @@
 {
- "name": "Node.js & PostgreSQL",
- "dockerComposeFile": "docker-compose.yml",
- "service": "app",
- "workspaceFolder": "/workspace",
- "forwardPorts": [5432],
- "postCreateCommand": "npm install && npm run db && npm run seed",
- "postStartCommand": "npx turbo dev --parallel --filter=!@reubin/extension"
+ "name": "Node.js & PostgreSQL",
+ "dockerComposeFile": "docker-compose.yml",
+ "service": "app",
+ "workspaceFolder": "/workspace",
+ "forwardPorts": [5432],
+ "postCreateCommand": "npm install && npm run db && npm run seed",
+ "postAttachCommand": "npx turbo dev --parallel --filter=!@reubin/extension"
 }
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -28,7 +28,7 @@ jobs:
  - name: Setup Node.js environment
  uses: actions/setup-node@v3
  with:
- node-version: 16
+ node-version: 18
  cache: "npm"
 
  - name: Install dependencies

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -18,7 +18,7 @@ jobs:
  DATABASE_URL: postgresql:https://postgres:postgres@postgres:5432/ci_db_test
  strategy:
  matrix:
- node-version: [16.x]
+ node-version: [18.x]
 
  steps:
  - uses: actions/checkout@v3

diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-16.x
+18.x
diff --git a/LICENSE.md b/LICENSE.md
@@ -20,4 +20,4 @@ written permission.
 
 THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS OR IMPLIED WARRANTIES,
 INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
-FITNESS FOR A PARTICULAR PURPOSE.
+FITNESS FOR A PARTICULAR PURPOSE.
diff --git a/README.md b/README.md
@@ -50,18 +50,44 @@ First push the db to setup the tables:
 npm run db
 ```
 
-Then run the seed comment to populate the db:
+#### Seeing the Project
+
+You can populate the project with data by running the seed command. This will populate the database with feeds, tags and a single user.
 
 ```
 npm run seed
 ```
 
+The seed command can also be run with an `--email` flag:
+
+```
+npm run seed -- --email='[email protected]'
+```
+
+This will allow you to login to the app with:
+
+| key | value |
+| -------- | ------------------ |
+| email | [email protected] |
+| password | P@ssw0rd |
+
+_NOTE_: Running this command will also clear the database of all existing data.
+
 ## Project Structure
 
+### Available Scripts
+
+| command | description |
+| ------------------ | ---------------------------------------------------------------- |
+| `npm run build` | Runs build in each workspace |
+| `npm test` | Executes the tests in each workspace |
+| `npm run clean` | Clears out specific cache directories |
+| `npm run generate` | Generates types from the GraphQL documents for server and client |
+
 ### Application
 
 - `/apps/browser-extension`: Chrome browser extension, uses Preact and Parcel recipes
-- `/apps/graphql`: GraphQL server uses Fastify and Mercurius
+- `/apps/graphql`: GraphQL server uses Apollo Server
 - `/apps/ui`: Web application uses Next.js and TailwindCSS
 
 Each project contains

diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json
@@ -1,33 +1,34 @@
 {
- "name": "@reubin/extension",
- "version": "1.1.0",
- "private": true,
- "scripts": {
- "dev": "parcel watch src/manifest.json --host localhost",
- "build": "parcel build src/manifest.json --no-source-maps",
- "test": "echo \"Error: no test specified\" && exit 0",
- "types": "tsc --noEmit --pretty"
- },
- "dependencies": {
- "preact": "^10.11.0"
- },
- "devDependencies": {
- "@tailwindcss/aspect-ratio": "^0.4.2",
- "@tailwindcss/forms": "^0.5.3",
- "@tailwindcss/typography": "^0.5.7",
- "@parcel/config-webextension": "^2.6.2",
- "@types/chrome": "^0.0.197",
- "parcel": "^2.6.2",
- "tailwindcss": "^3.2.1",
- "typescript": "^4.8.4"
- },
- "alias": {
- "preact/jsx-dev-runtime": "preact/jsx-runtime",
- "react/jsx-runtime": "preact/jsx-runtime"
- },
- "postcss": {
- "plugins": {
- "tailwindcss": {}
- }
- }
+ "name": "@reubin/extension",
+ "version": "1.2.0",
+ "private": true,
+ "scripts": {
+ "dev": "parcel watch src/manifest.json --host localhost",
+ "build": "parcel build src/manifest.json --no-source-maps",
+ "test": "echo \"Error: no test specified\" && exit 0",
+ "types": "tsc --noEmit --pretty"
+ },
+ "dependencies": {
+ "htm": "^3.1.1",
+ "preact": "^10.11.0"
+ },
+ "devDependencies": {
+ "@tailwindcss/aspect-ratio": "^0.4.2",
+ "@tailwindcss/forms": "^0.5.3",
+ "@tailwindcss/typography": "^0.5.7",
+ "@parcel/config-webextension": "^2.6.2",
+ "@types/chrome": "^0.0.200",
+ "parcel": "^2.6.2",
+ "tailwindcss": "^3.2.1",
+ "typescript": "^4.8.4"
+ },
+ "alias": {
+ "preact/jsx-dev-runtime": "preact/jsx-runtime",
+ "react/jsx-runtime": "preact/jsx-runtime"
+ },
+ "postcss": {
+ "plugins": {
+ "tailwindcss": {}
+ }
+ }
 }
diff --git a/apps/browser-extension/src/content.ts b/apps/browser-extension/src/content.ts
@@ -1,46 +1,46 @@
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
- if (message.text === "searchRSS") {
- let types = [
- "application/rss+xml",
- "application/atom+xml",
- "application/rdf+xml",
- "application/rss",
- "application/atom",
- "application/rdf",
- "text/rss+xml",
- "text/atom+xml",
- "text/rdf+xml",
- "text/rss",
- "text/atom",
- "text/rdf",
- ];
- let links: NodeListOf<HTMLLinkElement> = document.querySelectorAll("link[type]");
- let feeds: RSSLink[] = [];
- for (let i = 0; i < links.length; i++) {
- const link = links[i];
- if (link.hasAttribute("type") && types.indexOf(link.getAttribute("type")!) !== -1) {
- let feed_url = link.getAttribute("href");
+ if (message.text === "searchRSS") {
+ let types = [
+ "application/rss+xml",
+ "application/atom+xml",
+ "application/rdf+xml",
+ "application/rss",
+ "application/atom",
+ "application/rdf",
+ "text/rss+xml",
+ "text/atom+xml",
+ "text/rdf+xml",
+ "text/rss",
+ "text/atom",
+ "text/rdf",
+ ];
+ let links: NodeListOf<HTMLLinkElement> = document.querySelectorAll("link[type]");
+ let feeds: RSSLink[] = [];
+ for (let i = 0; i < links.length; i++) {
+ const link = links[i];
+ if (link.hasAttribute("type") && types.indexOf(link.getAttribute("type")!) !== -1) {
+ let feed_url = link.getAttribute("href");
 
- if (feed_url) {
- // If feed's url starts with "//"
- if (feed_url.indexOf("//") === 0) feed_url = "http:" + feed_url;
- // If feed's url starts with "/"
- else if (feed_url.startsWith("/"))
- feed_url = message.url.split("/")[0] + "//" + message.url.split("/")[2] + feed_url;
- else if (!/^(http|https):\/\//i.test(feed_url))
- feed_url = message.url + "/" + feed_url.replace(/^\//g, "");
+ if (feed_url) {
+ // If feed's url starts with "//"
+ if (feed_url.indexOf("//") === 0) feed_url = "http:" + feed_url;
+ // If feed's url starts with "/"
+ else if (feed_url.startsWith("/"))
+ feed_url = message.url.split("/")[0] + "//" + message.url.split("/")[2] + feed_url;
+ else if (!/^(http|https):\/\//i.test(feed_url))
+ feed_url = message.url + "/" + feed_url.replace(/^\//g, "");
 
- let feed = {
- type: link.getAttribute("type") ?? "application/rss+xml",
- href: feed_url,
- title: link.getAttribute("title") || feed_url,
- };
- feeds.push(feed);
- }
- }
- }
- sendResponse(feeds);
- }
+ let feed = {
+ type: link.getAttribute("type") ?? "application/rss+xml",
+ href: feed_url,
+ title: link.getAttribute("title") || feed_url,
+ };
+ feeds.push(feed);
+ }
+ }
+ }
+ sendResponse(feeds);
+ }
 });
 
 export {};
diff --git a/apps/browser-extension/src/env.d.ts b/apps/browser-extension/src/env.d.ts
@@ -1,4 +1,4 @@
 declare module "*.css" {
- const mapping: Record<string, string>;
- export default mapping;
+ const mapping: Record<string, string>;
+ export default mapping;
 }
diff --git a/apps/browser-extension/src/index.html b/apps/browser-extension/src/index.html
@@ -1,54 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link
- href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
- rel="stylesheet" />
- <link rel="stylesheet" href="./index.css" />
- </head>
+ <head>
+ <meta charset="UTF-8" />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
+ rel="stylesheet" />
+ <link rel="stylesheet" href="./index.css" />
+ </head>
 
- <body>
- <svg style="display: none">
- <symbol
- id="icon-feed"
- stroke="currentColor"
- fill="currentColor"
- stroke-width="0"
- viewBox="0 0 24 24">
- <path
- fill-rule="evenodd"
- d="M3.75 4.5a.75.75 0 01.75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 01-.75.75h-.75a.75.75 0 01-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 01-.75-.75V4.5zm0 6.75a.75.75 0 01.75-.75h.75a8.25 8.25 0 018.25 8.25v.75a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75v-.75a6 6 0 00-6-6H4.5a.75.75 0 01-.75-.75v-.75zm0 7.5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
- clip-rule="evenodd"
- stroke="none" />
- </symbol>
- </svg>
+ <body>
+ <svg style="display: none">
+ <symbol
+ id="icon-feed"
+ stroke="currentColor"
+ fill="currentColor"
+ stroke-width="0"
+ viewBox="0 0 24 24">
+ <path
+ fill-rule="evenodd"
+ d="M3.75 4.5a.75.75 0 01.75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 01-.75.75h-.75a.75.75 0 01-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 01-.75-.75V4.5zm0 6.75a.75.75 0 01.75-.75h.75a8.25 8.25 0 018.25 8.25v.75a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75v-.75a6 6 0 00-6-6H4.5a.75.75 0 01-.75-.75v-.75zm0 7.5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+ clip-rule="evenodd"
+ stroke="none" />
+ </symbol>
 
- <div
- class="w-96 overflow-scroll bg-zinc-200 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
- <header
- class="flex justify-center border-b border-zinc-200 py-6 px-4 dark:border-zinc-700">
- <div class="">
- <svg viewBox="0 0 45 56" fill="none" class="inline-block h-[40px] w-[30px]">
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M1.12542 6.83245C-1.33382 4.25504 0.505064 0 4.05476 0H27.3155C29.8944 0 32.2314 1.51874 33.2788 3.87533L43.1533 26.0931C43.1683 26.1267 43.182 26.1609 43.1946 26.1956C44.0833 28.6528 44.7856 31.7459 43.379 34.2765C41.9036 36.9307 38.5797 38.2212 33.3459 38.2217H33.3434L33.3277 38.2217H26.7409C25.9856 38.2217 25.4867 37.3993 25.6488 36.6616C26.0374 34.8934 25.6328 32.9346 24.1762 31.3834L18.342 25.1704H18.408C16.9506 23.5746 14.9351 21.4125 12.6939 19.0294C8.78564 14.8737 4.28383 10.1426 1.12542 6.83245ZM8.85576 4.97192C8.0712 4.97192 7.63752 5.88194 8.13167 6.49132L10.5958 9.53012C11.1268 10.185 11.925 10.5653 12.7681 10.5653H28.3647C29.5688 10.5653 30.3153 9.25488 29.7012 8.21917L28.5882 6.34223C28.0845 5.49277 27.1702 4.97192 26.1826 4.97192H8.85576ZM17.0266 12.4298C15.8504 12.4298 15.22 13.8135 15.9918 14.7011C16.4537 15.2323 17.1231 15.5373 17.827 15.5373H25.671C26.583 15.5373 27.196 14.6023 26.8324 13.7659C26.4796 12.9546 25.6793 12.4298 24.7946 12.4298H17.0266ZM21.6815 17.4017C20.5068 17.4017 19.8762 18.7826 20.6456 19.6704C21.1073 20.2031 21.7776 20.5092 22.4826 20.5092H32.8207C33.7318 20.5092 34.3446 19.5758 33.9823 18.7398C33.6303 17.9275 32.8295 17.4017 31.9442 17.4017H21.6815Z"
- fill="currentColor" />
- <path
- d="M14.3755 25.4858C14.1865 25.2845 13.9227 25.1704 13.6465 25.1704H7.78918C7.58113 25.1589 7.36612 25.1595 7.14385 25.1734C7.05679 25.1788 6.97034 25.1916 6.88541 25.2115C6.46696 25.3099 6.00778 25.4869 5.562 25.7562C4.79101 26.2219 5.45292 27.2446 6.32778 27.459C7.17339 27.6662 8.00697 28.1027 8.7756 28.7291C10.2905 29.9638 11.6657 32.001 12.7364 34.8841C13.1906 36.1073 14.3673 36.9895 15.9368 37.5608C17.1404 37.9989 18.3876 38.1813 19.2539 38.2217H19.8721C22.3216 38.2217 23.5876 35.2961 21.9109 33.5105L14.3755 25.4858Z"
- fill="currentColor" />
- <path
- d="M3.96478 32.9376C4.21215 33.5632 4.53298 34.2186 4.93079 34.9037C5.61164 36.3462 7.53103 39.4974 9.79964 43.0862C12.1366 46.7832 14.9243 51.0682 17.3324 54.728C19.0106 57.2786 22.9043 55.6755 22.4047 52.7253L20.5511 41.7787C20.5072 41.5191 20.2823 41.3292 20.019 41.3292C19.7757 41.3405 19.4975 41.3412 19.1922 41.3291H18.7383V41.3029C17.6181 41.2185 16.2277 40.9736 14.874 40.4809C12.9272 39.7723 10.7375 38.4275 9.82332 35.9659C8.87451 33.411 7.76391 31.9134 6.81243 31.1379C5.865 30.3658 5.19059 30.3766 4.86629 30.4869C4.54677 30.5955 4.13236 30.9461 3.9838 31.8016C3.92847 32.1203 3.91493 32.5012 3.96478 32.9376Z"
- fill="currentColor" />
- </svg>
- </div>
- </header>
+ <symbol
+ id="icon-chevron-right"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round">
+ <polyline points="9 18 15 12 9 6" />
+ </symbol>
 
- <div class="p-4">
- <div id="app"></div>
- </div>
- </div>
- <script type="module" src="./popup.ts"></script>
- </body>
+ <symbol
+ id="icon-refresh"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round">
+ <polyline points="23 4 23 10 17 10" />
+ <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+ </symbol>
+ </svg>
+
+ <div
+ class="w-96 overflow-scroll bg-zinc-100 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
+ <header
+ class="flex justify-center border-b border-zinc-400 py-6 px-4 dark:border-zinc-700">
+ <div class="">
+ <svg viewBox="0 0 45 56" fill="none" class="inline-block h-[40px] w-[30px]">
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1.12542 6.83245C-1.33382 4.25504 0.505064 0 4.05476 0H27.3155C29.8944 0 32.2314 1.51874 33.2788 3.87533L43.1533 26.0931C43.1683 26.1267 43.182 26.1609 43.1946 26.1956C44.0833 28.6528 44.7856 31.7459 43.379 34.2765C41.9036 36.9307 38.5797 38.2212 33.3459 38.2217H33.3434L33.3277 38.2217H26.7409C25.9856 38.2217 25.4867 37.3993 25.6488 36.6616C26.0374 34.8934 25.6328 32.9346 24.1762 31.3834L18.342 25.1704H18.408C16.9506 23.5746 14.9351 21.4125 12.6939 19.0294C8.78564 14.8737 4.28383 10.1426 1.12542 6.83245ZM8.85576 4.97192C8.0712 4.97192 7.63752 5.88194 8.13167 6.49132L10.5958 9.53012C11.1268 10.185 11.925 10.5653 12.7681 10.5653H28.3647C29.5688 10.5653 30.3153 9.25488 29.7012 8.21917L28.5882 6.34223C28.0845 5.49277 27.1702 4.97192 26.1826 4.97192H8.85576ZM17.0266 12.4298C15.8504 12.4298 15.22 13.8135 15.9918 14.7011C16.4537 15.2323 17.1231 15.5373 17.827 15.5373H25.671C26.583 15.5373 27.196 14.6023 26.8324 13.7659C26.4796 12.9546 25.6793 12.4298 24.7946 12.4298H17.0266ZM21.6815 17.4017C20.5068 17.4017 19.8762 18.7826 20.6456 19.6704C21.1073 20.2031 21.7776 20.5092 22.4826 20.5092H32.8207C33.7318 20.5092 34.3446 19.5758 33.9823 18.7398C33.6303 17.9275 32.8295 17.4017 31.9442 17.4017H21.6815Z"
+ fill="currentColor" />
+ <path
+ d="M14.3755 25.4858C14.1865 25.2845 13.9227 25.1704 13.6465 25.1704H7.78918C7.58113 25.1589 7.36612 25.1595 7.14385 25.1734C7.05679 25.1788 6.97034 25.1916 6.88541 25.2115C6.46696 25.3099 6.00778 25.4869 5.562 25.7562C4.79101 26.2219 5.45292 27.2446 6.32778 27.459C7.17339 27.6662 8.00697 28.1027 8.7756 28.7291C10.2905 29.9638 11.6657 32.001 12.7364 34.8841C13.1906 36.1073 14.3673 36.9895 15.9368 37.5608C17.1404 37.9989 18.3876 38.1813 19.2539 38.2217H19.8721C22.3216 38.2217 23.5876 35.2961 21.9109 33.5105L14.3755 25.4858Z"
+ fill="currentColor" />
+ <path
+ d="M3.96478 32.9376C4.21215 33.5632 4.53298 34.2186 4.93079 34.9037C5.61164 36.3462 7.53103 39.4974 9.79964 43.0862C12.1366 46.7832 14.9243 51.0682 17.3324 54.728C19.0106 57.2786 22.9043 55.6755 22.4047 52.7253L20.5511 41.7787C20.5072 41.5191 20.2823 41.3292 20.019 41.3292C19.7757 41.3405 19.4975 41.3412 19.1922 41.3291H18.7383V41.3029C17.6181 41.2185 16.2277 40.9736 14.874 40.4809C12.9272 39.7723 10.7375 38.4275 9.82332 35.9659C8.87451 33.411 7.76391 31.9134 6.81243 31.1379C5.865 30.3658 5.19059 30.3766 4.86629 30.4869C4.54677 30.5955 4.13236 30.9461 3.9838 31.8016C3.92847 32.1203 3.91493 32.5012 3.96478 32.9376Z"
+ fill="currentColor" />
+ </svg>
+ </div>
+ </header>
+
+ <div id="app" class="p-4"></div>
+ </div>
+ <script type="module" src="./popup.ts"></script>
+ </body>
 </html>