Skip to content

Commit c9a046f

Browse files
Rich-HarrisRich-Harris
authored
Text component (#175)
* move text styles into a component * refactor CSS * prettier
1 parent 07de2cc commit c9a046f

File tree

4 files changed

+334
-315
lines changed

4 files changed

+334
-315
lines changed

‎apps/svelte.dev/src/routes/docs/[...path]/+page.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Icon } from '@sveltejs/site-kit/components';
2+
import { Icon, Text } from '@sveltejs/site-kit/components';
33
import { copy_code_descendants, legacy_details, ts_js_select } from '@sveltejs/site-kit/actions';
44
import { setupDocsHovers } from '@sveltejs/site-kit/docs';
55
import OnThisPage from './OnThisPage.svelte';
@@ -31,8 +31,11 @@
3131

3232
<OnThisPage {content} document={data.document} />
3333

34+
<!-- TODO emit scroll events from <Text> so we don't need the `bind:this` and can ditch the wrapper element -->
3435
<div class="text content" bind:this={content}>
35-
{@html data.document.body}
36+
<Text>
37+
{@html data.document.body}
38+
</Text>
3639
</div>
3740

3841
<p class="edit">

‎packages/site-kit/src/lib/components/Text.svelte

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
4+
let { children }: { children: Snippet } = $props();
5+
</script>
6+
7+
<div class="text">{@render children()}</div>
8+
9+
<style>
10+
.text :global {
11+
h2 {
12+
margin-top: 7rem;
13+
}
14+
15+
h3 {
16+
margin-top: 5rem;
17+
}
18+
19+
p,
20+
ol,
21+
ul {
22+
margin: 1em 0;
23+
font-size: var(--sk-text-s);
24+
}
25+
26+
/* TODO is this still used? don't think so */
27+
section {
28+
max-width: var(--sk-line-max-width);
29+
padding: 0 0 0 1rem;
30+
31+
h2,
32+
h3,
33+
h4 {
34+
margin-left: -1rem;
35+
}
36+
37+
a code {
38+
color: inherit;
39+
}
40+
}
41+
42+
code {
43+
white-space: pre-wrap;
44+
padding: 0.2rem 0.4rem;
45+
margin: 0 0.2rem;
46+
top: -0.1rem;
47+
background: var(--sk-back-4);
48+
}
49+
50+
.code-block {
51+
position: relative;
52+
53+
.filename {
54+
content: attr(data-file);
55+
display: block;
56+
width: 100%;
57+
font-family: var(--sk-font-mono);
58+
font-size: 1.2rem;
59+
font-weight: 400;
60+
padding: 1rem 1rem 0.8rem 1rem;
61+
color: var(--sk-text-2);
62+
background: var(--sk-back-4);
63+
border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
64+
box-sizing: border-box;
65+
}
66+
67+
pre {
68+
margin-top: 0;
69+
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
70+
}
71+
}
72+
73+
pre {
74+
position: relative;
75+
margin: 1em 0;
76+
width: 100%;
77+
padding: 1rem;
78+
box-sizing: border-box;
79+
color: var(--sk-code-base);
80+
border-radius: var(--sk-border-radius);
81+
font-size: var(--sk-text-s);
82+
overflow-x: auto;
83+
84+
code {
85+
display: block;
86+
padding: 0;
87+
margin: 0;
88+
top: 0;
89+
width: 100%;
90+
background: transparent;
91+
}
92+
93+
a:hover {
94+
border-bottom: 1px solid var(--sk-theme-1);
95+
text-decoration: none;
96+
}
97+
98+
/* TODO what is this for? */
99+
&.border {
100+
border-left: 5px solid var(--sk-theme-2);
101+
}
102+
103+
&.language-diff code {
104+
color: var(--sk-code-diff-base);
105+
}
106+
}
107+
108+
p code {
109+
max-width: 100%;
110+
display: inline-flex;
111+
overflow-x: auto;
112+
padding-top: 0;
113+
padding-bottom: 0;
114+
}
115+
116+
/* TODO what is this for? */
117+
.copy-code-block {
118+
box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
119+
}
120+
121+
a:not(.permalink) {
122+
color: inherit;
123+
text-decoration: underline;
124+
transition: box-shadow 0.1s ease-in-out;
125+
126+
/* TODO what is this for? */
127+
code {
128+
all: unset !important;
129+
color: inherit;
130+
background-color: transparent !important;
131+
}
132+
}
133+
134+
/* permalinks */
135+
[id] {
136+
scroll-margin-top: calc(var(--sk-nav-height) + 4rem);
137+
}
138+
139+
a.permalink {
140+
position: absolute !important;
141+
display: block;
142+
background: url(../icons/link.svg) 0 50% no-repeat;
143+
background-size: 1em 1em;
144+
width: 1.4em;
145+
height: 1em;
146+
bottom: 0.25em;
147+
148+
@media (max-width: 767px) {
149+
right: 0;
150+
scale: 0.8;
151+
}
152+
153+
@media (min-width: 768px) {
154+
left: -1.3em;
155+
opacity: 0;
156+
transition: opacity 0.2s;
157+
158+
:where(h2, h3, h4, h5, h6):hover & {
159+
opacity: 1;
160+
}
161+
}
162+
}
163+
164+
ol,
165+
ul {
166+
--list-padding: 3rem;
167+
margin-left: var(--list-padding);
168+
}
169+
170+
ul {
171+
list-style: none;
172+
173+
li::before {
174+
content: '';
175+
position: absolute;
176+
margin-top: 0.8rem;
177+
margin-left: -1.8rem;
178+
background-color: var(--sk-back-5);
179+
width: 0.6rem;
180+
height: 0.6rem;
181+
border-radius: 2px;
182+
opacity: 0.7;
183+
}
184+
185+
ul {
186+
margin-bottom: 0;
187+
}
188+
}
189+
190+
ol {
191+
list-style: decimal;
192+
}
193+
194+
li {
195+
position: relative;
196+
max-width: calc(var(--sk-line-max-width) - var(--list-padding));
197+
line-height: 1.5;
198+
margin: 0 0 0.5em 0;
199+
}
200+
201+
table {
202+
margin: 1em 0;
203+
}
204+
205+
small {
206+
font-size: var(--sk-text-s);
207+
float: right;
208+
pointer-events: all;
209+
color: var(--sk-theme-1);
210+
cursor: pointer;
211+
}
212+
213+
blockquote {
214+
--primary-hsl: var(--sk-theme-1-hsl);
215+
color: var(--sk-text-1);
216+
padding: 0 0 0 4.5rem;
217+
font-style: italic;
218+
219+
&:first-child {
220+
margin-top: 0;
221+
}
222+
223+
&:last-child {
224+
margin-bottom: 0;
225+
}
226+
227+
&::before {
228+
content: '';
229+
display: block;
230+
width: 3rem;
231+
height: 3rem;
232+
position: absolute;
233+
left: 0.5rem;
234+
top: 0;
235+
background: url($lib/icons/lightbulb.svg) no-repeat 50% 50% / contain;
236+
}
237+
238+
&.deprecated {
239+
--primary-hsl: var(--sk-text-warning-hsl);
240+
--color: var(--primary-hsl);
241+
242+
&::before {
243+
content: 'Deprecated';
244+
}
245+
246+
a {
247+
--color: var(--primary-hsl);
248+
}
249+
}
250+
251+
em,
252+
i {
253+
font-style: normal;
254+
}
255+
256+
code {
257+
font-style: normal;
258+
}
259+
260+
@media (max-width: 767px) {
261+
* {
262+
word-break: break-word;
263+
}
264+
}
265+
}
266+
267+
details.legacy {
268+
&::after {
269+
content: '';
270+
background: url(../icons/chevron.svg);
271+
background-size: contain;
272+
position: absolute;
273+
right: 0.5rem;
274+
top: 0.5rem;
275+
width: 2rem;
276+
height: 2rem;
277+
rotate: -90deg;
278+
transition: rotate 0.2s;
279+
pointer-events: none;
280+
}
281+
282+
& > summary {
283+
position: relative;
284+
display: flex;
285+
align-items: center;
286+
height: 3rem;
287+
color: var(--sk-text-4);
288+
font-family: var(--sk-font-heading);
289+
font-style: normal;
290+
font-size: var(--sk-text-xs);
291+
user-select: none;
292+
293+
&:hover {
294+
color: var(--sk-text-3);
295+
}
296+
297+
&::after {
298+
position: absolute;
299+
display: flex;
300+
align-items: center;
301+
right: 3rem;
302+
top: 0;
303+
height: 100%;
304+
content: 'show all';
305+
float: right;
306+
}
307+
}
308+
309+
&[open] {
310+
&::after {
311+
rotate: 90deg;
312+
}
313+
314+
& > summary {
315+
margin-bottom: 1.4rem;
316+
317+
&::after {
318+
content: 'hide all';
319+
}
320+
}
321+
}
322+
323+
& > :last-child {
324+
margin-bottom: 0;
325+
}
326+
}
327+
}
328+
</style>

‎packages/site-kit/src/lib/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ export { default as Icon } from './Icon.svelte';
33
export { default as Icons } from './Icons.svelte';
44
export { default as Section } from './Section.svelte';
55
export { default as Shell } from './Shell.svelte';
6+
export { default as Text } from './Text.svelte';
67
export { default as ThemeToggle } from './ThemeToggle.svelte';
78
export { default as LinksDropdown } from './LinksDropdown.svelte';

0 commit comments

Comments
 (0)