Move into app/
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<h1 id="hero" class="font-hero">Techit's Collection</h1>
|
||||
<p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
|
||||
<h3 id="docs" class="web-title">All Bookmarks</h3>
|
||||
<ul>
|
||||
<li><a class="link" href="https://fedorapeople.org/groups/virt/virtio-win/direct-downloads/latest-virtio/virtio-win.iso">VirtIO Windows Driver</a></li>
|
||||
<li><a class="link" href="https://files.thawia.ng/files/act/Copyright_Act2_TH.pdf">Thailand Copyright Act: พระราชบัญญัติลิขสิทธิ์ พ.ศ. ๒๕๓๗</a></li>
|
||||
<li><a class="link" href="https://github.com/Tyrrrz/YoutubeDownloader">YoutubeDownloader: Downloads videos and playlists from YouTube</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Collections"
|
||||
const DESC = "Techit's personal-public collections"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<h1 id="hero" class="font-hero">Contact Techit</h1>
|
||||
<p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
|
||||
<h2 class="web-title" id="decentralized">Decentral­ized Ways</h2>
|
||||
<p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
|
||||
<ul class="list-disc">
|
||||
<li>
|
||||
<p>techit@thawia.ng — E-mail Address</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techit@furnu.org — Mastodon</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner:matrix.org — Matrix</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
|
||||
<h2 class="web-title" id="centralized">Social Media</h2>
|
||||
<p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
|
||||
<ul class="list-disc">
|
||||
<li>
|
||||
<p>@techitwinner — X (Twitter)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — TikTok</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — Instagram</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — Facebook</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@thawia.ng — BlueSky</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Contact"
|
||||
const DESC = "How to contact Techit"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" 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>
|
||||
<template v-if="pending">
|
||||
<section class="web-section">
|
||||
<h2 id="noto" class="web-title">Pending...</h2>
|
||||
<p id="noto-desc">Loading font lists, please wait...</p>
|
||||
</section>
|
||||
</template>
|
||||
<template v-else-if="error">
|
||||
<section class="web-section">
|
||||
<h2 id="noto" class="web-title">Error</h2>
|
||||
<p id="noto-desc">{{ error.message }}</p>
|
||||
</section>
|
||||
</template>
|
||||
<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-card-container">
|
||||
<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-xl">
|
||||
{{ 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>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
|
||||
<img width="240" height="240" class="mb-6" src="https://files.thawia.ng/files/assets/profile/techit/1758801557516.jpeg" alt="Techit Thawiang's avatar.">
|
||||
<h1 id="hero" class="font-hero">Techit Thawiang</h1>
|
||||
<p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span class="text-pink-500">hobbyist developer</span>, <span class="text-green-600">a math lover</span> and a <span class="text-blue-500">self-hoster</span> who's exploring computer science.</p>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1">
|
||||
<!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
|
||||
<h2 class="web-title" id="about-me">Who am I?</h2>
|
||||
<p id="about-me-paragraph-1">My name is Techit Thawiang, aka <u>TechitWinner</u>. I'm a 15 years old 10th grader at Ko Pho Tuay Ngam Wittaya School. In my free time, I usually spend my time playing video games or learning more about software engineering.</p>
|
||||
<p id="about-me-paragraph-2">In the future, I dream of having my own tech company, being a network engineer or a software engineer.</p>
|
||||
</section>
|
||||
<!-- <section class="web-section" aria-labelledby="posts" aria-describedby="posts-paragraph-1">
|
||||
<h2 class="web-title" id="posts">
|
||||
<NuxtLink href="/posts" title="Navigate to posts page." class="link link-no-underline">Posts<span aria-hidden="true" class="link-inline-icon">→</span></NuxtLink>
|
||||
</h2>
|
||||
<p id="posts-paragraph-1"></p>
|
||||
<p id="posts-paragraph-2">Let's go take a look of my posts collection!</p>
|
||||
<PostsArticleList/>
|
||||
</section> -->
|
||||
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
|
||||
<!-- <h2 class="web-title" id="projects"><NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
|
||||
<h2 class="web-title" id="projects">Projects</h2>
|
||||
<p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have born and died.</p>
|
||||
<p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
|
||||
<div class="project-card-container">
|
||||
<a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
|
||||
<img src="https://files.thawia.ng/files/assets/warehouse.jpg">
|
||||
<div class="project-card-content">
|
||||
<h3>Warehouse</h3>
|
||||
<p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
|
||||
<img src="https://files.thawia.ng/files/assets/web.png">
|
||||
<div class="project-card-content">
|
||||
<h3>Web</h3>
|
||||
<p title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
|
||||
<img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
|
||||
<div class="project-card-content">
|
||||
<h3>Coinbag Pro</h3>
|
||||
<p title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
const TITLE = "Home"
|
||||
const DESC = "Techit Thawiang is a 10th grader hobbyist developer, a math lover and a self-hoster who's exploring computer science."
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<h1 id="hero" class="font-hero">Portal</h1>
|
||||
<p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
|
||||
<ul class="font-card-container">
|
||||
<li>
|
||||
<a :class="'font-card'" :href="baseUrl + '/portal/f/'">
|
||||
<div class="font-card-content">
|
||||
<h3>Files</h3>
|
||||
<p>A portal that collects this website data, whether it's mine or not.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :class="'font-card'" :href="baseUrl + '/portal/s/'">
|
||||
<div class="font-card-content">
|
||||
<h3>Share</h3>
|
||||
<p>A portal that were created by me to share media, It works like Google Drive public share.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const TITLE = "Portal"
|
||||
const DESC = "Choose your way wisely."
|
||||
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>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<section class="max-w-6xl mx-auto z-[1]">
|
||||
<h1 id="hero" class="font-hero">{{ post?.title }}</h1>
|
||||
<div class="post-cover">
|
||||
<section class="w-full">
|
||||
<p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
|
||||
</section>
|
||||
<img :width="512" class="img-cover" :src="post?.coverImage" />
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
|
||||
<div class="prose">
|
||||
<ContentRenderer v-if="post" :value="post"/>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
const route = useRoute()
|
||||
|
||||
// const { data: post } = await useAsyncData(route.path, () => {
|
||||
// return queryCollection('posts').path(route.path).first()
|
||||
// })
|
||||
|
||||
const { data: post } = await useAsyncData(() => queryCollection('posts').path(route.path).first())
|
||||
|
||||
const ogUrl = config.public.baseUrl + route.path
|
||||
useSeoMeta({
|
||||
title: post.value?.title,
|
||||
description: post.value?.description || 'Content from our blog',
|
||||
keywords: post.value?.tags?.join(', ') || 'blog, article, post',
|
||||
ogTitle: post.value?.title + ' / thawia.ng',
|
||||
ogDescription: post.value?.description,
|
||||
ogType: 'article',
|
||||
ogUrl: ogUrl,
|
||||
ogImage: post.value?.coverImage ? baseUrl + '/portal/f/assets/' + post.value?.coverImage : undefined,
|
||||
ogSiteName: config.public.siteName,
|
||||
twitterCard: 'summary_large_image',
|
||||
twitterTitle: post.value?.title + ' / thawia.ng',
|
||||
twitterDescription: post.value?.description,
|
||||
twitterImage: post.value?.coverImage ? `${baseUrl}/portal/f/assets/${post.value?.coverImage}` : undefined,
|
||||
twitterSite: '@' + config.public.twitterUsername
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.katex-html {
|
||||
display: none;
|
||||
}
|
||||
.katex-mathml {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<h1 id="hero" class="font-hero">Posts</h1>
|
||||
<p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="latest-posts" aria-describedby="latest-posts-paragraph-1">
|
||||
<h2 class="web-title" id="latest-posts">All Posts</h2>
|
||||
<PostsArticleList />
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Posts"
|
||||
const DESC = "Techit's posts and writings."
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
|
||||
<h1 id="hero" class="font-hero">Terminal</h1>
|
||||
<p id="what-does-he-do?" class="font-hero-desc">This will be a emulator for website visitor (simulator)</p>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1">
|
||||
<h2 class="web-title" id="about-me">hi</h2>
|
||||
<p id="about-me-paragraph-1">imagine a linux terminal where you can list files or cat files i will do it here not now but later thx okay bye bye</p>
|
||||
</section>
|
||||
<section class="web-section">
|
||||
<p>additional info: robots are not allowed here temporary for whatever reason</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const TITLE = "Terminal"
|
||||
const DESC = "Terminal Emulator Simulator on thawia.ng by Techit Thawiang"
|
||||
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>
|
||||
Reference in New Issue
Block a user