feat: init project scaffold

2026-03-19 18:34:39 +00:00 · 2025-06-13 00:10:15 +07:00
commit c71f4c360b
15 changed files with 5110 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/README.md
+++ b/README.md
@@ -0,0 +1,39 @@
+# .
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+pnpm test:unit
+```
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,17 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu({
+  stylistic: {
+    indent: 2,
+    semi: true,
+    quotes: 'single',
+    overrides: {
+      'style/comma-dangle': ['error', 'always-multiline'],
+    },
+  },
+  rules: {
+    'unused-imports/no-unused-imports': 'error',
+  },
+  vue: true,
+  typescript: true,
+});
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blog</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/app/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "rapira-test",
+  "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "type:check": "vue-tsc --build",
+    "lint:check": "eslint ."
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "tailwindcss": "^4.1.8",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.14.1",
+    "@robonen/tsconfig": "^0.0.2",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.28.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "jsdom": "^26.0.0",
+    "vite": "^6.2.4",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.8"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256">
+  <rect width="256" height="256" fill="url(#a)" rx="36"/>
+  <path fill="#fff" d="M127.954 204c42 0 76.046-34.025 76.046-76V74.8c0-6.0469-2.404-11.8462-6.682-16.122C193.04 54.4021 187.237 52 181.186 52h-49.429v33.3412c0 7.6076.464 15.4888 4.456 21.9638 2.858 4.641 6.682 8.613 11.211 11.646 4.529 3.034 9.659 5.059 15.04 5.937l1.456.235c.601.205 1.122.593 1.491 1.109s.567 1.134.567 1.768c0 .634-.198 1.252-.567 1.768-.369.516-.89.904-1.491 1.109l-1.456.235c-7.863 1.284-15.123 5.003-20.756 10.633-5.634 5.63-9.355 12.886-10.64 20.744l-.235 1.455c-.206.6-.593 1.121-1.109 1.49-.517.369-1.135.567-1.77.567-.634 0-1.253-.198-1.769-.567-.516-.369-.904-.89-1.109-1.49l-.236-1.455c-.879-5.378-2.904-10.504-5.94-15.031-3.035-4.527-7.01-8.348-11.653-11.204-6.479-3.99-14.3649-4.454-21.977-4.454H52c1.9886 40.208 35.2319 72.2 75.954 72.2Z"/>
+  <path fill="#fff" d="M84.7963 123.038H52V74.433c0-5.9496 2.3629-11.6555 6.5688-15.8625C62.7748 54.3635 68.4793 52 74.4274 52H123.02v32.8046c0 7.4851-.456 15.2394-4.381 21.6104-3.068 4.98-7.259 9.173-12.238 12.241-6.369 3.926-14.1214 4.382-21.6047 4.382Z"/>
+  <defs>
+    <linearGradient id="a" x1="128" x2="128" y1="0" y2="256" gradientUnits="userSpaceOnUse">
+      <stop stop-color="color(display-p3 .2954 .2954 .2954)"/>
+      <stop offset="1" stop-color="color(display-p3 .1203 .1203 .1203)"/>
+    </linearGradient>
+  </defs>
+</svg>
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+import { Header } from '@/widgets/Header';
+</script>
+
+<template>
+  <div class="flex flex-col min-h-screen">
+    <Header />
+    <main class="flex-1">
+      <RouterView />
+    </main>
+  </div>
+</template>
--- a/src/app/assets/index.css
+++ b/src/app/assets/index.css
@@ -0,0 +1,44 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Color Palette */
+  --black: oklch(0 0 0);
+  --white: oklch(1 0 0);
+
+  --gray-100: oklch(98% 0 0);
+  --gray-200: oklch(96% 0.0013 286.37);
+  --gray-300: oklch(92% 0.0097 273.35);
+  --gray-400: oklch(89% 0.0177 286.03);
+  --gray-500: oklch(72% 0.0264 275.76);
+  --gray-600: oklch(61% 0.0351 277.53);
+  --gray-700: oklch(50% 0.0353 276.96);
+  --gray-800: oklch(38% 0.0309 277.44);
+  --gray-900: oklch(23% 0.0428 274.8);
+
+  --primary: oklch(67% 0.1756 254.6);
+  --primary-dark: oklch(61% 0.1815 255.36);
+  --primary-light: oklch(96% 0.0148 251.16);
+
+  /* Default theme */
+  --background: var(--gray-200);
+  --foreground: var(--black);
+}
+
+.dark {
+  --background: var(--black);
+  --foreground: var(--white);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import './assets/index.css';
+
+createApp(App)
+  .use(router)
+  .mount('#app');
--- a/src/app/router.ts
+++ b/src/app/router.ts
@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+export default createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      redirect: '/blog',
+    },
+    {
+      path: '/blog',
+      name: 'blog',
+      component: () => import('@/pages/blog.vue'),
+    },
+  ],
+});
--- a/src/pages/blog.vue
+++ b/src/pages/blog.vue
@@ -0,0 +1,3 @@
+<template>
+  Blog
+</template>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,21 @@
+/// <reference types="vitest" />
+
+import { fileURLToPath, URL } from 'node:url';
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+  },
+});