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

chore(example): add spa example

Browse source
This commit is contained in:
Nate Moore 2022-02-26 21:57:53 -06:00
parent 3a1eab1f0d
commit 9e0443f084
4 changed files with 76 additions and 0 deletions

7
examples/spa/astro.config.mjs Normal file
View file

@ -0,0 +1,7 @@
// @ts-check
export default /** @type {import('astro').AstroUserConfig} */ ({
buildOptions: {
mode: 'spa'
},
renderers: ['@astrojs/renderer-vue']
});

14
examples/spa/package.json Normal file
View file

@ -0,0 +1,14 @@
{
"name": "@example/spa",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev --experimental-static-build",
"start": "astro dev --experimental-static-build",
"build": "astro build --experimental-static-build",
"preview": "astro preview"
},
"devDependencies": {
"astro": "^0.23.2"
}
}

24
examples/spa/src/components/Counter.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<div id="vue" class="counter">
<button @click="subtract()">-</button>
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => (count.value = count.value + 1);
const subtract = () => (count.value = count.value - 1);
return {
count,
add,
subtract,
};
},
};
</script>

31
examples/spa/src/pages/[pokemon].astro Normal file
View file

@ -0,0 +1,31 @@
---
import Counter from '../components/Counter.vue';
export async function getStaticPaths() {
const { results: allPokemon } = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=2000`).then(res => res.json());
return allPokemon.map((pokemon, i, all) => ({
params: { pokemon: pokemon.name },
props: {
pos: Math.random() > 0.5 ? Math.random() > 0.5 ? 'top' : 'bottom' : null,
prev: `/${all[i - 1]?.name ?? ''}`,
pokemon,
next: `/${all[i + 1]?.name ?? ''}`,
}
}));
}
const { pos, pokemon, prev, next } = Astro.props;
---
<html lang="en">
<head>
<title>{pokemon.name}</title>
</head>
<body>
{pos === 'top' && <Counter client:visible />}
<h1>{pokemon.name}</h1>
{pos === 'bottom' && <Counter client:visible />}
<p><a href={prev}>Previous</a> / <a href={next}>Next</a></p>
</body>
</html>