michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Clean up styling for framework-* examples (#1970)

Browse source
This commit is contained in:
Drew Powers 2021-11-22 13:38:53 -07:00 committed by GitHub
parent e49452325c
commit ce8f8e06c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 149 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/framework-multiple/src/components/PreactCounter.tsx
View file

@ -8,12 +8,12 @@ export function PreactCounter({ children }) {
return (
<>
<div className="counter">
<div class="counter">
<button onClick={subtract}>-</button>
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
<div className="children">{children}</div>
<div class="counter-message">{children}</div>
</>
);
}

2
examples/framework-multiple/src/components/ReactCounter.jsx
View file

@ -13,7 +13,7 @@ export function Counter({ children }) {
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
<div className="children">{children}</div>
<div className="counter-message">{children}</div>
</>
);
}

2
examples/framework-multiple/src/components/SolidCounter.tsx
View file

@ -13,7 +13,7 @@ export default function SolidCounter({ children }) {
<pre>{count()}</pre>
<button onClick={add}>+</button>
</div>
<div class="children">{children}</div>
<div class="counter-message">{children}</div>
</>
);
}

10
examples/framework-multiple/src/components/SvelteCounter.svelte
View file

@ -13,10 +13,10 @@
</script>
<div class="counter">
<button on:click={subtract}>-</button>
<pre>{ count }</pre>
<button on:click={add}>+</button>
<button on:click={subtract}>-</button>
<pre>{ count }</pre>
<button on:click={add}>+</button>
</div>
<div class="children">
<slot />
<div class="counter-message">
<slot />
</div>

2
examples/framework-multiple/src/components/VueCounter.vue
View file

@ -4,7 +4,7 @@
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
<div class="children">
<div class="counter-message">
<slot />
</div>
</template>

69
examples/framework-multiple/src/pages/index.astro
View file

@ -13,58 +13,39 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
:global(:root) {
font-family: system-ui;
padding: 2em 0;
}
:global(.counter) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
place-items: center;
font-size: 2em;
margin-top: 2em;
}
:global(.children) {
display: grid;
place-items: center;
margin-bottom: 2em;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}>
</head>
<body>
<main>
<main>
<react.Counter client:visible>
<h1>Hello React!</h1>
<p>What's up?</p>
</react.Counter>
<react.Counter client:visible>
<h1>Hello React!</h1>
<p>What's up?</p>
</react.Counter>
<PreactCounter client:visible>
<h1>Hello Preact!</h1>
</PreactCounter>
<PreactCounter client:visible>
<h1>Hello Preact!</h1>
</PreactCounter>
<SolidCounter client:visible>
<h1>Hello Solid!</h1>
</SolidCounter>
<SolidCounter client:visible>
<h1>Hello Solid!</h1>
</SolidCounter>
<VueCounter client:visible>
<h1>Hello Vue!</h1>
</VueCounter>
<VueCounter client:visible>
<h1>Hello Vue!</h1>
</VueCounter>
<SvelteCounter client:visible>
<h1>Hello Svelte!</h1>
</SvelteCounter>
<SvelteCounter client:visible>
<h1>Hello Svelte!</h1>
</SvelteCounter>
<A />
<Renamed />
<A />
</main>
<Renamed />
</main>
</body>
</html>

21
examples/framework-multiple/src/styles/global.css Normal file
View file

@ -0,0 +1,21 @@
html,
body {
font-family: system-ui;
margin: 0;
}
body {
padding: 2rem;
}
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.counter-message {
text-align: center;
}

11
examples/framework-preact/src/components/Counter.css Normal file
View file

@ -0,0 +1,11 @@
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.counter-message {
text-align: center;
}

5
examples/framework-preact/src/components/Counter.tsx
View file

@ -1,5 +1,6 @@
import { h, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import './Counter.css';
export default function Counter({ children }) {
const [count, setCount] = useState(0);
@ -8,12 +9,12 @@ export default function Counter({ children }) {
return (
<>
<div className="counter">
<div class="counter">
<button onClick={subtract}>-</button>
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
<div className="children">{children}</div>
<div class="counter-message">{children}</div>
</>
);
}

18
examples/framework-preact/src/pages/index.astro
View file

@ -11,21 +11,13 @@ import Counter from '../components/Counter.tsx'
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
:global(:root) {
html,
body {
font-family: system-ui;
padding: 2em 0;
margin: 0;
}
:global(.counter) {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
:global(.children) {
display: grid;
margin-bottom: 2em;
place-items: center;
body {
padding: 2rem;
}
</style>
</head>

11
examples/framework-react/src/components/Counter.css Normal file
View file

@ -0,0 +1,11 @@
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.counter-message {
text-align: center;
}

3
examples/framework-react/src/components/Counter.jsx
View file

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import './Counter.css';
export default function Counter({ children, count: initialCount }) {
const [count, setCount] = useState(initialCount);
@ -12,7 +13,7 @@ export default function Counter({ children, count: initialCount }) {
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
<div className="children">{children}</div>
<div className="counter-message">{children}</div>
</>
);
}

18
examples/framework-react/src/pages/index.astro
View file

@ -14,21 +14,13 @@ const someProps = {
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
:global(:root) {
html,
body {
font-family: system-ui;
padding: 2em 0;
margin: 0;
}
:global(.counter) {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
:global(.children) {
display: grid;
margin-bottom: 2em;
place-items: center;
body {
padding: 2rem;
}
</style>
</head>

11
examples/framework-solid/src/components/Counter.css Normal file
View file

@ -0,0 +1,11 @@
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 3em;
place-items: center;
}
.counter-message {
text-align: center;
}

1
examples/framework-solid/src/components/Counter.jsx
View file

@ -1,4 +1,5 @@
import { createSignal } from 'solid-js';
import './Counter.css';
export default function Counter({ children }) {
const [count, setCount] = createSignal(0);

17
examples/framework-solid/src/pages/index.astro
View file

@ -6,19 +6,14 @@ import Counter from '../components/Counter.jsx';
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style global>
:root {
<style>
html,
body {
font-family: system-ui;
margin: 0;
}
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 3em;
place-items: center;
}
.counter-message {
text-align: center;
body {
padding: 2rem;
}
</style>
</head>

15
examples/framework-svelte/src/components/Counter.svelte
View file

@ -15,6 +15,19 @@
<pre>{ count }</pre>
<button on:click={add}>+</button>
</div>
<div class="children">
<div class="message">
<slot />
</div>
<style>
.counter{
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.message {
text-align: center;
}
</style>

18
examples/framework-svelte/src/pages/index.astro
View file

@ -12,21 +12,13 @@ import Counter from '../components/Counter.svelte'
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
:global(:root) {
html,
body {
font-family: system-ui;
padding: 2em 0;
margin: 0;
}
:global(.counter) {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
:global(.children) {
display: grid;
margin-bottom: 2em;
place-items: center;
body {
padding: 2rem;
}
</style>
</head>

15
examples/framework-vue/src/components/Counter.vue
View file

@ -4,7 +4,7 @@
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
<div class="children">
<div class="counter-message">
<slot />
</div>
</template>
@ -25,3 +25,16 @@ export default {
},
};
</script>
<style>
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.counter-message {
text-align: center;
}
</style>

18
examples/framework-vue/src/pages/index.astro
View file

@ -12,21 +12,13 @@ import Counter from '../components/Counter.vue'
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
:global(:root) {
html,
body {
font-family: system-ui;
padding: 2em 0;
margin: 0;
}
:global(.counter) {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
:global(.children) {
display: grid;
margin-bottom: 2em;
place-items: center;
body {
padding: 2rem;
}
</style>
</head>