You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<template>
|
|
<h1>{{title}}</h1>
|
|
<div class="description">
|
|
|
|
<p v-for="section in description" :key="section">
|
|
{{section}}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<dl v-if="readmes">
|
|
<div class="readme" v-for="readme in readmes" :key="readme.title">
|
|
<dt>
|
|
<a :href="readme.where">
|
|
{{readme.title}}
|
|
</a>
|
|
</dt>
|
|
<dd>
|
|
<p v-for="section in readme.what" :key="section">
|
|
{{section}}
|
|
</p>
|
|
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
</template>
|
|
<script setup>
|
|
|
|
import {ref, computed, onMounted} from 'vue'
|
|
import {useRoute} from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
const title = ref('')
|
|
const description = ref('')
|
|
const readmes = ref(null)
|
|
|
|
|
|
onMounted(async ()=>{
|
|
|
|
const data = await fetch(`/pathways/${route.params.slug}.json`).then(res=>res.json())
|
|
|
|
console.log(data)
|
|
|
|
title.value = Object.values(data)[0].title
|
|
description.value = Object.values(data)[0].description
|
|
readmes.value = Object.entries(data).slice(1).map(([title, entry])=>{
|
|
return {title, ...entry}
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
<style></style>
|