Syntax.

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.

Requirements

• Node 18.0.0 or higher

Prerequisite

• 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.

Getting Started

Without Docker

Have your database connection string handy.

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

That's it!

With Docker

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://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME}
     REDIS_PORT=6379
     REDIS_HTTP_PORT=8079
     UPSPLASH_TOKEN=supersecret
     UPSPLASH_URL=http://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 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
/	Root	$

Stylin'

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) {
}

Where to get your own Environment Variables

Variable	Where to get it	Notes
PUBLIC_GITHUB_ID, GH_SECRET	Github Oauth Apps	Create new OAuth App, set http://localhost:5173/api/oauth/github/callback as the redirect URL
DEEPGRAM_SECRET	Deepgram
SENTRY_AUTH_TOKEN	Sentry
OPENAI_API_KEY	Open AI
UPSPLASH_TOKEN, UPSPLASH_URL	https://upstash.com/	Create a redis DB after sign up in the console
YOUTUBE_API_KEY	Google API Console	Create an API key, visit the library and enable "YouTube Data API v3"

Our Contributors