rename rank.pompy.dev -> list.pompy.dev

apps/list/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

apps/list/.prettierrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import("prettier").Options} */
+export default {
+    ...import("@pompydev/prettier-config"),
+    plugins: ["prettier-plugin-tailwindcss"],
+}

apps/list/app.vue

@@ -0,0 +1,34 @@
+<template>
+    <ThemeController />
+
+    <main class="">
+        <div class="mx-auto max-w-screen-mobile">
+            <NuxtPage />
+        </div>
+    </main>
+</template>
+
+<style>
+html,
+body {
+    /* style */
+
+    @apply flex flex-col;
+
+    /* spacing */
+
+    @apply min-h-screen;
+
+    /* text */
+
+    @apply break-words font-noto-sans text-base font-normal leading-8 antialiased;
+
+    /* color */
+
+    @apply bg-light-ui-bg fill-light-text-default text-light-text-default dark:bg-dark-ui-bg dark:fill-dark-text-default dark:text-dark-text-default;
+}
+
+* {
+    @apply m-0;
+}
+</style>

apps/list/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/list/components/ThemeController.vue

@@ -0,0 +1,31 @@
+<script setup>
+const colorMode = useColorMode()
+
+const icon = computed(() => {
+    switch (colorMode.preference) {
+        case "system":
+            return "material-symbols:monitor-outline"
+        case "dark":
+            return "material-symbols:moon-stars-outline"
+        case "light":
+            return "material-symbols:sunny-outline-rounded"
+        default:
+            return "material-symbols:monitor-outline"
+    }
+})
+</script>
+
+<template>
+    <div class="flex justify-end gap-2 p-2">
+        <Icon :name="icon" size="32" />
+
+        <select
+            v-model="colorMode.preference"
+            class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+        >
+            <option value="system">System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+        </select>
+    </div>
+</template>

apps/list/error.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app"
+
+const props = defineProps({
+    error: Object as () => NuxtError,
+})
+</script>
+
+<template>
+    <div class="flex flex-col items-center">
+        <h2 class="text-8xl font-black">{{ $props.error?.statusCode }}</h2>
+        <p>{{ $props.error?.statusMessage }}</p>
+        <NuxtLink href="/" class="underline">bring me home!</NuxtLink>
+    </div>
+</template>

apps/list/eslint.config.js

@@ -0,0 +1,7 @@
+import pompydevEslintConfig from "@pompydev/eslint-config"
+import { globalIgnores } from "eslint/config"
+
+export default [
+    globalIgnores(["**/.nuxt/", "**/.output/"]),
+    ...pompydevEslintConfig,
+]

apps/list/nuxt.config.ts

@@ -0,0 +1,36 @@
+const title = "pomp's biased & opinionated list of ..."
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    compatibilityDate: "2024-11-01",
+    devServer: { port: 3001 },
+    devtools: { enabled: true },
+    modules: [
+        "@nuxtjs/color-mode",
+        "@nuxtjs/tailwindcss",
+        "@nuxtjs/google-fonts",
+        "@nuxt/icon",
+    ],
+    app: {
+        head: {
+            title, // default fallback title
+            titleTemplate: `%s | ${title}`,
+            htmlAttrs: {
+                lang: "en",
+            },
+        },
+    },
+
+    // https://color-mode.nuxtjs.org/#configuration
+    colorMode: {
+        // default is "-mode". Without this, tailwind dark mode won't work.
+        classSuffix: "",
+    },
+
+    // https://google-fonts.nuxtjs.org/getting-started/options
+    googleFonts: {
+        families: {
+            "Noto Sans KR": true,
+        },
+    },
+})

apps/list/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@pompydev/list",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "lint": "oxlint && eslint .",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "dependencies": {
+        "@nuxt/icon": "1.11.0",
+        "@nuxtjs/color-mode": "3.5.2",
+        "@nuxtjs/google-fonts": "3.2.0",
+        "@tanstack/vue-table": "8.21.2",
+        "nuxt": "3.16.0",
+        "vue": "3.5.13",
+        "vue-router": "4.5.0"
+    },
+    "devDependencies": {
+        "@pompydev/eslint-config": "workspace:*",
+        "@pompydev/prettier-config": "workspace:*",
+        "@pompydev/tailwind-config": "workspace:*",
+        "@nuxtjs/tailwindcss": "6.13.2",
+        "prettier-plugin-tailwindcss": "0.6.11"
+    }
+}

apps/list/pages/content-creators.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+    FlexRender,
+    getCoreRowModel,
+    useVueTable,
+    createColumnHelper,
+} from "@tanstack/vue-table"
+
+useHead({
+    title: "Content creators",
+})
+
+type ContentCreator = {
+    channelId: string
+    name: string
+    subscribers: number
+}
+const _contentCreators: ContentCreator[] = [
+    {
+        channelId: "asdf",
+        name: "Channel A",
+        subscribers: 9999,
+    },
+]
+
+const columnHelper = createColumnHelper<ContentCreator>()
+const contentCreators = ref(_contentCreators)
+const t = useVueTable({
+    get data() {
+        return contentCreators.value
+    },
+    columns: [
+        columnHelper.accessor("name", {
+            id: "channelId",
+            header: "Name",
+        }),
+        columnHelper.accessor("subscribers", {
+            header: "Subscribers",
+        }),
+    ],
+    getCoreRowModel: getCoreRowModel(),
+})
+</script>
+
+<template>
+    <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">
+            <thead>
+                <tr
+                    class="border"
+                    v-for="headerGroup in t.getHeaderGroups()"
+                    :key="headerGroup.id"
+                >
+                    <th
+                        class="border p-1"
+                        v-for="header in headerGroup.headers"
+                        :key="header.id"
+                        :colSpan="header.colSpan"
+                    >
+                        <FlexRender
+                            v-if="!header.isPlaceholder"
+                            :render="header.column.columnDef.header"
+                            :props="header.getContext()"
+                        />
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody class="border">
+                <tr v-for="row in t.getRowModel().rows" :key="row.id">
+                    <td
+                        class="border p-1"
+                        v-for="cell in row.getVisibleCells()"
+                        :key="cell.id"
+                    >
+                        <FlexRender
+                            :render="cell.column.columnDef.cell"
+                            :props="cell.getContext()"
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

apps/list/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <h1 class="text-4xl font-black">
+        pomp's<br />
+        biased & opinionated<br />
+        list of
+    </h1>
+
+    <NuxtLink href="/content-creators" class="underline">
+        Content Creators
+    </NuxtLink>
+</template>

apps/list/public/robots.txt

@@ -0,0 +1 @@
+

apps/list/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../.nuxt/tsconfig.server.json"
+}

apps/list/tailwind.config.js

@@ -0,0 +1,6 @@
+import myPreset from "@pompydev/tailwind-config/tailwind.config.js"
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    presets: [myPreset],
+}

apps/list/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json"
+}