Intial commit from techit@Techits-Mac-Pro
This commit is contained in:
Techit Thawiang
Executable
+7
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtLayout>
|
||||
<NuxtPage/>
|
||||
</NuxtLayout>
|
||||
</UApp>
|
||||
</template>
|
||||
Executable
+130
@@ -0,0 +1,130 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@theme {
|
||||
--ui-container-lg: var(--container-5xl);
|
||||
--ui-container-md: var(--container-3xl);
|
||||
--ui-container-sm: var(--container-2xl);
|
||||
--ui-container: var(--container-lg);
|
||||
--ui-container-padding: calc(var(--spacing)*4);
|
||||
--ui-header-title-height: calc(var(--spacing)*16);
|
||||
--ui-header-navbar-height: calc(var(--spacing)*10);
|
||||
|
||||
--ui-bg-container: oklch(0.9557 0.1104 102.71);
|
||||
--ui-bg-container-bd: oklch(0.85 0.1104 102.71);
|
||||
--ui-on-bg-container: oklch(0.4644 0.0554 82.5);
|
||||
|
||||
--ui-primary: oklch(0.6358 0.1185 82.5);
|
||||
|
||||
--ui-primary-light: oklch(0.5 0.1185 82.5);
|
||||
--ui-on-primary: oklch(1 0 0);
|
||||
|
||||
--ui-radius: 0.125rem;
|
||||
|
||||
--font-sans: OpenSans, Sarabun, sans-serif;
|
||||
--font-sans--font-feature-settings: "liga", "calt", "ss01", "cv05", "cv06", "cv11";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-serif: "Noto Serif", "Noto Serif Thai", Georgia, Garamond, "Times New Roman", Times, serif;
|
||||
}
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root {
|
||||
--font-sans: OpenSansVariable, Sarabun, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
-webkit-font-smoothing: unset!important;
|
||||
-moz-osx-font-smoothing: unset!important;
|
||||
}
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--ui-container-padding);
|
||||
@apply max-w-(--ui-container) sm:max-w-(--ui-container-sm) md:max-w-(--ui-container-md) lg:max-w-(--ui-container-lg);
|
||||
}
|
||||
|
||||
.row {
|
||||
@apply flex items-center;
|
||||
}
|
||||
.nav {
|
||||
@apply pl-0 list-none;
|
||||
}
|
||||
.navbar-nav {
|
||||
@apply md:float-left md:m-0;
|
||||
}
|
||||
.navbar-nav > li {
|
||||
float: left;
|
||||
display: flex;
|
||||
}
|
||||
.navbar-nav > li > a {
|
||||
padding: 10.5px 14px;
|
||||
}
|
||||
.navbar-nav > li > a.router-link-active, .navbar-nav > li > a.router-link-active:hover {
|
||||
@apply bg-linear-[to_bottom,rgba(0,0,0,0.3)_10%,rgba(0,0,0,0)_100%];
|
||||
}
|
||||
.navbar-nav > li > a:hover {
|
||||
@apply bg-linear-[to_bottom,rgba(255,255,255,0)_0%,rgba(255,255,255,0.3)_10%,rgba(255,255,255,0)_100%];
|
||||
}
|
||||
.site-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: var(--ui-header-title-height);
|
||||
@apply border-t border-t-(--ui-on-bg-container) bg-linear-[to_bottom,var(--ui-bg-container-bd)_0%,var(--ui-bg-container)_35%] text-(--ui-on-bg-container);
|
||||
}
|
||||
.site-navbar {
|
||||
min-height: var(--ui-header-navbar-height);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
@apply bg-linear-[to_bottom,var(--ui-primary)_0%,var(--ui-primary-light)_90%] text-white;
|
||||
}
|
||||
.hero-section {
|
||||
@apply py-16 drop-shadow-md bg-green-50 bg-cover bg-center;
|
||||
}
|
||||
.hero-section > .container > .brace {
|
||||
@apply my-4;
|
||||
}
|
||||
.hero-section > .container > .title {
|
||||
@apply text-4xl font-bold my-4;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.hero-section > .container > .subtitle {
|
||||
@apply text-xl my-4;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.page-section {
|
||||
@apply my-16;
|
||||
}
|
||||
.page-section > .container .title {
|
||||
@apply text-2xl font-medium my-[0.75rem];
|
||||
}
|
||||
.page-section > .container p {
|
||||
@apply my-[0.75rem];
|
||||
}
|
||||
.page-section.page-section-alt {
|
||||
@apply my-0;
|
||||
}
|
||||
.page-section.page-section-alt > .container {
|
||||
@apply my-0 flex justify-between items-center;
|
||||
}
|
||||
.page-section.page-section-alt > .container > .section {
|
||||
@apply mb-4;
|
||||
}
|
||||
.page-section.page-section-alt > .container > .section-img {
|
||||
@apply w-[45%];
|
||||
img {
|
||||
@apply my-16;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
@apply bg-(--ui-bg-muted) py-16;
|
||||
}
|
||||
.site-footer {
|
||||
@apply block;
|
||||
}
|
||||
.footer-notice {
|
||||
@apply block;
|
||||
}
|
||||
Executable
+28
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const { t, locale, setLocale } = useI18n()
|
||||
const currentLocale = ref(locale.value)
|
||||
|
||||
const toggleLocale = () => {
|
||||
const newLocale = currentLocale.value === 'en' ? 'th' : 'en'
|
||||
setLocale(newLocale).then(() => {
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<UTooltip :text="t('ui.language.tooltip')">
|
||||
<UButton
|
||||
@click="toggleLocale"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:label="t('ui.language.switch')"
|
||||
/>
|
||||
</UTooltip>
|
||||
<template #fallback>
|
||||
<USkeleton class="size-8" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
Executable
+21
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<footer class="footer site-footer">
|
||||
<div class="site-footer">
|
||||
<div class="container">
|
||||
<section class="row">
|
||||
<section class="footer-notice">
|
||||
<img width="48" height="48" src="/favicon.ico" alt="*nix" class="text-2xl"></img>
|
||||
<h2 class="text-2xl font-bold my-[0.5em]">*nix in Thailand (นิกซ์ในประเทศไทย)</h2>
|
||||
<p class="my-[0.5em]">{{t('footer.copyright.notice', {'year': year, 'yearB': year + 543})}}</p>
|
||||
<LanguageSwitcher/>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const {t} = useI18n();
|
||||
const year = 2025
|
||||
</script>
|
||||
Executable
+78
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="site-title">
|
||||
<div class="container flex justify-between">
|
||||
<div class="row w-fit items-center">
|
||||
<div class="row flex">
|
||||
<img width="48" height="48" src="/favicon.ico" alt="*nix" class="text-2xl mr-4"></img>
|
||||
<img width="124" height="20" src="/wordmark.svg" alt="in Thailand" class="text-2xl my-[13px]"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-fit items-center justify-end">
|
||||
<div class="row">
|
||||
<UFieldGroup>
|
||||
<UButton size="sm" :label="t('sites.join-discord')" to="https://discord.gg/p5wuX5GwB7" icon="i-lucide-users" />
|
||||
<UDropdownMenu
|
||||
size="sm"
|
||||
:items="siteTitleItems"
|
||||
:content="{
|
||||
align: 'end',
|
||||
side: 'bottom',
|
||||
sideOffset: 8
|
||||
}"
|
||||
:ui="{
|
||||
content: 'w-36'
|
||||
}"
|
||||
>
|
||||
<UButton size="sm" :label="t('sites.all')" icon="i-lucide-map" color="neutral" variant="outline" />
|
||||
</UDropdownMenu>
|
||||
</UFieldGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="site-navbar">
|
||||
<div class="container">
|
||||
<div class="hidden sm:flex">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-link">
|
||||
<NuxtLinkLocale href="/">{{ t('nav.home') }}</NuxtLinkLocale>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLinkLocale href="/about">{{ t('nav.about') }}</NuxtLinkLocale>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLinkLocale href="/contact">{{ t('nav.contact') }}</NuxtLinkLocale>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n();
|
||||
const siteTitleItems = ref<DropdownMenuItem[]>([
|
||||
{
|
||||
label: t('sites.wiki'),
|
||||
icon: 'i-lucide-book-open-text',
|
||||
to: 'https://wiki.unix.in.th'
|
||||
},
|
||||
{
|
||||
label: t('sites.identity'),
|
||||
icon: 'i-lucide-user',
|
||||
to: 'https://identity.unix.in.th'
|
||||
},
|
||||
{
|
||||
label: t('sites.forum'),
|
||||
icon: 'i-lucide-messages-square',
|
||||
to: 'https://forum.unix.in.th'
|
||||
},
|
||||
{
|
||||
label: t('sites.status'),
|
||||
icon: 'i-lucide-activity',
|
||||
to: 'https://status.unix.in.th'
|
||||
},
|
||||
])
|
||||
</script>
|
||||
Executable
+7
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<WebHeader/>
|
||||
<slot/>
|
||||
<WebFooter/>
|
||||
</div>
|
||||
</template>
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1 :id="t('about.hero.title').replace(/ /g, '_')" class="title">{{ t('about.hero.title') }}</h1>
|
||||
<!-- <p :id="t('about.hero.sub').replace(/ /g, '_')" class="subtitle">{{ t('about.hero.sub') }}</p> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container">
|
||||
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const {t} = useI18n();
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: '*nix in Thailand',
|
||||
titleTemplate: '%s',
|
||||
meta: [
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
Executable
+28
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<img></img>
|
||||
<h2 class="text-3xl ">contact page</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container">
|
||||
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: '*nix in Thailand',
|
||||
titleTemplate: '%s',
|
||||
meta: [
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
Executable
+69
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<img class="brace" width="100" src="/brace-smile.svg"></img>
|
||||
<h1 :id="t('home.hero.title').replace(/ /g, '_')" class="title">{{ t('home.hero.title') }}</h1>
|
||||
<p :id="t('home.hero.sub').replace(/ /g, '_')" class="subtitle">{{ t('home.hero.sub') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="page-section page-section-alt">
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 class="title">{{ t('home.wiki.title') }}</h2>
|
||||
<p>{{ t('home.wiki.paragraph') }}</p>
|
||||
<UButton to="https://wiki.unix.in.th" :label="t('home.wiki.go')"/>
|
||||
</section>
|
||||
<section class="section-img">
|
||||
<img class="aspect-[4/3]" src="/wiki-mac.png"></img>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="page-section page-section-alt">
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 class="title">{{ t('home.forum.title') }}</h2>
|
||||
<p>{{ t('home.forum.paragraph') }}</p>
|
||||
<UButton to="https://forum.unix.in.th" :label="t('home.forum.go')"/>
|
||||
</section>
|
||||
<section class="section-img">
|
||||
<img class="aspect-[4/3]" src="/wiki-mac.png"></img>
|
||||
</section>
|
||||
</div>
|
||||
</section> -->
|
||||
<section class="page-section" :aria-labelledby="t('home.wiki.title').replace(/ /g, '_')" :aria-describedby="t('home.wiki.paragraph').replace(/ /g, '_')">
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 :id="t('home.wiki.title').replace(/ /g, '_')" class="title">{{ t('home.wiki.title') }}</h2>
|
||||
<p :id="t('home.wiki.paragraph').replace(/ /g, '_')">{{ t('home.wiki.paragraph') }}</p>
|
||||
<UButton to="https://wiki.unix.in.th" :label="t('home.wiki.go')"/>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="page-section" :aria-labelledby="t('home.forum.title').replace(/ /g, '_')" :aria-describedby="t('home.forum.paragraph').replace(/ /g, '_')">
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 :id="t('home.forum.title').replace(/ /g, '_')" class="title">{{ t('home.forum.title') }}</h2>
|
||||
<p :id="t('home.forum.paragraph').replace(/ /g, '_')">{{ t('home.forum.paragraph') }}</p>
|
||||
<UButton to="https://forum.unix.in.th" :label="t('home.forum.go')"/>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const {t} = useI18n();
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: '*nix in Thailand',
|
||||
titleTemplate: '%s',
|
||||
meta: [
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user