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

chore(examples): add AlpineJS example (#2222)

Browse source
This commit is contained in:
Nate Moore 2021-12-21 11:45:23 -06:00 • committed by GitHub
parent 1b418a6481
commit 5ab3fbb3b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 146 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
examples/framework-alpine/.gitignore vendored Normal file
View file

@ -0,0 +1,18 @@
# build output
dist
# dependencies
node_modules/
.snowpack/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store

2
examples/framework-alpine/.npmrc Normal file
View file

@ -0,0 +1,2 @@
## force pnpm to hoist
shamefully-hoist = true

6
examples/framework-alpine/.stackblitzrc Normal file
View file

@ -0,0 +1,6 @@
{
"startCommand": "npm start",
"env": {
"ENABLE_CJS_IMPORTS": true
}
}

10
examples/framework-alpine/README.md Normal file
View file

@ -0,0 +1,10 @@
# Astro + AlpineJS Example
```
npm init astro -- --template framework-alpine
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-alpine)
This example showcases Astro working with [AlpineJS](https://alpinejs.dev/).

13
examples/framework-alpine/astro.config.mjs Normal file
View file

@ -0,0 +1,13 @@
// Full Astro Configuration API Documentation:
// https://docs.astro.build/reference/configuration-reference
// @type-check enabled!
// VSCode and other TypeScript-enabled text editors will provide auto-completion,
// helpful tooltips, and warnings if your exported object is invalid.
// You can disable this by removing "@ts-check" and `@type` comments below.
// @ts-check
export default /** @type {import('astro').AstroUserConfig} */ ({
// No renderers are needed for AlpineJS support, just use Astro components!
renderers: [],
});

14
examples/framework-alpine/package.json Normal file
View file

@ -0,0 +1,14 @@
{
"name": "@example/framework-alpine",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"devDependencies": {
"astro": "^0.21.13"
}
}

BIN
examples/framework-alpine/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

11
examples/framework-alpine/sandbox.config.json Normal file
View file

@ -0,0 +1,11 @@
{
"infiniteLoopProtection": true,
"hardReloadOnChange": false,
"view": "browser",
"template": "node",
"container": {
"port": 3000,
"startScript": "start",
"node": "14"
}
}

29
examples/framework-alpine/src/components/Counter.astro Normal file
View file

@ -0,0 +1,29 @@
---
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
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>
</div>
<div class="counter-message">
<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;
}
</style>

40
examples/framework-alpine/src/pages/index.astro Normal file
View file

@ -0,0 +1,40 @@
---
// Component Imports
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>
<!-- 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>
</html>

3
examples/framework-alpine/tsconfig.json Normal file
View file

@ -0,0 +1,3 @@
{
"moduleResolution": "node"
}