Skip to content

Commit 2a88e8a

Browse files
TorstenDittmannTorstenDittmann
committed
Rename package to launch.css and improve documentation
Update package name from @dittmann/ui to launch.css across all files. Add installation guide with code samples, integrate syntax highlighting, and restructure documentation for better user experience.
1 parent 0bd50ce commit 2a88e8a

File tree

13 files changed

+111
-48
lines changed

13 files changed

+111
-48
lines changed

‎apps/docs/docs.html‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,9 @@
33
<section id="preview">
44
<h2>Preview</h2>
55
<p>
6-
Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet
7-
suscipit sapien. Nulla iaculis eros a elit pharetra egestas.
6+
Try out the interactive preview below to see Launch CSS in action.
7+
Toggle between themes and layouts to see how your content adapts.
88
</p>
9-
<h3>Layout</h3>
10-
<div>
11-
<button data-layout-switcher="website">Website</button>
12-
<button data-layout-switcher="dashboard">Dashboard</button>
13-
</div>
14-
<h3>Theme</h3>
15-
<div>
16-
<button data-theme-switcher="light">Light</button>
17-
<button data-theme-switcher="dark">Dark</button>
18-
</div>
199
<form>
2010
<input
2111
type="text"
@@ -52,9 +42,10 @@ <h3>Theme</h3>
5242
<h2>Typography</h2>
5343
<p>
5444
Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget
55-
efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat
56-
turpis pretium. Quisque sed tristique felis.
45+
efficitur <code>asd</code> feugiat. Vivamus porta nunc a erat
46+
mattis, mattis feugiat turpis pretium. Quisque sed tristique felis.
5747
</p>
48+
5849
<blockquote>
5950
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
6051
Nam at dui sit amet ipsum cursus ornare."

‎apps/docs/install.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{{#> base title="launch.css" }}
2+
<main>
3+
<section id="getting-started">
4+
<h2>Installation</h2>
5+
<p>You can install launch.css using your preferred package manager:</p>
6+
7+
<pre><code class="language-shell">npx nypm add launch.css</code></pre>
8+
9+
<p>Or use a CDN:</p>
10+
<pre
11+
><code class="language-html">&lt;link rel="stylesheet" href="https://unpkg.com/launch.css" /&gt;</code></pre>
12+
13+
<h3>Basic Setup</h3>
14+
<p>Import the library in your main JavaScript file:</p>
15+
16+
<pre><code class="language-js">import "@launch.css";</code></pre>
17+
18+
<p>Use one of the layouts:</p>
19+
<div>
20+
<button data-layout-switcher="website">Website Layout</button>
21+
<button data-layout-switcher="dashboard">Dashboard Layout</button>
22+
</div>
23+
<pre
24+
><code class="language-html">&lt;body data-layout="website"&gt;</code></pre>
25+
<pre
26+
><code class="language-html">&lt;body data-layout="dashboard"&gt;</code></pre>
27+
</section>
28+
29+
<section id="themes-layouts">
30+
<h2>Themes</h2>
31+
<p>
32+
launch.css supports light and dark themes with seamless switching:
33+
</p>
34+
35+
<div>
36+
<button data-theme-switcher="light">Light Theme</button>
37+
<button data-theme-switcher="dark">Dark Theme</button>
38+
</div>
39+
40+
<h4>Theme Switching Code</h4>
41+
<pre
42+
><code class="language-html">&lt;html data-theme="dark"&gt;</code></pre>
43+
<pre
44+
><code class="language-html">&lt;html data-theme="light"&gt;</code></pre>
45+
</section>
46+
</main>
47+
<script>
48+
for (const element of document.querySelectorAll("[data-theme-switcher]")) {
49+
element.addEventListener("click", () => {
50+
document.documentElement.setAttribute(
51+
"data-theme",
52+
element.dataset.themeSwitcher,
53+
);
54+
});
55+
}
56+
57+
for (const element of document.querySelectorAll("[data-layout-switcher]")) {
58+
element.addEventListener("click", () => {
59+
document.body.setAttribute(
60+
"data-layout",
61+
element.dataset.layoutSwitcher,
62+
);
63+
});
64+
}
65+
</script>
66+
{{/base}}

‎apps/docs/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
import "htmx.org";
2-
import "@dittmann/ui";
2+
import "launch.css";
3+
hljs.highlightAll();

‎apps/docs/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
"preview": "vite preview"
1010
},
1111
"devDependencies": {
12-
"@dittmann/ui": "workspace:*",
13-
"@yoichiro/vite-plugin-handlebars": "^1.4.0",
1412
"htmx.org": "^1.9.12",
13+
"launch.css": "workspace:*",
1514
"vite": "^6.2.0",
1615
"vite-plugin-handlebars": "^2.0.0"
1716
}

‎apps/docs/partials/base.hbs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,17 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="color-scheme" content="light dark" />
77
<title>{{ title }}</title>
8+
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/github-dark.min.css">
9+
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
810
</head>
911

1012
<body data-layout="website">
1113
<header>
12-
<nav hx-boost="true">
14+
<nav>
1315
<a href="/">launch.css</a>
1416
<menu>
15-
<li><a href="/docs">Docs</a></li>
17+
<li><a href="/install">Install</a></li>
18+
<li><a href="/docs">Examples</a></li>
1619
<li><a role="button" href="https://github.com/torstendittmann/launch-css">GitHub</a></li>
1720
</menu>
1821
</nav>

‎apps/docs/vite.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default {
2222
input: {
2323
index: get_path("./index.html"),
2424
docs: get_path("./docs.html"),
25+
install: get_path("./install.html"),
2526
},
2627
},
2728
},

‎examples/website/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "@dittmann/ui";
1+
import "launch.css";
22

33
for (const element of document.querySelectorAll("[data-theme-switcher]")) {
44
element.addEventListener("click", () => {

‎examples/website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"preview": "vite preview"
1010
},
1111
"devDependencies": {
12-
"@dittmann/ui": "workspace:*",
12+
"launch.css": "workspace:*",
1313
"vite": "catalog:"
1414
}
1515
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@dittmann/repo",
2+
"name": "@repo/launch.css",
33
"private": true,
44
"scripts": {
55
"build": "pnpm run -r build",

‎packages/main/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@dittmann/ui",
2+
"name": "launch.css",
33
"version": "1.0.23",
44
"description": "",
55
"main": "dist/index.css",

0 commit comments

Comments
 (0)