From 695ce40eca1398c8914dd3f70f37c82eb10e5cd2 Mon Sep 17 00:00:00 2001
From: pompydev <pompydev@proton.me>
Date: Thu, 20 Mar 2025 20:49:30 +0900
Subject: [PATCH] feat(list): add header component

---
 apps/list/app.vue                    |  8 +------
 apps/list/components/Header.vue      | 36 ++++++++++++++++++++++++++++
 apps/list/nuxt.config.ts             | 12 +++++++++-
 apps/list/pages/content-creators.vue |  6 ++++-
 apps/list/pages/index.vue            |  6 +----
 5 files changed, 54 insertions(+), 14 deletions(-)
 create mode 100644 apps/list/components/Header.vue

diff --git a/apps/list/app.vue b/apps/list/app.vue
index 98976f1..28ddc1d 100644
--- a/apps/list/app.vue
+++ b/apps/list/app.vue
@@ -1,11 +1,5 @@
 <template>
-    <ThemeController />
-
-    <main class="">
-        <div class="mx-auto max-w-screen-mobile">
-            <NuxtPage />
-        </div>
-    </main>
+    <NuxtPage />
 </template>
 
 <style>
diff --git a/apps/list/components/Header.vue b/apps/list/components/Header.vue
new file mode 100644
index 0000000..099e3aa
--- /dev/null
+++ b/apps/list/components/Header.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps(["highlight"])
+</script>
+
+<template>
+    <div class="slant bg-light-card-bg dark:bg-dark-card-bg">
+        <ThemeController class="mb-10" />
+
+        <h1
+            class="text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
+        >
+            <span class="font-semibold">pomp</span>'s<br />
+            <span class="">biased</span> &
+            <span class="">opinionated</span>
+            <br />
+            list of
+            <span
+                class="highlight px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
+            >
+                {{ props.highlight }}
+            </span>
+        </h1>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    @apply underline decoration-blue-400/75 decoration-[12px] underline-offset-[-6px] dark:decoration-blue-600/75;
+    text-decoration-skip-ink: none;
+}
+
+.slant {
+    padding-bottom: 8rem /* 128px (pb-32) */;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 128px));
+}
+</style>
diff --git a/apps/list/nuxt.config.ts b/apps/list/nuxt.config.ts
index 4393eb7..02e63fa 100644
--- a/apps/list/nuxt.config.ts
+++ b/apps/list/nuxt.config.ts
@@ -31,7 +31,17 @@ export default defineNuxtConfig({
     // https://google-fonts.nuxtjs.org/getting-started/options
     googleFonts: {
         families: {
-            "Noto Sans KR": true,
+            "Noto Sans KR": [
+                // 100, // thin
+                // 200, // extralight
+                // 300, // light
+                400, // normal
+                // 500, // medium
+                600, // semibold
+                // 700, // bold
+                800, // extrabold
+                // 900, // black
+            ],
         },
     },
 
diff --git a/apps/list/pages/content-creators.vue b/apps/list/pages/content-creators.vue
index e5e1891..e53f4dc 100644
--- a/apps/list/pages/content-creators.vue
+++ b/apps/list/pages/content-creators.vue
@@ -43,7 +43,11 @@ const t = useVueTable({
 </script>
 
 <template>
-    <h1 class="text-4xl font-black">pomp's biased and opinionated list of Content creators</h1>
+    <Header highlight="Content creators" />
+
+    <h1 class="text-4xl font-black">
+        pomp's biased and opinionated list of Content creators
+    </h1>
     <NuxtLink href="/" class="underline">Back</NuxtLink>
     <div class="p-2">
         <table class="border">
diff --git a/apps/list/pages/index.vue b/apps/list/pages/index.vue
index 85883f8..ca0912a 100644
--- a/apps/list/pages/index.vue
+++ b/apps/list/pages/index.vue
@@ -1,9 +1,5 @@
 <template>
-    <h1 class="text-4xl font-black">
-        pomp's<br />
-        biased & opinionated<br />
-        list of
-    </h1>
+    <Header highlight="anything" />
 
     <NuxtLink href="/content-creators" class="underline">
         Content Creators