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.
brew install pnpm
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.
pnpm install
pnpm preheat
pnpm dev
That's it!
.env.example
to .env
and specify env variables (needs at least DATABASE_URL
, see here for how to get the others).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}
docker compose up
pnpm preheat
pnpm dev
http://localhost:5173
pnpm db:generate
pnpm db:studio
pnpm db:push
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.
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 | $ |
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) {
}
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" |