57 lines
2.6 KiB
Vue
57 lines
2.6 KiB
Vue
<template>
|
|
<main>
|
|
<article class="article">
|
|
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
|
|
<h1 id="hero" class="font-hero">Fonts</h1>
|
|
<p id="hero-desc" class="font-hero-desc">This page were created to list all fonts I have hosted it here, so you can use it too.</p>
|
|
</section>
|
|
<section v-if="pending" class="web-section">
|
|
<h2 id="noto" class="web-title">Pending...</h2>
|
|
<p id="noto-desc">Loading font lists, please wait...</p>
|
|
</section>
|
|
<section v-else-if="error" class="web-section">
|
|
<h2 id="noto" class="web-title">Error</h2>
|
|
<p id="noto-desc">{{ error.message }}</p>
|
|
</section>
|
|
<section v-else-if="fonts" v-for="family in fonts" key="family.id" class="web-section" :aria-labelledby="family.id + '-title'" :aria-describedby="family.desc + '-desc'">
|
|
<h2 :id="family.id + '-title'" class="web-title">{{ family.family }}</h2>
|
|
<p :id="family.id + '-desc'">{{ family.desc }}</p>
|
|
<ul class="font-cards">
|
|
<li v-for="font in family.children" :key="font.id">
|
|
<a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css">
|
|
<div class="font-card-content text-2xl">
|
|
{{ font.name }}
|
|
<!-- <p>{{ fontUrl + font.css }}</p> -->
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section v-else class="web-section">
|
|
<h2 id="noto" class="web-title">An unknown error occured</h2>
|
|
<p id="noto-desc">Oh no! An unknown error occured, please tell site administrator to fix this ASAP.</p>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useFontLists } from '@/composables/useFontLists';
|
|
|
|
const config = useRuntimeConfig();
|
|
const TITLE = "Fonts"
|
|
const DESC = "Fonts hosted on thawia.ng"
|
|
const fontUrl = config.public?.fontUrl || 'https://fonts.thawiang.com/';
|
|
const fontListFile = 'api/typefaces.json';
|
|
const { fonts, error, pending } = useFontLists(fontUrl, fontListFile);
|
|
|
|
useHead({
|
|
title: TITLE,
|
|
meta: [
|
|
{ name: 'description', content: DESC },
|
|
{ property: 'og:title', content: TITLE },
|
|
{ property: 'og:description', content: DESC },
|
|
{ property: 'og:type', content: 'website' }
|
|
]
|
|
})
|
|
</script> |