Skip to content

Commit ce8f8e0

Browse files
drwpowdrwpow
authoredNov 22, 2021
Clean up styling for framework-* examples (withastro#1970)
·
create-astro@1.2.2astro@0.0.0-next--wasm-20220216194508
1 parent e494523 commit ce8f8e0

File tree

20 files changed

+149
-122
lines changed

20 files changed

+149
-122
lines changed
 

‎examples/framework-multiple/src/components/PreactCounter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ export function PreactCounter({ children }) {
88

99
return (
1010
<>
11-
<div className="counter">
11+
<div class="counter">
1212
<button onClick={subtract}>-</button>
1313
<pre>{count}</pre>
1414
<button onClick={add}>+</button>
1515
</div>
16-
<div className="children">{children}</div>
16+
<div class="counter-message">{children}</div>
1717
</>
1818
);
1919
}

‎examples/framework-multiple/src/components/ReactCounter.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function Counter({ children }) {
1313
<pre>{count}</pre>
1414
<button onClick={add}>+</button>
1515
</div>
16-
<div className="children">{children}</div>
16+
<div className="counter-message">{children}</div>
1717
</>
1818
);
1919
}

‎examples/framework-multiple/src/components/SolidCounter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function SolidCounter({ children }) {
1313
<pre>{count()}</pre>
1414
<button onClick={add}>+</button>
1515
</div>
16-
<div class="children">{children}</div>
16+
<div class="counter-message">{children}</div>
1717
</>
1818
);
1919
}

‎examples/framework-multiple/src/components/SvelteCounter.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
</script>
1414

1515
<div class="counter">
16-
<button on:click={subtract}>-</button>
17-
<pre>{ count }</pre>
18-
<button on:click={add}>+</button>
16+
<button on:click={subtract}>-</button>
17+
<pre>{ count }</pre>
18+
<button on:click={add}>+</button>
1919
</div>
20-
<div class="children">
21-
<slot />
20+
<div class="counter-message">
21+
<slot />
2222
</div>

‎examples/framework-multiple/src/components/VueCounter.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<pre>{{ count }}</pre>
55
<button @click="add()">+</button>
66
</div>
7-
<div class="children">
7+
<div class="counter-message">
88
<slot />
99
</div>
1010
</template>

‎examples/framework-multiple/src/pages/index.astro

+25-44
Original file line numberDiff line numberDiff line change
@@ -13,58 +13,39 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
1313
---
1414
<html lang="en">
1515
<head>
16-
<meta charset="utf-8" />
17-
<meta name="viewport" content="width=device-width" />
18-
19-
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
20-
21-
<style>
22-
:global(:root) {
23-
font-family: system-ui;
24-
padding: 2em 0;
25-
}
26-
:global(.counter) {
27-
display: grid;
28-
grid-template-columns: repeat(3, minmax(0, 1fr));
29-
place-items: center;
30-
font-size: 2em;
31-
margin-top: 2em;
32-
}
33-
:global(.children) {
34-
display: grid;
35-
place-items: center;
36-
margin-bottom: 2em;
37-
}
38-
</style>
16+
<meta charset="utf-8">
17+
<meta name="viewport" content="width=device-width">
18+
<link rel="icon" type="image/x-icon" href="/favicon.ico">
19+
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}>
3920
</head>
4021
<body>
41-
<main>
22+
<main>
23+
24+
<react.Counter client:visible>
25+
<h1>Hello React!</h1>
26+
<p>What's up?</p>
27+
</react.Counter>
4228

43-
<react.Counter client:visible>
44-
<h1>Hello React!</h1>
45-
<p>What's up?</p>
46-
</react.Counter>
29+
<PreactCounter client:visible>
30+
<h1>Hello Preact!</h1>
31+
</PreactCounter>
4732

48-
<PreactCounter client:visible>
49-
<h1>Hello Preact!</h1>
50-
</PreactCounter>
33+
<SolidCounter client:visible>
34+
<h1>Hello Solid!</h1>
35+
</SolidCounter>
5136

52-
<SolidCounter client:visible>
53-
<h1>Hello Solid!</h1>
54-
</SolidCounter>
37+
<VueCounter client:visible>
38+
<h1>Hello Vue!</h1>
39+
</VueCounter>
5540

56-
<VueCounter client:visible>
57-
<h1>Hello Vue!</h1>
58-
</VueCounter>
41+
<SvelteCounter client:visible>
42+
<h1>Hello Svelte!</h1>
43+
</SvelteCounter>
5944

60-
<SvelteCounter client:visible>
61-
<h1>Hello Svelte!</h1>
62-
</SvelteCounter>
45+
<A />
6346

64-
<A />
65-
66-
<Renamed />
47+
<Renamed />
6748

68-
</main>
49+
</main>
6950
</body>
7051
</html>

‎examples/framework-multiple/src/styles/global.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
html,
2+
body {
3+
font-family: system-ui;
4+
margin: 0;
5+
}
6+
7+
body {
8+
padding: 2rem;
9+
}
10+
11+
.counter {
12+
display: grid;
13+
font-size: 2em;
14+
grid-template-columns: repeat(3, minmax(0, 1fr));
15+
margin-top: 2em;
16+
place-items: center;
17+
}
18+
19+
.counter-message {
20+
text-align: center;
21+
}

‎examples/framework-preact/src/components/Counter.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.counter {
2+
display: grid;
3+
font-size: 2em;
4+
grid-template-columns: repeat(3, minmax(0, 1fr));
5+
margin-top: 2em;
6+
place-items: center;
7+
}
8+
9+
.counter-message {
10+
text-align: center;
11+
}

‎examples/framework-preact/src/components/Counter.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { h, Fragment } from 'preact';
22
import { useState } from 'preact/hooks';
3+
import './Counter.css';
34

45
export default function Counter({ children }) {
56
const [count, setCount] = useState(0);
@@ -8,12 +9,12 @@ export default function Counter({ children }) {
89

910
return (
1011
<>
11-
<div className="counter">
12+
<div class="counter">
1213
<button onClick={subtract}>-</button>
1314
<pre>{count}</pre>
1415
<button onClick={add}>+</button>
1516
</div>
16-
<div className="children">{children}</div>
17+
<div class="counter-message">{children}</div>
1718
</>
1819
);
1920
}

‎examples/framework-preact/src/pages/index.astro

+5-13
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,13 @@ import Counter from '../components/Counter.tsx'
1111
<meta name="viewport" content="width=device-width" />
1212
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
1313
<style>
14-
:global(:root) {
14+
html,
15+
body {
1516
font-family: system-ui;
16-
padding: 2em 0;
17+
margin: 0;
1718
}
18-
:global(.counter) {
19-
display: grid;
20-
font-size: 2em;
21-
grid-template-columns: repeat(3, minmax(0, 1fr));
22-
margin-top: 2em;
23-
place-items: center;
24-
}
25-
:global(.children) {
26-
display: grid;
27-
margin-bottom: 2em;
28-
place-items: center;
19+
body {
20+
padding: 2rem;
2921
}
3022
</style>
3123
</head>

‎examples/framework-react/src/components/Counter.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.counter {
2+
display: grid;
3+
font-size: 2em;
4+
grid-template-columns: repeat(3, minmax(0, 1fr));
5+
margin-top: 2em;
6+
place-items: center;
7+
}
8+
9+
.counter-message {
10+
text-align: center;
11+
}

‎examples/framework-react/src/components/Counter.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import './Counter.css';
23

34
export default function Counter({ children, count: initialCount }) {
45
const [count, setCount] = useState(initialCount);
@@ -12,7 +13,7 @@ export default function Counter({ children, count: initialCount }) {
1213
<pre>{count}</pre>
1314
<button onClick={add}>+</button>
1415
</div>
15-
<div className="children">{children}</div>
16+
<div className="counter-message">{children}</div>
1617
</>
1718
);
1819
}

‎examples/framework-react/src/pages/index.astro

+5-13
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,13 @@ const someProps = {
1414
<meta name="viewport" content="width=device-width" />
1515
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
1616
<style>
17-
:global(:root) {
17+
html,
18+
body {
1819
font-family: system-ui;
19-
padding: 2em 0;
20+
margin: 0;
2021
}
21-
:global(.counter) {
22-
display: grid;
23-
font-size: 2em;
24-
grid-template-columns: repeat(3, minmax(0, 1fr));
25-
margin-top: 2em;
26-
place-items: center;
27-
}
28-
:global(.children) {
29-
display: grid;
30-
margin-bottom: 2em;
31-
place-items: center;
22+
body {
23+
padding: 2rem;
3224
}
3325
</style>
3426
</head>

‎examples/framework-solid/src/components/Counter.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.counter {
2+
display: grid;
3+
font-size: 2em;
4+
grid-template-columns: repeat(3, minmax(0, 1fr));
5+
margin-top: 3em;
6+
place-items: center;
7+
}
8+
9+
.counter-message {
10+
text-align: center;
11+
}

‎examples/framework-solid/src/components/Counter.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { createSignal } from 'solid-js';
2+
import './Counter.css';
23

34
export default function Counter({ children }) {
45
const [count, setCount] = createSignal(0);

‎examples/framework-solid/src/pages/index.astro

+6-11
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,14 @@ import Counter from '../components/Counter.jsx';
66
<meta charset="utf-8" />
77
<meta name="viewport" content="width=device-width" />
88
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
9-
<style global>
10-
:root {
9+
<style>
10+
html,
11+
body {
1112
font-family: system-ui;
13+
margin: 0;
1214
}
13-
.counter {
14-
display: grid;
15-
font-size: 2em;
16-
grid-template-columns: repeat(3, minmax(0, 1fr));
17-
margin-top: 3em;
18-
place-items: center;
19-
}
20-
.counter-message {
21-
text-align: center;
15+
body {
16+
padding: 2rem;
2217
}
2318
</style>
2419
</head>

‎examples/framework-svelte/src/components/Counter.svelte

+14-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,19 @@
1515
<pre>{ count }</pre>
1616
<button on:click={add}>+</button>
1717
</div>
18-
<div class="children">
18+
<div class="message">
1919
<slot />
2020
</div>
21+
22+
<style>
23+
.counter{
24+
display: grid;
25+
font-size: 2em;
26+
grid-template-columns: repeat(3, minmax(0, 1fr));
27+
margin-top: 2em;
28+
place-items: center;
29+
}
30+
.message {
31+
text-align: center;
32+
}
33+
</style>

‎examples/framework-svelte/src/pages/index.astro

+5-13
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,13 @@ import Counter from '../components/Counter.svelte'
1212
<meta name="viewport" content="width=device-width" />
1313
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
1414
<style>
15-
:global(:root) {
15+
html,
16+
body {
1617
font-family: system-ui;
17-
padding: 2em 0;
18+
margin: 0;
1819
}
19-
:global(.counter) {
20-
display: grid;
21-
font-size: 2em;
22-
grid-template-columns: repeat(3, minmax(0, 1fr));
23-
margin-top: 2em;
24-
place-items: center;
25-
}
26-
:global(.children) {
27-
display: grid;
28-
margin-bottom: 2em;
29-
place-items: center;
20+
body {
21+
padding: 2rem;
3022
}
3123
</style>
3224
</head>

‎examples/framework-vue/src/components/Counter.vue

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<pre>{{ count }}</pre>
55
<button @click="add()">+</button>
66
</div>
7-
<div class="children">
7+
<div class="counter-message">
88
<slot />
99
</div>
1010
</template>
@@ -25,3 +25,16 @@ export default {
2525
},
2626
};
2727
</script>
28+
29+
<style>
30+
.counter {
31+
display: grid;
32+
font-size: 2em;
33+
grid-template-columns: repeat(3, minmax(0, 1fr));
34+
margin-top: 2em;
35+
place-items: center;
36+
}
37+
.counter-message {
38+
text-align: center;
39+
}
40+
</style>

‎examples/framework-vue/src/pages/index.astro

+5-13
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,13 @@ import Counter from '../components/Counter.vue'
1212
<meta name="viewport" content="width=device-width" />
1313
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
1414
<style>
15-
:global(:root) {
15+
html,
16+
body {
1617
font-family: system-ui;
17-
padding: 2em 0;
18+
margin: 0;
1819
}
19-
:global(.counter) {
20-
display: grid;
21-
font-size: 2em;
22-
grid-template-columns: repeat(3, minmax(0, 1fr));
23-
margin-top: 2em;
24-
place-items: center;
25-
}
26-
:global(.children) {
27-
display: grid;
28-
margin-bottom: 2em;
29-
place-items: center;
20+
body {
21+
padding: 2rem;
3022
}
3123
</style>
3224
</head>

0 commit comments

Comments
 (0)
Please sign in to comment.