44ad99d5a7 | ||
---|---|---|
.vscode | ||
src | ||
static | ||
tests | ||
.dockerignore | ||
.eslintignore | ||
.eslintrc.cjs | ||
.gitignore | ||
.npmrc | ||
.prettierignore | ||
.prettierrc | ||
README.md | ||
package.json | ||
playwright.config.ts | ||
postcss.config.cjs | ||
svelte.config.js | ||
tailwind.config.ts | ||
tsconfig.json | ||
vite.config.ts |
README.md
create-svelte
This is the repo of the website Kkosmetickysalon.cz, my mom's business, I also did the logos and branding, which are located in /static
Webapp stack
Sveltekit with advanced config
Sveltekit is simple, modern metaframework for svelte. The docs are great, love the decisions and features, don't need anything more or less for websites with moderate complexity and PWAs.
Skeleton UI library
This is perhaps the best UI library for sveltekit, their docs and their code is great
Tailwind + PostCSS + Fontawesome local
Utility css is quick to develop, easy to remember, readable little boilerplate needed. Postcss as a dependency and for conditional css. Fontawesome free for local icons as fonts.
Most importantly, SCREW CMS, use .md or json or yaml and parse them
Motivation
I have spent considerable amount of time researching and learning the bloatware that is on the internet caused by the nocode movement and enough is enough. It takes a fraction of a time, if any to understand how json works, if you know it's a way to represent and structure content, then you're set.
- it's dead simple and you literally almost just import it
- You don't have to host strapi or a db on a 4GB RAM server in the cloud for making a post once a month
- Static makes better SEO
Use case
I have a $content path (./src/content
), where I have ./services/
and ./posts
in the former I store individual service categories (and their respective items) in json files, in the latter I have posts, where I store .md files, which are subsequently processed by MDSveX and the html outputted from MDSveX is relayed to ./sluzby/[id]
. It's very DRY, there are no lockins and it's reusable on a lot of platforms.
Everything has a schema (e.g. ./sluzby/schema#
) or a type or a generatable template.
The schema can be used with a JSON editor to help nontechies write it.
The json data is then validated by ajv to match the type Service in $lib/types/service.d.ts
Features, Components and parts
A list of mostly
LibreMaps
Screw Google Maps, I knew I wanted to use OSM, maybe Mapbox, because I had experience with it, but this was a great ready made, quality solution, repo is here.
Instagram feed
CSP, custom hooks, custom headers
Securing this app with the latest security features and web technologies.
Service Worker
Why not?
Admin/DevOps Tools
A list of mostly 3rd party useful tools this project uses.
Gitea action CI/CD workflow
hCaptcha
For forms, I may remove this in favor of something else, because it could be a privacy and GDPR issue. Also screw Google and their reCaptcha.
Plausible self-hosted
That or coding some metrics and using some opinionated solution myself.
Sentry - runtime prod & dev analysis
Sentry is cool, I will probably not use 80% of their features, but when doing CSP and all sorts of reporting, this came in very handy. I don't really see an alternative with sveltekit.
Playwright - headless browser target testing
TODO, probably sometime, It can be useful with the service posts.
Dockerfile
Selfhosting this is the only way. I used ansible and terraform to get this thing in the air together with the analytics platform. It's on AWS for now,