project description
This commit is contained in:
parent
6ac9bb8c03
commit
918a02e6d2
86
README.md
86
README.md
|
@ -1,38 +1,78 @@
|
||||||
# create-svelte
|
# 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
|
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 the current directory
|
|
||||||
npm create svelte@latest
|
|
||||||
|
|
||||||
# create a new project in my-app
|
### [Skeleton UI library](https://skeleton.dev)
|
||||||
npm create svelte@latest my-app
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
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.
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# or start the server and open the app in a new browser tab
|
### Most importantly, SCREW CMS, use .md or json or yaml and parse them
|
||||||
npm run dev -- --open
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
- it's dead simple and you literally almost just import it
|
||||||
npm run build
|
- 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,
|
||||||
|
|
Loading…
Reference in New Issue