A tasty treats podcast for Web Developers.

This is the site that runs Syntax.fm — go there to listen to it!

This site is built on SvelteKit.

• Node 18.0.0 or higher

• Install Node - https://nodejs.org/en
• Install pnpm - https://pnpm.io/installation
  • If you are on a Mac, there is an issue with the curl install.
  • Preferably, use homebrew to install:
    • brew install pnpm
• Install mysql or use docker with the provided docker-compose.yml file.

This site uses MySQL via Prisma, so you will need a valid MySQL connection string.

Have your database connection string handy.

1. pnpm install
2. pnpm preheat
3. pnpm dev

That's it!

1. Read Prerequisites above ^^ before starting
2. Copy .env.example to .env and specify env variables (needs at least DATABASE_URL, see here for how to get the others)
   • 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)

     # required to run the seed commands within the container
     DOCKER=true
     # any value other than "true" is considered false
     DATABASE_HOST=localhost
     DATABASE_PORT=3306
     DATABASE_USER=syntax
     DATABASE_PASSWORD=syntax
     DATABASE_NAME=syntax
     DATABASE_ROOT_PASSWORD=syntax
     DATABASE_URL=mysql:https://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME}
     REDIS_PORT=6379
     REDIS_HTTP_PORT=8079
     UPSPLASH_TOKEN=supersecret
     UPSPLASH_URL=https://localhost:${REDIS_HTTP_PORT}

3. If using docker, in a separate tab run -> docker compose up
4. Run -> pnpm preheat
5. Run -> pnpm dev
6. Visit https://localhost:5173

• Generate Types pnpm db:generate
• DB studio pnpm db:studio
• DB Migrations pnpm db:push
• DB Seed pnpm db:seed

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.

These are the available media queries:

@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);

// Usage
@media (--above_med) {
}