Skip to content

Commit ef199e9

Browse files
Rich-HarrisRich-Harris
committed
move text styles into a component
1 parent 07de2cc commit ef199e9

File tree

4 files changed

+330
-309
lines changed

4 files changed

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