Basics (#12)

* updating feeds, refresh and remove

* removing stitches

* removing stitches

* virtualized lists

* back to workspaces

* adding testing scripts

* moving to dist

* adding browser extension

* adding rollup for server

* moving on up

* removing formik

* yeppper

* moving recommendations

* working through recommendations and resolvers

* route shorthand

* tags

* using 'generated' name

* tags

* starting extension

* updating deps

* adding tailwind

* basic extension setup

* remove unused.

* changing filename

* moving into a src directory

* adding basic test

* update feed tests

* using msw

* organizing the browser-extension

* no more jsx in the extension, removed source maps so the compile time went from 150kb to 13.42kb

* updating builds

* updating action

* prisma types

* ci to install

* updating graphql setup, more tests and tagging

* tags

* v2 -> v3 manifest.json

* .js to .cjs files

* bumping dev dependencies

* updating core deps

* root for workspaces

* new scripts

* scripts & documentation

* teeny tiny fixes

* --no-optional

* using install no args

* trying anything at this point

* potential fix to turbo issue

* v2 → v3 actions

* trying to use .next cache in

.github/workflows/build.yml

@@ -1,23 +1,45 @@
-name: Build and Generate Types
+name: Build & Generate Types
 on: [push, pull_request] # Run on Push and Pull Requests
 
 jobs:
  build:
+ name: Build
+ timeout-minutes: 15
  runs-on: ubuntu-latest
 
- strategy:
- matrix:
- node-version: [16.x, 18.x]
-
  steps:
- - uses: actions/checkout@v2
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v2
+ - name: Check out code
+ uses: actions/checkout@v3
+ with:
+ fetch-depth: 2
+
+ - uses: actions/cache@v3
+ with:
+ # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+ path: |
+ ~/.npm
+ ${{ github.workspace }}/.next/cache
+ # Generate a new cache whenever packages or source files change.
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+ # If source files changed but packages didn't, rebuild from a prior cache.
+ restore-keys: |
+ ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+ - name: Setup Node.js environment
+ uses: actions/setup-node@v3
  with:
- node-version: ${{ matrix.node-version }}
- - name: npm Install
- run: npm ci --force
+ node-version: 16
+ cache: "npm"
+
+ - name: Install dependencies
+ run: npm install
+
  - name: Generate Types
- run: npm run generate
+ run: npm run generate && npx prisma generate --schema apps/graphql/prisma/schema.prisma
+
+ - name: Types
+ run: npm run types --workspaces
+
  - name: Build
  run: npm run build
+

.github/workflows/test.yml

@@ -21,15 +21,15 @@ jobs:
  node-version: [16.x]
 
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
  - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v2
+ uses: actions/setup-node@v3
  with:
  node-version: ${{ matrix.node-version }}
  - name: npm Install
- run: npm ci --force
+ run: npm install
  - name: Setup DB
- run: npm run db:push
+ run: npx prisma db push --schema apps/graphql/prisma/schema.prisma
  env:
  # The hostname used to communicate with the PostgreSQL service container
  POSTGRES_HOST: localhost
@@ -39,7 +39,7 @@ jobs:
  POSTGRES_PORT: ${{ job.services.postgres.ports[5432] }}
  DATABASE_URL: postgresql:https://postgres:postgres@localhost:5432/ci_db_test
  - name: Test
- run: npm run test:ci
+ run: npm run test
  env:
  # The hostname used to communicate with the PostgreSQL service container
  POSTGRES_HOST: localhost

.gitignore

@@ -18,6 +18,7 @@ node_modules
 # misc
 .DS_Store
 *.pem
+tsconfig.tsbuildinfo
 
 # debug
 npm-debug.log*
@@ -34,3 +35,7 @@ yarn-error.log*
 # vercel
 .vercel
 .turbo
+
+dist
+.parcel-cache
+.husky

LICENSE.md

@@ -0,0 +1,23 @@
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that:
+
+(1) source code distributions retain the above copyright notice and this
+paragraph in its entirety,
+
+(2) distributions including binary code include the above copyright notice and
+this paragraph in its entirety in the documentation or other materials provided
+with the distribution, and
+
+(3) all advertising materials mentioning features or use of this software
+display the following acknowledgement:
+
+"This product includes software developed by the University of California,
+Lawrence Berkeley Laboratory and its contributors."
+
+Neither the name of the University nor the names of its contributors may be used
+to endorse or promote products derived from this software without specific prior
+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.

README.md

@@ -0,0 +1,75 @@
+![Reubin Header](.github/reubin-og.png)
+
+# Reubin
+
+This is a really simple project that shows the usage of Next.js with TypeScript.
+
+## Setup
+
+### Prerequists
+
+```
+brew install postgres@14 node
+```
+
+### Node
+
+Make sure you're using `16.x` because [Vercel](https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version) currently lists their default runtime as that version. This project uses [npm workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces) & [Turborepo](https://turborepo.org/) and setup is simple:
+
+```
+npm install
+```
+
+### Database
+
+Setup the database by running the following:
+
+```
+psql postgres
+```
+
+This should open a session, copy and paste the following.
+
+```
+CREATE DATABASE reubindb;
+CREATE ROLE reubinadmin WITH LOGIN PASSWORD 'password';
+ALTER ROLE reubinadmin WITH SUPERUSER;
+ALTER DATABASE reubindb OWNER TO reubinadmin;
+\q
+```
+
+Create an `.env` with the following:
+
+```
+DATABASE_URL="postgresql:https://reubinadmin:password@localhost:5432/reubindb?schema=public"
+```
+
+First push the db to setup the tables:
+
+```
+npm run db
+```
+
+Then run the seed comment to populate the db:
+
+```
+npm run seed
+```
+
+## Project Structure
+
+### Application
+
+- `/apps/browser-extension`: Chrome browser extension, uses Preact and Parcel recipes
+- `/apps/graphql`: GraphQL server uses Fastify and Mercurius
+- `/apps/ui`: Web application uses Next.js and TailwindCSS
+
+Each project contains
+
+- `/apps/<project>/src/*`: source code
+- `/apps/<project>/test/*`: all unit tests
+
+### Repository
+
+- `/docs`: Documentation in markdown
+- `/scripts`: Project specific scripts

apps/browser-extension/.parcelrc

@@ -0,0 +1,3 @@
+{
+ "extends": "@parcel/config-webextension"
+}

apps/browser-extension/package.json

@@ -0,0 +1,33 @@
+{
+ "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.1.8",
+ "typescript": "^4.8.4"
+ },
+ "alias": {
+ "preact/jsx-dev-runtime": "preact/jsx-runtime",
+ "react/jsx-runtime": "preact/jsx-runtime"
+ },
+ "postcss": {
+ "plugins": {
+ "tailwindcss": {}
+ }
+ }
+}

apps/browser-extension/src/content.ts

@@ -0,0 +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 (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);
+ }
+});
+
+export {};

apps/browser-extension/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+ const mapping: Record<string, string>;
+ export default mapping;
+}

apps/browser-extension/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/browser-extension/src/index.html

@@ -0,0 +1,54 @@
+<!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>
+
+ <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>
+
+ <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>
+
+ <div class="p-4">
+ <div id="app"></div>
+ </div>
+ </div>
+ <script type="module" src="./popup.ts"></script>
+ </body>
+</html>

apps/browser-extension/src/manifest.json

@@ -0,0 +1,19 @@
+{
+ "$schema": "https://json.schemastore.org/chrome-manifest",
+ "manifest_version": 3,
+ "name": "Reubin",
+ "action": {
+ "default_popup": "index.html",
+ "default_title": "Open the popup"
+ },
+ "content_scripts": [
+ {
+ "matches": ["http:https://*/*", "https://*/*"],
+ "js": ["content.ts"]
+ }
+ ],
+ "description": "Add feeds to Reubin",
+ "permissions": ["clipboardWrite", "activeTab", "storage", "tabs"],
+ "host_permissions": ["http:https://*/*", "https://*/*"],
+ "version": "1.0.0"
+}

apps/browser-extension/src/parse-document.ts

@@ -0,0 +1,13 @@
+export function parseDocumentLinks() {
+ return new Promise<RSSLink[]>((resolve, reject) => {
+ chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+ if (tabs[0] && tabs[0].id) {
+ chrome.tabs.sendMessage(
+ tabs[0].id,
+ { text: "searchRSS", url: tabs[0].url },
+ (feeds: RSSLink[]) => resolve(feeds)
+ );
+ }
+ });
+ });
+}