diff --git a/bun.lockb b/bun.lockb index a26b026..f1e282f 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html index dec5f90..c3fb314 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + SnippetsManager
diff --git a/package.json b/package.json index a0cdb19..7dc3544 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,11 @@ "format": "prettier --write src/" }, "dependencies": { + "@mdi/font": "^7.4.47", "pinia": "^2.1.7", "vue": "^3.4.29", - "vue-router": "^4.3.3" + "vue-router": "^4.3.3", + "vuetify": "^3.7.2" }, "devDependencies": { "@rushstack/eslint-patch": "^1.8.0", diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..41f78f2 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue index 703c777..b2ce63b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,16 @@ - + diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index 36fb845..0000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 38d821e..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue new file mode 100644 index 0000000..37eba2a --- /dev/null +++ b/src/components/NavBar.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 49d8f73..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/main.ts b/src/main.ts index 5dcad83..97f3828 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,14 +1,26 @@ -import './assets/main.css' - import { createApp } from 'vue' import { createPinia } from 'pinia' +import '@mdi/font/css/materialdesignicons.css' +import 'vuetify/styles' +import { createVuetify } from 'vuetify' +import * as components from 'vuetify/components' +import * as directives from 'vuetify/directives' + import App from './App.vue' import router from './router' const app = createApp(App) +const vuetify = createVuetify({ + components, + directives, + icons: { + defaultSet: 'mdi' + } +}) app.use(createPinia()) app.use(router) +app.use(vuetify) app.mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts index a49ae50..bf98301 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,22 +2,14 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } - ] + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: HomeView + } + ] }) export default router diff --git a/src/stores/counter.ts b/src/stores/counter.ts deleted file mode 100644 index b6757ba..0000000 --- a/src/stores/counter.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ref, computed } from 'vue' -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore('counter', () => { - const count = ref(0) - const doubleCount = computed(() => count.value * 2) - function increment() { - count.value++ - } - - return { count, doubleCount, increment } -}) diff --git a/src/stores/settings.ts b/src/stores/settings.ts new file mode 100644 index 0000000..9e36cde --- /dev/null +++ b/src/stores/settings.ts @@ -0,0 +1,32 @@ +import { ref } from 'vue' +import { defineStore } from 'pinia' + +export const useSettingsStore = defineStore('settings', () => { + const getCookie = (name: string): string | null => { + const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')) + return match ? match[2] : null + } + + const setCookie = (name: string, value: string, days: number = 365) => { + const date = new Date() + date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000) + const expires = 'expires=' + date.toUTCString() + document.cookie = `${name}=${value}; ${expires}; path=/` + } + + const darkModeCookie = getCookie('darkModeEnabled') + const darkModeEnabled = ref( + darkModeCookie !== null + ? darkModeCookie === 'true' + : window.matchMedia('(prefers-color-scheme: dark)').matches + ) + + if (darkModeCookie === null) setCookie('darkModeEnabled', darkModeEnabled.value.toString()) + + function switchDarkMode() { + darkModeEnabled.value = !darkModeEnabled.value + setCookie('darkModeEnabled', darkModeEnabled.value.toString()) + } + + return { darkModeEnabled, switchDarkMode } +}) diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 75181fa..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 6951fa2..89ae62c 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,7 @@