web/pages/fonts.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">Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.</p>
            </section>
            <section v-for="family in fonts" class="web-section" :aria-labelledby="family.id" aria-describedby="family.desc">
                <h3 id="noto" class="web-title">{{ family.family }}</h3>
                <p id="noto-desc">{{ family.desc }}</p>
                <div class="font-cards">
                    <a v-for="font in family.childrens" :disabled="font.disabled" :href="font.css" class="font-card">
                        <div class="font-card-content">
                            <h3>{{ font.name }}</h3>
                            <p>{{ font.css }}</p>
                        </div>
                   </a>
                </div>
            </section>
        </article>
    </main>
</template>

<script setup>
const fonts = [
    {
        id: "roboto",
        family: "Roboto Family",
        desc: "Roboto, a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android.",
        childrens: [
            {
                id: "roboto",
                name: "Roboto",
                css: "/portal/f/fonts/roboto/roboto.css"
            },
            {
                id: "roboto-mono",
                name: "Roboto Mono",
                css: "/portal/f/fonts/roboto-mono/roboto-mono.css"
            },
            {
                id: "roboto-serif",
                name: "Roboto Serif",
                css: "/portal/f/fonts/roboto-serif/roboto-serif.css"
            }
        ]
    },
    {
        id: "inter",
        family: "Inter Family",
        desc: "Inter, a typeface designed for computer screens. It features a tall x-height to aid in readability of mixed-case and lower-case text.",
        childrens: [
            {
                id: "inter",
                name: "Inter",
                css: "/portal/f/fonts/inter/inter.css"
            }
        ]
    },
    {
        id: "noto",
        family: "Noto Family",
        desc: "Noto Sans, a free font family from Google that aims to support all languages with a harmonious look and feel.",
        childrens: [
            {
                id: "noto-sans",
                name: "Noto Sans",
                css: "/portal/f/fonts/noto-sans/noto-sans.css"
            },
            {
                id: "noto-sans-mono",
                name: "Noto Sans Mono",
                css: "/portal/f/fonts/noto-sans-mono/noto-sans-mono.css"
            },
            {
                id: "noto-sans-thai",
                name: "Noto Sans Thai",
                css: "/portal/f/fonts/noto-sans-thai/noto-sans-thai.css"
            },
            {
                disabled: true,
                id: "noto-sans-thai-looped",
                name: "Noto Sans Thai Looped",
                css: "/portal/f/fonts/noto-sans-thai-looped/noto-sans-thai-looped.css"
            }
        ]
    },
    {
        id: "tiktok-sans",
        family: "TikTok Sans",
        desc: "TikTok Sans, the official typeface of TikTok, designed to reflect the brand's dynamic and creative spirit.",
        childrens: [
            {
                id: "tiktok-sans",
                name: "TikTok Sans",
                css: "/portal/f/fonts/tiktok-sans/tiktok-sans.css"
            }
        ]
    },
    {
        id: "cmu",
        family: "Computer Modern",
        desc: "Computer Modern, the default font family for TeX and LaTeX, designed by Donald Knuth.",
        childrens: [
            {
                id: "cmu-serif",
                name: "Computer Modern Serif",
                css: "/portal/f/fonts/cmu-serif/cmu-serif.css"
            }
        ]
    },
    {
        id: "tlwg",
        family: "Thai Linux Working Group",
        desc: "Thai Linux Working Group (TLWG) fonts, a collection of free and open-source fonts designed for the Thai language.",
        childrens: [
            {
                id: "garuda",
                name: "Garuda (ครุฑ)",
                css: "/portal/f/fonts/garuda/garuda.css"
            },
            {
                id: "kinnari",
                name: "Kinnari (กินรี)",
                css: "/portal/f/fonts/kinnari/kinnari.css"
            },
            {
                id: "kinnari-oblique",
                name: "Kinnari (กินรี; Oblique)",
                css: "/portal/f/fonts/kinnari/kinnari-oblique.css"
            }
        ]
    }
]

const config = useRuntimeConfig();
const TITLE = "Fonts"
const DESC = "Fonts hosted on thawia.ng"
const baseUrl = config.public.baseUrl

useHead({
  title: TITLE,
  meta: [
    { name: 'description', content: DESC },
    { property: 'og:title', content: TITLE },
    { property: 'og:description', content: DESC },
    { property: 'og:type', content: 'website' }
  ]
})
</script>