Initial commit
This commit is contained in:
commit
564cc84db1
GPG key ID:
C9BBAB79405EE56D
14 changed files with 2864 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules/
|
||||
/dist/
|
||||
/.idea/
|
||||
*.env
|
||||
1
.nvmrc
Normal file
1
.nvmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
20.11
|
||||
14
index.html
Normal file
14
index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tea Dashboard (Loading…)</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
<link rel="stylesheet" href="./src/global.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="tooltips"></div>
|
||||
</body>
|
||||
</html>
|
||||
36
package.json
Normal file
36
package.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "@tea-project/web-frontend",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^20.12.12",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"browserslist": "^4.23.0",
|
||||
"modern-normalize": "^2.0.0",
|
||||
"sass": "^1.77.2",
|
||||
"type-fest": "^4.18.2",
|
||||
"typescript": "^5.4.5",
|
||||
"unocss": "^0.60.2",
|
||||
"unplugin-icons": "^0.19.0",
|
||||
"unplugin-vue-router": "^0.8.6",
|
||||
"vite": "^5.2.11",
|
||||
"windicss": "^3.5.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/fraunces": "^5.0.21",
|
||||
"@fontsource-variable/manrope": "^5.0.20",
|
||||
"@iconify-json/solar": "^1.1.9",
|
||||
"@iconify-json/svg-spinners": "^1.1.2",
|
||||
"@unhead/vue": "^1.9.10",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"vue": "^3.4.27",
|
||||
"vue-router": "^4.3.2"
|
||||
}
|
||||
}
|
||||
2494
pnpm-lock.yaml
generated
Normal file
2494
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
21
src/App.vue
Normal file
21
src/App.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<NavigationMenuWrapper>
|
||||
<div class="p-8 flex-shrink-0 flex-grow-0">
|
||||
<SuspenseRouterView/>
|
||||
</div>
|
||||
</NavigationMenuWrapper>
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useHead } from "@unhead/vue"
|
||||
import SuspenseRouterView from "./components/reusable/SuspenseRouterView.vue"
|
||||
import NavigationMenuWrapper from "@/components/NavigationMenuWrapper.vue"
|
||||
|
||||
useHead({
|
||||
titleTemplate: title => title === undefined ? "Tea Dashboard" : `${title} — Tea Dashboard`
|
||||
})
|
||||
</script>
|
||||
71
src/components/NavigationMenuWrapper.vue
Normal file
71
src/components/NavigationMenuWrapper.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<nav class="w-70 bg-gray-900 fixed top-0 left-0 bottom-0 p-8 flex flex-col gap-3" :class="$style.root">
|
||||
<ul class="list-none p-0 grid grid-cols-2 gap-1">
|
||||
<li v-for="type in mediaTypes" :key="type.id">
|
||||
<router-link
|
||||
class="relative rounded-sm w-full p-2 no-underline flex flex-col items-center gap-1 group"
|
||||
:to="`/media/${type.id}`"
|
||||
:style="{ color: type.color }"
|
||||
>
|
||||
<component class="absolute -top-5 left-0 opacity-5 blur-5 pointer-events-none group-hover:blur-lg group-hover:opacity-30 transition duration-300" :is="type.blob"/>
|
||||
<component class="text-3xl" :is="type.icon"/>
|
||||
<span class="text-base">{{ type.label }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="pl-70">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
.root {
|
||||
box-shadow: 0 0 4px 0 theme("colors.gray.700");
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../assets/noise.png") repeat;
|
||||
opacity: 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Component } from "vue"
|
||||
import BooksIcon from "virtual:icons/ph/books-light"
|
||||
import FilmStripIcon from "virtual:icons/ph/film-strip-light"
|
||||
import LiteratureBlob from "./blobs/LiteratureBlob.vue"
|
||||
import MoviesBlob from "./blobs/MoviesBlob.vue"
|
||||
|
||||
interface MediaType {
|
||||
id: string
|
||||
label: string
|
||||
icon: Component
|
||||
blob: Component
|
||||
color: string
|
||||
}
|
||||
|
||||
const mediaTypes: MediaType[] = [
|
||||
{
|
||||
id: "literature",
|
||||
label: "Literature",
|
||||
icon: BooksIcon,
|
||||
blob: LiteratureBlob,
|
||||
color: "#11b970"
|
||||
},
|
||||
{
|
||||
id: "films",
|
||||
label: "Movies",
|
||||
icon: FilmStripIcon,
|
||||
blob: MoviesBlob,
|
||||
color: "#d2b214"
|
||||
}
|
||||
]
|
||||
</script>
|
||||
62
src/components/SuspenseRouterView.vue
Normal file
62
src/components/SuspenseRouterView.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<template v-if="Component">
|
||||
<suspense @pending="loading = true" @resolve="loading = false">
|
||||
<!-- The key makes that components are not reused if only params changed -->
|
||||
<component :is="Component" :key="JSON.stringify($route.params)"/>
|
||||
</suspense>
|
||||
</template>
|
||||
</router-view>
|
||||
<div
|
||||
class="pt-10 absolute inset-0 bg-background"
|
||||
:class="$style.loadingOverlay"
|
||||
:data-is-visible="loading || forceLoading"
|
||||
>
|
||||
<div class="flex justify-center gap-3 text-2xl p-8" :class="$style.loadingIndicator">
|
||||
<LoadingIcon/>
|
||||
<span>{{ loadingText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
.loadingOverlay {
|
||||
opacity: 0;
|
||||
transition: 100ms ease opacity;
|
||||
|
||||
&[data-is-visible="true"] {
|
||||
opacity: 100%;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 200ms;
|
||||
|
||||
.loadingIndicator {
|
||||
opacity: 100%;
|
||||
transition-delay: 1500ms;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-is-visible="false"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loadingIndicator {
|
||||
opacity: 0;
|
||||
transition: 200ms ease opacity;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import LoadingIcon from "./LoadingIcon.vue"
|
||||
|
||||
defineProps({
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: "Loading…"
|
||||
},
|
||||
forceLoading: Boolean
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
</script>
|
||||
0
src/generated-types/.gitkeep
Normal file
0
src/generated-types/.gitkeep
Normal file
35
src/global.css
Normal file
35
src/global.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
@import "modern-normalize/modern-normalize.css";
|
||||
|
||||
/* fraunces-latin-wght-italic */
|
||||
@font-face {
|
||||
font-family: "Fraunces Variable";
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
font-weight: 100 900;
|
||||
src: url("@fontsource-variable/fraunces/files/fraunces-latin-wght-italic.woff2") format('woff2-variations');
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||||
}
|
||||
|
||||
/* manrope-latin-wght-normal */
|
||||
@font-face {
|
||||
font-family: 'Manrope Variable';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 200 800;
|
||||
src: url(@fontsource-variable/manrope/files/manrope-latin-wght-normal.woff2) format('woff2-variations');
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
@apply font-sans;
|
||||
width: 100%;
|
||||
background: theme("colors.gray.3");
|
||||
color: hsl(0 0% 10%);
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
}
|
||||
19
src/main.ts
Normal file
19
src/main.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import "uno.css"
|
||||
|
||||
import { createApp } from "vue"
|
||||
import App from "./App.vue"
|
||||
import { createRouter, createWebHistory } from "vue-router/auto"
|
||||
import { createHead } from "@unhead/vue"
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory()
|
||||
})
|
||||
|
||||
const head = createHead()
|
||||
|
||||
app
|
||||
.use(router)
|
||||
.use(head)
|
||||
.mount("#app")
|
||||
38
tsconfig.json
Normal file
38
tsconfig.json
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"declaration": false,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom"
|
||||
],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"rootDir": "src",
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"stripInternal": true,
|
||||
"noUncheckedIndexedAccess": false,
|
||||
"target": "esnext",
|
||||
"types": [
|
||||
"vite/client",
|
||||
"vite-plugin-pages/client",
|
||||
"unplugin-icons/types/vue",
|
||||
"unplugin-vue-router/client"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.vue",
|
||||
]
|
||||
}
|
||||
46
uno.config.ts
Normal file
46
uno.config.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { defineConfig, transformerDirectives, presetWind } from "unocss"
|
||||
import colors from "windicss/colors"
|
||||
|
||||
const headlessUiVariantRegex = /^ui-(\w+):/
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetWind({
|
||||
dark: "media",
|
||||
arbitraryVariants: false,
|
||||
preflight: true
|
||||
})
|
||||
],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: `"Manrope Variable", sans-serif`,
|
||||
serif: "Fraunces Variable, serif",
|
||||
system: "sans-serif"
|
||||
},
|
||||
colors: {
|
||||
dark: colors.dark,
|
||||
light: colors.light,
|
||||
gray: colors.warmGray
|
||||
}
|
||||
},
|
||||
variants: [
|
||||
matcher => {
|
||||
const matches = matcher.match(headlessUiVariantRegex)
|
||||
|
||||
if (matches === null) {
|
||||
return matcher
|
||||
}
|
||||
|
||||
const prefix = matches[0]
|
||||
const state = matches[1]
|
||||
|
||||
return {
|
||||
matcher: matcher.slice(prefix.length),
|
||||
selector: s => `${s}[data-headlessui-state~="${state}"]`
|
||||
}
|
||||
}
|
||||
],
|
||||
transformers: [
|
||||
transformerDirectives()
|
||||
]
|
||||
})
|
||||
23
vite.config.ts
Normal file
23
vite.config.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { defineConfig } from "vite"
|
||||
import vuePlugin from "@vitejs/plugin-vue"
|
||||
import iconsPlugin from "unplugin-icons/vite"
|
||||
import unoCssPlugin from "unocss/vite"
|
||||
import vueRouterPlugin from "unplugin-vue-router/vite"
|
||||
import { resolve } from "node:path"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vueRouterPlugin({
|
||||
importMode: "async",
|
||||
dts: "./src/generated-types/vue-router.d.ts"
|
||||
}),
|
||||
vuePlugin(),
|
||||
iconsPlugin(),
|
||||
unoCssPlugin()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "./src")
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue