chore: Tailwind und die npm-Toolchain entfernen
Die App hat nie eine Tailwind-Utility benutzt - saemtliche Klassen im Code sind eigene (btn, files-bar, empty-state, ...), und den Reset liefert base.css selbst. Damit standen package.json, node_modules und ein Build-Schritt fuer eine Stylesheet-Datei, die nichts beigetragen hat. Aufgefallen ist es, weil der letzte Commit ungefragt zwoelf Zeilen in assets/tailwind.css mitbrachte: Der Generator scannt auch docs/ und erzeugte Utilities fuer Woerter, die er in Prosa fand. Die npm-Abhaengigkeit war ohnehin wirkungslos - Dioxus 0.7 bringt Tailwind selbst mit (erzeugt wurde 4.1.5, nicht die in package.json deklarierte 4.3.3). Ohne die Eingabedatei tailwind.css im Projektwurzelverzeichnis erzeugt dx nichts mehr; verifiziert durch einen vollstaendigen Build. Das --dn-Praefix der Tokens bleibt: Es war urspruenglich Schutz vor Tailwinds eigenen :root-Variablen, taugt aber weiterhin als Namensraum. README auf den tatsaechlichen Projektstand gebracht - er beschrieb noch die Dioxus-Vorlage mit einer einzelnen main.rs.
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -9,8 +9,5 @@
|
|||||||
# Dioxus build output
|
# Dioxus build output
|
||||||
/dist
|
/dist
|
||||||
|
|
||||||
# Node (tailwind toolchain)
|
|
||||||
node_modules/
|
|
||||||
|
|
||||||
# IDE
|
# IDE
|
||||||
/.idea
|
/.idea
|
||||||
|
|||||||
61
README.md
61
README.md
@@ -1,51 +1,32 @@
|
|||||||
# Development
|
# DioNotes Client
|
||||||
|
|
||||||
Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
|
Lokale Markdown-Notizen-App auf Basis von [Dioxus 0.7](https://dioxuslabs.com/learn/0.7), Desktop.
|
||||||
|
|
||||||
```
|
## Entwicklung
|
||||||
project/
|
|
||||||
├─ assets/ # Any assets that are used by the app should be placed here
|
|
||||||
├─ src/
|
|
||||||
│ ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
|
|
||||||
├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
|
|
||||||
```
|
|
||||||
|
|
||||||
### Automatic Tailwind (Dioxus 0.7+)
|
|
||||||
|
|
||||||
As of Dioxus 0.7, there no longer is a need to manually install tailwind. Simply `dx serve` and you're good to go!
|
|
||||||
|
|
||||||
Automatic tailwind is supported by checking for a file called `tailwind.css` in your app's manifest directory (next to Cargo.toml). To customize the file, use the dioxus.toml:
|
|
||||||
|
|
||||||
```toml
|
|
||||||
[application]
|
|
||||||
tailwind_input = "my.css"
|
|
||||||
tailwind_output = "assets/out.css" # also customize the location of the out file!
|
|
||||||
```
|
|
||||||
|
|
||||||
### Tailwind Manual Install
|
|
||||||
|
|
||||||
To use tailwind plugins or manually customize tailwind, you can can install the Tailwind CLI and use it directly.
|
|
||||||
|
|
||||||
### Tailwind
|
|
||||||
1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
|
|
||||||
2. Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation/tailwind-cli
|
|
||||||
3. Run the following command in the root of the project to start the Tailwind CSS compiler:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css --watch
|
dx serve # Desktop-App starten (Standard-Plattform)
|
||||||
|
dx serve --platform web # im Browser
|
||||||
|
cargo test # Tests
|
||||||
```
|
```
|
||||||
|
|
||||||
### Serving Your App
|
## Aufbau
|
||||||
|
|
||||||
Run the following command in the root of your project to start developing with the default platform:
|
```
|
||||||
|
assets/css/ Design-System: tokens → base → layout → components,
|
||||||
```bash
|
in dieser Reihenfolge in main.rs verlinkt
|
||||||
dx serve
|
src/route.rs alle Routen in einem Routable-Enum
|
||||||
|
src/workspace.rs
|
||||||
|
src/components/ wiederverwendbare Bausteine (CustomLink, CustomButton, …)
|
||||||
|
src/views/ die Bildschirme: Selector und Editor
|
||||||
|
docs/ Konventionen für Agenten, Rechercheergebnisse
|
||||||
```
|
```
|
||||||
|
|
||||||
To run for a different platform, use the `--platform platform` flag. E.g.
|
Es gibt **kein** Tailwind und keine npm-Toolchain — das Styling liegt vollständig in
|
||||||
```bash
|
`assets/css/` und arbeitet mit den `--dn-*`-Tokens.
|
||||||
dx serve --platform desktop
|
|
||||||
```
|
|
||||||
|
|
||||||
|
## Wo die Entscheidungen liegen
|
||||||
|
|
||||||
|
Fachbegriffe stehen in [`CONTEXT.md`](CONTEXT.md). Entscheidungen werden im
|
||||||
|
Issue-Tracker geführt statt in `docs/adr/`; eine Wayfinder-Map indexiert pro Vorhaben,
|
||||||
|
welche Entscheidung wo begründet ist. Siehe [`docs/agents/`](docs/agents/).
|
||||||
|
|||||||
@@ -4,9 +4,9 @@
|
|||||||
Palette: Catppuccin Mocha, matching the editor's Theme::CATPPUCCIN_MOCHA
|
Palette: Catppuccin Mocha, matching the editor's Theme::CATPPUCCIN_MOCHA
|
||||||
so the editor pane and the app chrome are the same surface.
|
so the editor pane and the app chrome are the same surface.
|
||||||
|
|
||||||
All tokens are prefixed --dn-. Tailwind v4 publishes its own --font-*,
|
All tokens are prefixed --dn- to keep them in one namespace. The prefix was
|
||||||
--text-*, --radius-* and --leading-* on :root and tree-shakes that set as
|
originally defence against Tailwind v4, which publishes its own --font-*,
|
||||||
utilities come and go, so an unprefixed token would collide silently.
|
--text-* and --radius-* on :root; Tailwind is gone, the convention stays.
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|||||||
18
package-lock.json
generated
18
package-lock.json
generated
@@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "dionotes-client",
|
|
||||||
"lockfileVersion": 3,
|
|
||||||
"requires": true,
|
|
||||||
"packages": {
|
|
||||||
"": {
|
|
||||||
"dependencies": {
|
|
||||||
"tailwindcss": "^4.3.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/tailwindcss": {
|
|
||||||
"version": "4.3.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
|
|
||||||
"integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"tailwindcss": "^4.3.3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -13,7 +13,6 @@ const FAVICON: Asset = asset!("/assets/favicon.ico");
|
|||||||
// Linked individually rather than via @import in a single entry file: asset!()
|
// Linked individually rather than via @import in a single entry file: asset!()
|
||||||
// only emits files it is given by name, so an @import chain would 404 at runtime.
|
// only emits files it is given by name, so an @import chain would 404 at runtime.
|
||||||
// Order matters — tokens, then baseline, then layout, then components.
|
// Order matters — tokens, then baseline, then layout, then components.
|
||||||
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
|
|
||||||
const TOKENS_CSS: Asset = asset!("/assets/css/tokens.css");
|
const TOKENS_CSS: Asset = asset!("/assets/css/tokens.css");
|
||||||
const BASE_CSS: Asset = asset!("/assets/css/base.css");
|
const BASE_CSS: Asset = asset!("/assets/css/base.css");
|
||||||
const LAYOUT_CSS: Asset = asset!("/assets/css/layout.css");
|
const LAYOUT_CSS: Asset = asset!("/assets/css/layout.css");
|
||||||
@@ -32,9 +31,6 @@ fn App() -> Element {
|
|||||||
|
|
||||||
rsx! {
|
rsx! {
|
||||||
document::Link { rel: "icon", href: FAVICON }
|
document::Link { rel: "icon", href: FAVICON }
|
||||||
// Tailwind first: its preflight lives in @layer base, our unlayered
|
|
||||||
// rules win the cascade regardless, but this keeps source order honest.
|
|
||||||
document::Link { rel: "stylesheet", href: TAILWIND_CSS }
|
|
||||||
document::Link { rel: "stylesheet", href: TOKENS_CSS }
|
document::Link { rel: "stylesheet", href: TOKENS_CSS }
|
||||||
document::Link { rel: "stylesheet", href: BASE_CSS }
|
document::Link { rel: "stylesheet", href: BASE_CSS }
|
||||||
document::Link { rel: "stylesheet", href: LAYOUT_CSS }
|
document::Link { rel: "stylesheet", href: LAYOUT_CSS }
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
Reference in New Issue
Block a user