@casoon/pages-theme 0.12.10 → 0.12.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/components/Flow.astro +156 -0
- package/components/index.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -136,6 +136,7 @@ Import from `@casoon/pages-theme/components` in `.astro` files; available direct
|
|
|
136
136
|
| `Facts` | Verifiable key figures; `layout="grid"` (tiles) or `"list"` (spec sheet) |
|
|
137
137
|
| `Features` | Core points; `layout="numbered"` (3–5 items) or `"grid"` (an icon-tile catalog) |
|
|
138
138
|
| `Spotlight` | Repeatable two-column feature section — eyebrow, title, lead, bullets, links, beside a media slot |
|
|
139
|
+
| `Flow` | 3–5 stages from input to result, each with its artifact (`index.md`, `dist/`) in a mono chip |
|
|
139
140
|
| `Integrations` | Grid of what the project plugs into: icon tile, name, category |
|
|
140
141
|
| `FileSet` | The files a run produced: `tabs`, `grid` or `rail` view |
|
|
141
142
|
| `BuildOutput` | One real build output on the start page |
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
---
|
|
2
|
+
/**
|
|
3
|
+
* The path from input to result in 3–5 stages, left to right: what goes in, what the project
|
|
4
|
+
* does with it, where it ends up. Each stage names its artifact (`index.md`, `.md → .html`,
|
|
5
|
+
* `dist/`) in a mono chip, so the flow reads as concrete files and commands, not a diagram of
|
|
6
|
+
* buzzwords. An optional eyebrow, title and lead head the section. `body` accepts the
|
|
7
|
+
* changelog's inline Markdown subset.
|
|
8
|
+
*/
|
|
9
|
+
import { inlineMarkdown } from '../lib/changelog';
|
|
10
|
+
|
|
11
|
+
interface Props {
|
|
12
|
+
eyebrow?: string;
|
|
13
|
+
title?: string;
|
|
14
|
+
lead?: string;
|
|
15
|
+
stages: { label: string; artifact: string; title: string; body: string }[];
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const { eyebrow, title, lead, stages } = Astro.props;
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
<section class="flow">
|
|
22
|
+
{
|
|
23
|
+
(eyebrow || title || lead) && (
|
|
24
|
+
<header>
|
|
25
|
+
{eyebrow && <p class="cp-label">{eyebrow}</p>}
|
|
26
|
+
{title && <h2>{title}</h2>}
|
|
27
|
+
{lead && <p class="lead" set:html={inlineMarkdown(lead)} />}
|
|
28
|
+
</header>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
<ol style={`--stages: ${stages.length}`}>
|
|
32
|
+
{
|
|
33
|
+
stages.map((stage, i) => (
|
|
34
|
+
<li>
|
|
35
|
+
<p class="label">
|
|
36
|
+
<span aria-hidden="true">{String(i + 1).padStart(2, '0')} / </span>
|
|
37
|
+
{stage.label}
|
|
38
|
+
</p>
|
|
39
|
+
<code class="artifact">{stage.artifact}</code>
|
|
40
|
+
<h3>{stage.title}</h3>
|
|
41
|
+
<p class="body" set:html={inlineMarkdown(stage.body)} />
|
|
42
|
+
</li>
|
|
43
|
+
))
|
|
44
|
+
}
|
|
45
|
+
</ol>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<style>
|
|
49
|
+
.flow {
|
|
50
|
+
max-width: var(--max);
|
|
51
|
+
margin: 0 auto;
|
|
52
|
+
padding: 80px 24px;
|
|
53
|
+
}
|
|
54
|
+
header {
|
|
55
|
+
max-width: 720px;
|
|
56
|
+
margin-bottom: 44px;
|
|
57
|
+
}
|
|
58
|
+
h2 {
|
|
59
|
+
margin: 0 0 20px;
|
|
60
|
+
color: var(--heading);
|
|
61
|
+
font-size: clamp(32px, 4vw, 50px);
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
letter-spacing: -0.02em;
|
|
64
|
+
line-height: 1.1;
|
|
65
|
+
}
|
|
66
|
+
.lead {
|
|
67
|
+
margin: 0;
|
|
68
|
+
font-size: 18px;
|
|
69
|
+
line-height: 1.65;
|
|
70
|
+
}
|
|
71
|
+
.lead :global(strong) {
|
|
72
|
+
color: var(--heading);
|
|
73
|
+
}
|
|
74
|
+
ol {
|
|
75
|
+
display: grid;
|
|
76
|
+
gap: 10px;
|
|
77
|
+
margin: 0;
|
|
78
|
+
padding: 0;
|
|
79
|
+
list-style: none;
|
|
80
|
+
}
|
|
81
|
+
li {
|
|
82
|
+
position: relative;
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
align-items: flex-start;
|
|
86
|
+
padding: 26px 22px 28px;
|
|
87
|
+
border-radius: var(--r-card);
|
|
88
|
+
background: var(--bg-deep);
|
|
89
|
+
}
|
|
90
|
+
/* Connector to the next stage: below on narrow screens, to the right on wide ones. */
|
|
91
|
+
li:not(:last-child)::after {
|
|
92
|
+
content: '↓';
|
|
93
|
+
position: absolute;
|
|
94
|
+
bottom: -17px;
|
|
95
|
+
left: 50%;
|
|
96
|
+
z-index: 1;
|
|
97
|
+
display: grid;
|
|
98
|
+
place-items: center;
|
|
99
|
+
width: 24px;
|
|
100
|
+
height: 24px;
|
|
101
|
+
border-radius: 50%;
|
|
102
|
+
background: var(--accent-fill);
|
|
103
|
+
color: #fff;
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
line-height: 1;
|
|
106
|
+
transform: translateX(-50%);
|
|
107
|
+
}
|
|
108
|
+
@media (min-width: 900px) {
|
|
109
|
+
ol {
|
|
110
|
+
grid-template-columns: repeat(var(--stages), minmax(0, 1fr));
|
|
111
|
+
}
|
|
112
|
+
li:not(:last-child)::after {
|
|
113
|
+
content: '→';
|
|
114
|
+
top: 50%;
|
|
115
|
+
right: -17px;
|
|
116
|
+
bottom: auto;
|
|
117
|
+
left: auto;
|
|
118
|
+
transform: translateY(-50%);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
.label {
|
|
122
|
+
margin: 0 0 18px;
|
|
123
|
+
color: var(--muted);
|
|
124
|
+
font-family: var(--font-mono);
|
|
125
|
+
font-size: 12.5px;
|
|
126
|
+
letter-spacing: 0.04em;
|
|
127
|
+
text-transform: uppercase;
|
|
128
|
+
}
|
|
129
|
+
.artifact {
|
|
130
|
+
max-width: 100%;
|
|
131
|
+
margin-bottom: 22px;
|
|
132
|
+
padding: 6px 10px;
|
|
133
|
+
overflow-wrap: anywhere;
|
|
134
|
+
border: 1px solid var(--border);
|
|
135
|
+
border-radius: 8px;
|
|
136
|
+
background: var(--surface);
|
|
137
|
+
color: var(--heading);
|
|
138
|
+
font-family: var(--font-mono);
|
|
139
|
+
font-size: 13.5px;
|
|
140
|
+
}
|
|
141
|
+
h3 {
|
|
142
|
+
margin: 0 0 8px;
|
|
143
|
+
color: var(--heading);
|
|
144
|
+
font-size: 20px;
|
|
145
|
+
font-weight: 600;
|
|
146
|
+
line-height: 1.3;
|
|
147
|
+
}
|
|
148
|
+
.body {
|
|
149
|
+
margin: 0;
|
|
150
|
+
font-size: 15.5px;
|
|
151
|
+
line-height: 1.56;
|
|
152
|
+
}
|
|
153
|
+
.body :global(code) {
|
|
154
|
+
font-size: 0.9em;
|
|
155
|
+
}
|
|
156
|
+
</style>
|
package/components/index.ts
CHANGED
|
@@ -13,6 +13,7 @@ export { default as Facts } from './Facts.astro';
|
|
|
13
13
|
export { default as Faq } from './Faq.astro';
|
|
14
14
|
export { default as Features } from './Features.astro';
|
|
15
15
|
export { default as FileSet } from './FileSet.astro';
|
|
16
|
+
export { default as Flow } from './Flow.astro';
|
|
16
17
|
export { default as Hero } from './Hero.astro';
|
|
17
18
|
export { default as Install } from './Install.astro';
|
|
18
19
|
export { default as Integrations } from './Integrations.astro';
|