|
| 1 | +# Syntax. |
| 2 | + |
| 3 | +A tasty treats podcast for Web Developers. |
| 4 | + |
| 5 | +This is the site that runs [Syntax.fm](https://syntax.fm) — go there to listen to it! |
| 6 | + |
| 7 | +This site is built on SvelteKit. |
| 8 | + |
| 9 | +## Requirements |
| 10 | + |
| 11 | +- Node 22.0.0 or higher |
| 12 | + |
| 13 | +## Prerequisite |
| 14 | + |
| 15 | +- Install Node - https://nodejs.org/en |
| 16 | +- Install pnpm - https://pnpm.io/installation |
| 17 | + - If you are on a Mac, there is an issue with the curl install. |
| 18 | + - Preferably, use homebrew to install: |
| 19 | + - `brew install pnpm` |
| 20 | +- Install mysql or use docker with the provided `docker-compose.yml` file. |
| 21 | + |
| 22 | +This site uses MySQL via Prisma, so you will need a valid MySQL connection string. |
| 23 | + |
| 24 | +## Getting Started |
| 25 | + |
| 26 | +### Without Docker |
| 27 | + |
| 28 | +Have your database connection string handy. |
| 29 | + |
| 30 | +1. `pnpm install` |
| 31 | +2. `pnpm preheat` |
| 32 | +3. `pnpm dev` |
| 33 | + |
| 34 | +That's it! |
| 35 | + |
| 36 | +### With Docker |
| 37 | + |
| 38 | +1. Read Prerequisites above ^^ before starting |
| 39 | +1. Copy `.env.example` to `.env` and specify env variables (needs at least `DATABASE_URL`, see [here](#where-to-get-your-own-environment-variables) for how to get the others) |
| 40 | + - If using Docker, add the following at the top of your `.env` file to share variables with the `docker-compose.yml` (replace the existing DATABASE_URL with the one below) |
| 41 | + ```sh |
| 42 | + # required to run the seed commands within the container |
| 43 | + DOCKER=true |
| 44 | + # any value other than "true" is considered false |
| 45 | + DATABASE_HOST=localhost |
| 46 | + DATABASE_PORT=3306 |
| 47 | + DATABASE_USER=syntax |
| 48 | + DATABASE_PASSWORD=syntax |
| 49 | + DATABASE_NAME=syntax |
| 50 | + DATABASE_ROOT_PASSWORD=syntax |
| 51 | + DATABASE_URL=mysql://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME} |
| 52 | + REDIS_PORT=6379 |
| 53 | + REDIS_HTTP_PORT=8079 |
| 54 | + UPSPLASH_TOKEN=supersecret |
| 55 | + UPSPLASH_URL=http://localhost:${REDIS_HTTP_PORT} |
| 56 | + ``` |
| 57 | +1. If using docker, in a separate tab run -> `docker compose up` |
| 58 | +1. Run -> `pnpm preheat` |
| 59 | +1. Run -> `pnpm dev` |
| 60 | +1. Visit `http://localhost:5173` |
| 61 | + |
| 62 | +### Scripts |
| 63 | + |
| 64 | +- Generate Types `pnpm db:generate` |
| 65 | +- DB studio `pnpm db:studio` |
| 66 | +- DB Migrations `pnpm db:push` |
| 67 | +- DB Seed `pnpm db:seed` |
| 68 | + |
| 69 | +### About this codebase |
| 70 | + |
| 71 | +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. |
| 72 | + |
| 73 | +| | | Alias | |
| 74 | +| ------------ | --------------------------------------------------------------------------------------------- | ---------- | |
| 75 | +| `/actions` | Svelte Actions, these are reusable functions that act as lifecycle on DOM elements | $actions | |
| 76 | +| `/assets` | Static assets that are used via @import | $assets | |
| 77 | +| `/server` | All database and server-side only reusable code | $server | |
| 78 | +| `/lib` | (SK Paradigm) Components and files that are used in more than one route | $lib | |
| 79 | +| `/params` | (SK Paradigm) This is a SvelteKit specific folder to add validation on parameter based routes | | |
| 80 | +| `/routes` | (SK Paradigm) File System based routing | | |
| 81 | +| `/state` | Global State containers and resolvers | $state | |
| 82 | +| `/styles` | CSS | |
| 83 | +| `/utilities` | Global Utility functions | $utilities | |
| 84 | +| `/` | Root | $ | |
| 85 | + |
| 86 | +### Stylin' |
| 87 | + |
| 88 | +These are the available media queries: |
| 89 | + |
| 90 | +```css |
| 91 | +@custom-media --below-small (width < 400px); |
| 92 | +@custom-media --below-med (width < 700px); |
| 93 | +@custom-media --below-large (width < 900px); |
| 94 | +@custom-media --below-xlarge (width < 1200px); |
| 95 | +@custom-media --above-small (width > 400px); |
| 96 | +@custom-media --above-med (width > 700px); |
| 97 | +@custom-media --above-large (width > 900px); |
| 98 | +@custom-media --above-xlarge (width > 1200px); |
| 99 | +
|
| 100 | +// Usage |
| 101 | +@media (--above-med) { |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +### Where to get your own Environment Variables |
| 106 | + |
| 107 | +| Variable | Where to get it | Notes | |
| 108 | +| ---------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | |
| 109 | +| PUBLIC_GITHUB_ID, GH_SECRET | [Github Oauth Apps](https://github.com/settings/developers) | Create new OAuth App, set `http://localhost:5173/api/oauth/github/callback` as the redirect URL | |
| 110 | +| DEEPGRAM_SECRET | [Deepgram](https://console.deepgram.com/) | | |
| 111 | +| SENTRY_AUTH_TOKEN | [Sentry](https://docs.sentry.io/product/accounts/auth-tokens/) | | |
| 112 | +| OPENAI_API_KEY | [Open AI](https://platform.openai.com/account/api-keys) | | |
| 113 | +| UPSPLASH_TOKEN, UPSPLASH_URL | [https://upstash.com/](https://upstash.com/) | Create a redis DB after sign up in the console | |
| 114 | +| YOUTUBE_API_KEY | [Google API Console](https://console.cloud.google.com/apis/credentials) | Create an API key, visit the library and enable "YouTube Data API v3" | |
| 115 | + |
| 116 | +# Our Contributors |
| 117 | + |
| 118 | +<a href="https://github.com/syntaxfm/website/graphs/contributors"> |
| 119 | + <img src="https://contrib.rocks/image?repo=syntaxfm/website" /> |
| 120 | +</a> |
0 commit comments