From 918a02e6d281e5b2f345ec8caa0e5f365181efce Mon Sep 17 00:00:00 2001 From: matthieu42morin Date: Wed, 20 Mar 2024 16:14:17 +0100 Subject: [PATCH] project description --- README.md | 86 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 63 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 5c91169..6b7d0dc 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,78 @@ # create-svelte -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). +This is the repo of the website [Kkosmetickysalon.cz](https://kkosmetickysalon.cz), my mom's business, I also did the logos and branding, which are located in `/static` -## Creating a project +## Webapp stack -If you're seeing this, you've probably already done this step. Congrats! +### [Sveltekit with advanced config](https://kit.svelte.dev/docs/introduction) -```bash -# create a new project in the current directory -npm create svelte@latest +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. -# create a new project in my-app -npm create svelte@latest my-app -``` +### [Skeleton UI library](https://skeleton.dev) -## Developing +This is perhaps the best UI library for sveltekit, their docs and their code is great -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +### Tailwind + PostCSS + Fontawesome local -```bash -npm run dev +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. -# or start the server and open the app in a new browser tab -npm run dev -- --open -``` +### Most importantly, SCREW CMS, use .md or json or yaml and parse them -## Building +#### Motivation -To create a production version of your app: +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. -```bash -npm run build -``` +- 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 -You can preview the production build with `npm run preview`. +#### Use case -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. +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](https://github.com/json-editor/json-editor) to help nontechies write it. +The json data is then validated by [ajv](https://ajv.js.org) to match the type Service in `$lib/types/service.d.ts` + +## Features, Components and parts + +A list of mostly + +### [LibreMaps](https://svelte-maplibre.vercel.app/) + +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](https://github.com/dimfeld/svelte-maplibre). + +### [Instagram feed](https://github.com/rodneylab/sveltekit-instagram-infinite-scroll) + +### 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,