Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
56 lines
3.5 KiB
Markdown
56 lines
3.5 KiB
Markdown
## Good to know
|
|
|
|
- Using custom tags directly inside the <template> tag will fuck up transitions, always wrap within an extra div
|
|
|
|
## Monorepo setup
|
|
|
|
### Version management
|
|
|
|
The following principes apply:
|
|
- The whole monorepo has a single pnpm-lock.yaml
|
|
- Dependencies are locked to exact versions
|
|
- CI build happens with `pnpm install --frozen-lockfile` (fails if out of sync with package.json)
|
|
- Use only the `pnpm manage` tool to handle dependencies
|
|
|
|
Declarations in `package.json` are as follows (enforce with pnpm manage)
|
|
- Regular dependencies are the ones needed at runtime. Dependencies of a library and consumer are independent, e.g. if layer specifies yaml and the app also then two independent yaml installations are used.
|
|
- Dev dependencies are purely needed for development/build of the current package. If a layer uses a dependency for e.g. a build hook that is used in a consumer then declare it a regular dependency.
|
|
- Peer dependencies are for library packages that request the final consumer to provide a shared framework (e.g. nuxt, vue) or extend that shared framework (e.g. @nuxt/icon). A peer dependency must always also be listed as dev dependency in the declaring library package. If a library depends on another library it should re-declare the peer (& associated dev) dependencies.
|
|
- The final consumer (app) declares all peer dependencies from parent packages as prod dependencies
|
|
|
|
## Tailwind setup
|
|
|
|
Dont use @nuxtjs/tailwindcss. Follow the instructions at https://tailwindcss.com/docs/installation/framework-guides/nuxt (actually adding the tailwind plugin in nuxt.config.ts isnt necessary it seems)
|
|
tailwind.config.js isnt a thing anymore according to docs, everything can be configured in the css file: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration
|
|
|
|
--spacing-* isnt a thing anymore, only a single --spacing (defaults to 0.25rem) is used now. It scales basically everything, e.g. p-<number> means padding: calc(var(--spacing) * <number>);
|
|
|
|
Utilities are only generated if detected by tailwind, need to use @source or import "tailwind" source("dir-to-scan"), need to check how this works in apps
|
|
|
|
tailwind classes like p-* are only supposed to take integers or .5 steps, nothing else (and this only for backwards compatibility)
|
|
|
|
Tailwind scans source files for used classes and only generates those. Doesnt work too well apparently with nuxt, so in the .css write @source to specify folders to scan
|
|
This especially applies to apps that use layers, where the layers export components that themselves use some classes, so best do @source the layer too.
|
|
|
|
## Ellipsis
|
|
|
|
set width:100% on all parents (or somehow a defined with)
|
|
apply truncate to direct parent of text (e.g. <span class=truncate)
|
|
within flexbox or grid set min-w-0 for parent if it doesnt work. if inside a flex-col also set w-full to the span itself in addition to truncate
|
|
|
|
## Mobile menu background scale
|
|
|
|
set data-vaul-drawer-wrapper e.g. on whatever should be zoomed out (eg <main data-vaul-drawer-wrapper)
|
|
|
|
## Vue component props
|
|
|
|
If a boolean is specified in defineProps as flag?: boolean and its not passed vue makes it false, not undefined!
|
|
explicitely set useDefaults
|
|
|
|
## HTML tags
|
|
|
|
footer (outside main) is furniture, dont use h1 or so, just use p and style it like it was e.g. heading
|
|
each route should have exactly one h1. can be in header navbar if its dynamic, or somewhere hidden, but it should be there.
|
|
|
|
## DOES NOT HAVE A SINGLE ROOT ERRRO
|
|
For the love of god never put a html comment inside a <template> section |