Release V2

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

.github/workflows/build_and_reimport.yml

@@ -0,0 +1,40 @@
+name: Build and ReImport
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true || github.event_name == 'push'
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Notify
+        run: |
+          STATUS=$?
+          if [[ "$STATUS" -eq 0 ]]; then
+            curl -X POST "http://beta.syntax.fm/webhooks/refresh" -H "Content-Type: application/json" -d '{"status":"success"}'
+          fi

.github/workflows/playwright-tests.yml

@@ -0,0 +1,44 @@
+name: Run_Playwright_Tests_on_PRs
+
+on:
+  pull_request:
+    branches:
+      - v2
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: pnpm-setup
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.5.0
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Setup DB
+        run: pnpm db:generate
+
+      - name: Install playwright browsers
+        run: pnpx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm run test
+        env:
+          PUBLIC_GITHUB_ID: ${{ secrets.PUBLIC_GITHUB_ID }}
+          GH_SECRET: ${{ secrets.GH_SECRET }}
+          DEEPGRAM_SECRET: ${{ secrets.DEEPGRAM_SECRET }}
+          PUBLIC_URL: ${{ secrets.PUBLIC_URL }}
+          SENTRY_AUTH_TOKEN: ''
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}

.github/workflows/svelte_check.yml

@@ -0,0 +1,41 @@
+name: Run_Svelte_Check_on_PRs
+
+on:
+  pull_request:
+    branches:
+      - v2
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: pnpm-setup
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.5.0
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Setup DB
+        run: pnpm db:generate
+
+      - name: Run Svelte Check
+        run: pnpm check
+        env:
+          PUBLIC_GITHUB_ID: ${{ secrets.PUBLIC_GITHUB_ID }}
+          GH_SECRET: ${{ secrets.GH_SECRET }}
+          DEEPGRAM_SECRET: ${{ secrets.DEEPGRAM_SECRET }}
+          PUBLIC_URL: ${{ secrets.PUBLIC_URL }}
+          SENTRY_AUTH_TOKEN: ''
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}

.gitignore

@@ -1,9 +1,23 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
 .next/
-node_modules/
-.DS_store
-*.log
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 haters/
+# Sentry
+.sentryclirc
+transcripts-flagged/
+
+test-results
 .vercel
 .env
 .svelte-kit
-.sentryclirc
+.sentryclirc
+# Temp
+# core.wasm

.npmrc

@@ -1,3 +1 @@
-fund=false
-audit=false
-legacy-peer-deps=true
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,16 @@
+{
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"pluginSearchDirs": ["."],
+	"plugins": ["prettier-plugin-svelte"],
+	"printWidth": 100,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"useTabs": true
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "ardenivanov.svelte-intellisense",
+    "fivethree.vscode-svelte-snippets",
+  ]
+}

.vscode/settings.json

@@ -1,22 +1,22 @@
 {
-  // These are all my auto-save configs
-  "editor.formatOnSave": true,
-  // turn it off for JS and JSX, we will do this via eslint
-  "[javascript]": {
-    "editor.formatOnSave": false
-  },
-  "[javascriptreact]": {
-    "editor.formatOnSave": false
-  },
-  // show eslint icon at bottom toolbar
-  "eslint.alwaysShowStatus": true,
-  // tell the ESLint plugin to run on save
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  },
-  // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
-  "prettier.disableLanguages": [
-    "javascript",
-    "javascriptreact"
-  ],
-}
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": true,
+		"source.fixAll.prettier": true
+	},
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascriptreact]": {
+		"editor.formatOnSave": true
+	},
+	"[typescript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescriptreact]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"cSpell.words": ["Deepgram", "openai", "popovertarget", "Tolinski", "waait"]
+}

README.md

@@ -4,20 +4,64 @@ A tasty treats podcast for Web Developers.
 
 This is the site that runs [Syntax.fm](https://syntax.fm) — go there to listen to it!
 
-This site is built on React and Next.js
+This site is built on SvelteKit
 
 ## Requirements
 
-- Node 18.1.2 or higher
+- Node 20.0.0 or higher
+
+## Database
+
+Make sure to have a `DATABASE_URL` environmental variable set.
+
+If this is your first time, run `pnpm db:push` to create the tables in your database.
+
+Then run `pnpm db:seed` to scaffold out the user roles.
 
 ## Development
 
-First you `npm install`
+First you `pnpm install`
+
+Then you `pnpm dev` and visit `http://localhost:5173`.
+
+### Scripts
+
+Generate Types `pnpm db:generate`
+DB studio `pnpm db:studio`
+DB Migrations `pnpm db:push`
+DB Seed `pnpm db:seed`
+
+### About this codebase
+
+Just about all major code folders live in `/src` with the exception of `/shows` - the md source of truth for all podcast episodes as well as `/prisma` for our db connections and schema.
+
+|              |                                                                                               | Alias      |
+| ------------ | --------------------------------------------------------------------------------------------- | ---------- |
+| `/actions`   | Svelte Actions, these are reusable functions that act as lifecycle on DOM elements            | $actions   |
+| `/assets`    | Static assets that are used via @import                                                       | $assets    |
+| `/server`    | All database and server-side only reusable code                                               | $server    |
+| `/lib`       | (SK Paradigm) Components and files that are used in more than one route                       | $lib       |
+| `/params`    | (SK Paradigm) This is a SvelteKit specific folder to add validation on parameter based routes |            |
+| `/routes`    | (SK Paradigm) File System based routing                                                       |            |
+| `/state`     | Global State containers and resolvers                                                         | $state     |
+| `/styles`    | CSS                                                                                           |
+| `/utilities` | Global Utility functions                                                                      | $utilities |
 
-Then you `npm run dev` and visit `http://localhost:6969`.
+### Stylin'
 
-Then you do some work.
+These are the available media queries
 
-When you are ready for prime time, you can just submit a PR to this repo and it will be deployed once it's accepted.
+```css
+@custom-media --below_small (width < 400px);
+@custom-media --below_med (width < 700px);
+@custom-media --below_large (width < 900px);
+@custom-media --below_xlarge (width < 1200px);
+@custom-media --above_small (width > 400px);
+@custom-media --above_med (width > 700px);
+@custom-media --above_large (width > 900px);
+@custom-media --above_xlarge (width > 1200px);
 
-If you want to build your own version, just run `npm run build` and then I'd recommend deploying with `now`.
+// Usage
+@media (--above_med) {
+}
+```