41 lines
1.1 KiB
Text
41 lines
1.1 KiB
Text
<script webc:setup>
|
|
const characters = Object.keys($data.collections).filter((coll) => coll !== 'all');
|
|
|
|
const getCharacterName = (name) => $data.collections[name][0].data.getFullName();
|
|
const getDescription = (name) => $data.collections[name][0].data.description;
|
|
const getAvatar = (name) => `src/img/${name}/avatar.png`;
|
|
const getAltText = (name) => name.charAt(0).toUpperCase() + name.slice(1) + ' Avatar';
|
|
</script>
|
|
|
|
<main>
|
|
<h1>Welcome!</h1>
|
|
|
|
<p>Select your character:</p>
|
|
|
|
<div class="characters">
|
|
<card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
|
|
<eleventy-image
|
|
slot="image"
|
|
:src="getAvatar(char)"
|
|
:alt="getAltText(char)"
|
|
:width="[500,1000]"
|
|
></eleventy-image>
|
|
<h2 slot="title" @text="getCharacterName(char)"></h2>
|
|
<p @text="getDescription(char)"></p>
|
|
</card>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
max-width: 130ch;
|
|
margin: auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
.characters {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
|
|
gap: 1.5em;
|
|
}
|
|
</style>
|