diff options
| author |  Jonathan Neal <jonathantneal@hotmail.com>
| 2021-12-22 16:11:05 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-12-22 16:11:05 -0500 |
| commit | 6ddd7678ffb6598ae6e263706813cb5e94535f02 (patch) | |
| tree | d4b45f7590b59c3574bd6593b17d8066f71007c6 /examples/framework-alpine/src | |
| parent | 305ce4182fbe89abcfb88008ddce178bd8863b6a (diff) | |
| download | astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.tar.gz astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.tar.zst astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.zip | |
Use accessible indentation (#2253)
Diffstat (limited to 'examples/framework-alpine/src')
| -rw-r--r-- | examples/framework-alpine/src/components/Counter.astro | 28 | ||||
| -rw-r--r-- | examples/framework-alpine/src/pages/index.astro | 61 |
2 files changed, 45 insertions, 44 deletions
diff --git a/examples/framework-alpine/src/components/Counter.astro b/examples/framework-alpine/src/components/Counter.astro index 24140ca16..4d0b62a60 100644 --- a/examples/framework-alpine/src/components/Counter.astro +++ b/examples/framework-alpine/src/components/Counter.astro @@ -6,24 +6,24 @@ const { initialCount = 0 } = Astro.props; --- <div class="counter" x-data=`{ count: ${initialCount} }`> - <button x-on:click="count--">-</button> - <pre x-text="count">{ initialCount }</pre> - <button x-on:click="count++">+</button> + <button x-on:click="count--">-</button> + <pre x-text="count">{ initialCount }</pre> + <button x-on:click="count++">+</button> </div> <div class="counter-message"> - <slot /> + <slot /> </div> <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; -} + .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> diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro index 3046c0aa6..c72e41187 100644 --- a/examples/framework-alpine/src/pages/index.astro +++ b/examples/framework-alpine/src/pages/index.astro @@ -1,40 +1,41 @@ --- // Component Imports -import Counter from '../components/Counter.astro' +import Counter from '../components/Counter.astro'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <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> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> - <!-- Be sure to include AlpineJS --> - <script src="//unpkg.com/alpinejs" defer></script> - </head> - <body> - <main> - <!-- Note: no `client:load` necessary since AlpineJS is always included --> - <Counter> - <h1>Hello, AlpineJS!</h1> - </Counter> + <!-- Be sure to include AlpineJS --> + <script src="//unpkg.com/alpinejs" defer></script> + </head> + <body> + <main> + <!-- Note: no `client:load` necessary since AlpineJS is always included --> + <Counter> + <h1>Hello, AlpineJS!</h1> + </Counter> - <!-- Note: pass props to Astro components to initialize Alpine with a certain state --> - <Counter initialCount={5}> - <h2>Use Astro to pass in server-side props</h2> - </Counter> - </main> - </body> + <!-- Note: pass props to Astro components to initialize Alpine with a certain state --> + <Counter initialCount={5}> + <h2>Use Astro to pass in server-side props</h2> + </Counter> + </main> + </body> </html> |