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 ( return (
<> <>
<div className="counter"> <div class="counter">
<button onClick={subtract}>-</button> <button onClick={subtract}>-</button>
<pre>{count}</pre> <pre>{count}</pre>
<button onClick={add}>+</button> <button onClick={add}>+</button>
</div> </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> <pre>{count}</pre>
<button onClick={add}>+</button> <button onClick={add}>+</button>
</div> </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> <pre>{count()}</pre>
<button onClick={add}>+</button> <button onClick={add}>+</button>
</div> </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> </script>
<div class="counter"> <div class="counter">
<button on:click={subtract}>-</button> <button on:click={subtract}>-</button>
<pre>{ count }</pre> <pre>{ count }</pre>
<button on:click={add}>+</button> <button on:click={add}>+</button>
</div> </div>
<div class="children"> <div class="counter-message">
<slot /> <slot />
</div> </div>

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

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

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

@ -13,58 +13,39 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}>
<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>
</head> </head>
<body> <body>
<main> <main>
<react.Counter client:visible> <react.Counter client:visible>
<h1>Hello React!</h1> <h1>Hello React!</h1>
<p>What's up?</p> <p>What's up?</p>
</react.Counter> </react.Counter>
<PreactCounter client:visible> <PreactCounter client:visible>
<h1>Hello Preact!</h1> <h1>Hello Preact!</h1>
</PreactCounter> </PreactCounter>
<SolidCounter client:visible> <SolidCounter client:visible>
<h1>Hello Solid!</h1> <h1>Hello Solid!</h1>
</SolidCounter> </SolidCounter>
<VueCounter client:visible> <VueCounter client:visible>
<h1>Hello Vue!</h1> <h1>Hello Vue!</h1>
</VueCounter> </VueCounter>
<SvelteCounter client:visible> <SvelteCounter client:visible>
<h1>Hello Svelte!</h1> <h1>Hello Svelte!</h1>
</SvelteCounter> </SvelteCounter>
<A /> <A />
<Renamed />
</main> <Renamed />
</main>
</body> </body>
</html> </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 { h, Fragment } from 'preact';
import { useState } from 'preact/hooks'; import { useState } from 'preact/hooks';
import './Counter.css';
export default function Counter({ children }) { export default function Counter({ children }) {
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
@ -8,12 +9,12 @@ export default function Counter({ children }) {
return ( return (
<> <>
<div className="counter"> <div class="counter">
<button onClick={subtract}>-</button> <button onClick={subtract}>-</button>
<pre>{count}</pre> <pre>{count}</pre>
<button onClick={add}>+</button> <button onClick={add}>+</button>
</div> </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" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style> <style>
:global(:root) { html,
body {
font-family: system-ui; font-family: system-ui;
padding: 2em 0; margin: 0;
} }
:global(.counter) { body {
display: grid; padding: 2rem;
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;
} }
</style> </style>
</head> </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 React, { useState } from 'react';
import './Counter.css';
export default function Counter({ children, count: initialCount }) { export default function Counter({ children, count: initialCount }) {
const [count, setCount] = useState(initialCount); const [count, setCount] = useState(initialCount);
@ -12,7 +13,7 @@ export default function Counter({ children, count: initialCount }) {
<pre>{count}</pre> <pre>{count}</pre>
<button onClick={add}>+</button> <button onClick={add}>+</button>
</div> </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" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style> <style>
:global(:root) { html,
body {
font-family: system-ui; font-family: system-ui;
padding: 2em 0; margin: 0;
} }
:global(.counter) { body {
display: grid; padding: 2rem;
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;
} }
</style> </style>
</head> </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 { createSignal } from 'solid-js';
import './Counter.css';
export default function Counter({ children }) { export default function Counter({ children }) {
const [count, setCount] = createSignal(0); 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 charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style global> <style>
:root { html,
body {
font-family: system-ui; font-family: system-ui;
margin: 0;
} }
.counter { body {
display: grid; padding: 2rem;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 3em;
place-items: center;
}
.counter-message {
text-align: center;
} }
</style> </style>
</head> </head>

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

@ -15,6 +15,19 @@
<pre>{ count }</pre> <pre>{ count }</pre>
<button on:click={add}>+</button> <button on:click={add}>+</button>
</div> </div>
<div class="children"> <div class="message">
<slot /> <slot />
</div> </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" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style> <style>
:global(:root) { html,
body {
font-family: system-ui; font-family: system-ui;
padding: 2em 0; margin: 0;
} }
:global(.counter) { body {
display: grid; padding: 2rem;
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;
} }
</style> </style>
</head> </head>

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

@ -4,7 +4,7 @@
<pre>{{ count }}</pre> <pre>{{ count }}</pre>
<button @click="add()">+</button> <button @click="add()">+</button>
</div> </div>
<div class="children"> <div class="counter-message">
<slot /> <slot />
</div> </div>
</template> </template>
@ -25,3 +25,16 @@ export default {
}, },
}; };
</script> </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" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style> <style>
:global(:root) { html,
body {
font-family: system-ui; font-family: system-ui;
padding: 2em 0; margin: 0;
} }
:global(.counter) { body {
display: grid; padding: 2rem;
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;
} }
</style> </style>
</head> </head>