Finished integrating Shadow DOM icons, first steps towards dynamic theme
This commit is contained in:
parent
014e64d174
commit
cfbaf56159
|
|
@ -1 +1 @@
|
|||
[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"15"},{"size":165,"mtime":1700688268778,"hashOfConfig":"16"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"16"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"16"},{"size":804,"mtime":1700688952880,"hashOfConfig":"16"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"16"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"16"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"16"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"16"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"16"},{"size":1989,"mtime":1706379493817,"hashOfConfig":"16"},{"size":2045,"mtime":1706266444695,"hashOfConfig":"16"},{"size":1236,"mtime":1706205683132,"hashOfConfig":"16"},{"size":1135,"mtime":1706030243608,"hashOfConfig":"16"},{"size":979,"mtime":1706003786966,"hashOfConfig":"16"},{"size":16911,"mtime":1706027251875,"hashOfConfig":"16"},"5tgxr3"]
|
||||
[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"16"},{"size":165,"mtime":1700688268778,"hashOfConfig":"17"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"17"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"17"},{"size":804,"mtime":1700688952880,"hashOfConfig":"17"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"17"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"17"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"17"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"17"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"17"},{"size":2097,"mtime":1706459320334,"hashOfConfig":"17"},{"size":2045,"mtime":1706266444695,"hashOfConfig":"17"},{"size":1236,"mtime":1706205683132,"hashOfConfig":"17"},{"size":1135,"mtime":1706030243608,"hashOfConfig":"17"},{"size":979,"mtime":1706003786966,"hashOfConfig":"17"},{"size":16911,"mtime":1706027251875,"hashOfConfig":"17"},{"size":935,"mtime":1706445231843,"hashOfConfig":"17"},"5tgxr3"]
|
||||
79
app.vue
79
app.vue
|
|
@ -1,5 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
const config = useAppConfig()
|
||||
const theme = useVThemeSSR()
|
||||
|
||||
console.log('theme.dark.value: ', theme.dark.value)
|
||||
|
||||
useHead({
|
||||
titleTemplate: (chunk?) => {
|
||||
|
|
@ -11,44 +14,48 @@ useHead({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
id="ender-layout"
|
||||
class="d-flex flex-column align-items-center pt-sm-5 h-100"
|
||||
<VThemeProvider
|
||||
:theme="theme.dark.value ? config.theme.dark : config.theme.light"
|
||||
>
|
||||
<AClientOnly appear render="xs" mode="out-in">
|
||||
<SwipeControls />
|
||||
</AClientOnly>
|
||||
|
||||
<NuxtLayout
|
||||
name="card"
|
||||
class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||||
<div
|
||||
id="ender-layout"
|
||||
class="d-flex flex-column align-items-center pt-sm-5 h-100"
|
||||
>
|
||||
<template #footer>
|
||||
<AClientOnly
|
||||
appear
|
||||
render="xs"
|
||||
mode="in-out"
|
||||
enter="animate__animated animate__delay-1s animate__fadeIn"
|
||||
leave="animate__animated animate__fadeOut"
|
||||
>
|
||||
<Flooter opaque />
|
||||
</AClientOnly>
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
<AClientOnly appear render="xs" mode="out-in">
|
||||
<SwipeControls />
|
||||
</AClientOnly>
|
||||
|
||||
<ClientOnly>
|
||||
<template #fallback> </template>
|
||||
<Portal layout="#ender-layout" animate randomize fade />
|
||||
</ClientOnly>
|
||||
<NuxtLayout
|
||||
name="card"
|
||||
class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||||
>
|
||||
<template #footer>
|
||||
<AClientOnly
|
||||
appear
|
||||
render="xs"
|
||||
mode="in-out"
|
||||
enter="animate__animated animate__delay-1s animate__fadeIn"
|
||||
leave="animate__animated animate__fadeOut"
|
||||
>
|
||||
<Flooter opaque />
|
||||
</AClientOnly>
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
|
||||
<AClientOnly
|
||||
appear
|
||||
render="sm-up"
|
||||
mode="out-in"
|
||||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||||
leave="animate__animated animate__fadeOutDown"
|
||||
>
|
||||
<Flooter class="floaty mb-2 px-2" />
|
||||
</AClientOnly>
|
||||
<ClientOnly>
|
||||
<template #fallback> </template>
|
||||
<Portal layout="#ender-layout" animate randomize fade />
|
||||
</ClientOnly>
|
||||
|
||||
<AClientOnly
|
||||
appear
|
||||
render="sm-up"
|
||||
mode="out-in"
|
||||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||||
leave="animate__animated animate__fadeOutDown"
|
||||
>
|
||||
<Flooter class="floaty mb-2 px-2" />
|
||||
</AClientOnly>
|
||||
</VThemeProvider>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48" id="github"><rect width="48" height="48" fill="#000" rx="24"></rect><path fill="#fff" fill-rule="evenodd" d="M31.4225 46.8287C29.0849 47.589 26.5901 48 24 48C21.4081 48 18.9118 47.5884 16.5728 46.8272C17.6533 46.9567 18.0525 46.2532 18.0525 45.6458C18.0525 45.3814 18.048 44.915 18.0419 44.2911C18.035 43.5692 18.0259 42.6364 18.0195 41.5615C11.343 43.0129 9.9345 38.3418 9.9345 38.3418C8.844 35.568 7.2705 34.8294 7.2705 34.8294C5.091 33.3388 7.4355 33.369 7.4355 33.369C9.843 33.5387 11.1105 35.8442 11.1105 35.8442C13.2525 39.5144 16.728 38.4547 18.096 37.8391C18.3135 36.2871 18.9345 35.2286 19.62 34.6283C14.2905 34.022 8.688 31.9625 8.688 22.7597C8.688 20.1373 9.6225 17.994 11.1585 16.3142C10.911 15.7065 10.0875 13.2657 11.3925 9.95888C11.3925 9.95888 13.4085 9.31336 17.9925 12.4206C19.908 11.8876 21.96 11.6222 24.0015 11.6114C26.04 11.6218 28.0935 11.8876 30.0105 12.4206C34.5915 9.31336 36.603 9.95888 36.603 9.95888C37.9125 13.2657 37.089 15.7065 36.8415 16.3142C38.3805 17.994 39.309 20.1373 39.309 22.7597C39.309 31.9849 33.6975 34.0161 28.3515 34.6104C29.2125 35.3519 29.9805 36.8168 29.9805 39.058C29.9805 41.2049 29.9671 43.0739 29.9582 44.3125C29.9538 44.9261 29.9505 45.385 29.9505 45.6462C29.9505 46.2564 30.3401 46.9613 31.4225 46.8287Z" clip-rule="evenodd"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 65 65" fill="#fff"><use xlink:href="#B" x=".5" y=".5"/><defs><linearGradient id="A" x2="50%" x1="50%" y2="100%" y1="0%"><stop stop-color="#111d2e" offset="0%"/><stop stop-color="#051839" offset="21.2%"/><stop stop-color="#0a1b48" offset="40.7%"/><stop stop-color="#132e62" offset="58.1%"/><stop stop-color="#144b7e" offset="73.8%"/><stop stop-color="#136497" offset="87.3%"/><stop stop-color="#1387b8" offset="100%"/></linearGradient></defs><symbol id="B"><g><path d="M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z" fill="url(#A)"/><path d="M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z"/></g></symbol></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" id="twitch"><path fill="#A071FF" d="M5 1.25C4.80109 1.25 4.61032 1.32902 4.46967 1.46967L1.46967 4.46967C1.32902 4.61032 1.25 4.80109 1.25 5V19.5C1.25 19.9142 1.58579 20.25 2 20.25H6.25V22C6.25 22.4142 6.58579 22.75 7 22.75H9C9.17545 22.75 9.34535 22.6885 9.48014 22.5762L12.2715 20.25H19C19.2508 20.25 19.4849 20.1247 19.624 19.916L22.624 15.416C22.7062 15.2928 22.75 15.1481 22.75 15V2C22.75 1.58579 22.4142 1.25 22 1.25H5Z"></path><path fill="#ECEFF1" d="M6 3.75C5.80109 3.75 5.61032 3.82902 5.46966 3.96967C5.32901 4.11033 5.25 4.3011 5.25 4.50001L5.2502 15C5.2502 15.4142 5.58599 15.75 6.0002 15.75H8.2502V17.5C8.2502 17.791 8.41854 18.0558 8.68208 18.1792C8.94562 18.3026 9.25677 18.2625 9.48033 18.0762L12.2717 15.75H17.7002C17.951 15.75 18.1851 15.6247 18.3242 15.416L20.1242 12.716C20.2064 12.5928 20.2502 12.4481 20.2502 12.3V4.5C20.2502 4.08579 19.9144 3.75 19.5002 3.75H6Z"></path><path fill="#A071FF" fill-rule="evenodd" d="M12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V12C12.75 12.4142 12.4142 12.75 12 12.75 11.5858 12.75 11.25 12.4142 11.25 12V7C11.25 6.58579 11.5858 6.25 12 6.25zM16 6.25C16.4142 6.25 16.75 6.58579 16.75 7V12C16.75 12.4142 16.4142 12.75 16 12.75 15.5858 12.75 15.25 12.4142 15.25 12V7C15.25 6.58579 15.5858 6.25 16 6.25z" clip-rule="evenodd"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -21,7 +21,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
|
|||
description="official website"
|
||||
/>
|
||||
<ul
|
||||
class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
|
||||
class="navbar-nav flex-row flex-wrap align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
|
||||
>
|
||||
<li v-for="(page, index) in links" :key="index" class="nav-item">
|
||||
<Route
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import cogIcon from '~/assets/images/icons/cog.png'
|
||||
import pearlIcon from '~/assets/images/icons/pearl.gif'
|
||||
|
||||
const active = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -18,42 +16,48 @@ const active = ref(false)
|
|||
</div>
|
||||
</template>
|
||||
<template #default="{ isActive }">
|
||||
<VCard title="Dialog">
|
||||
<VCardText>
|
||||
<div class="overlay background"></div>
|
||||
<div class="overlay content">
|
||||
<img
|
||||
class="icon-badge user-select-none"
|
||||
draggable="false"
|
||||
:src="pearlIcon"
|
||||
alt="Pearl"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="alex text-align-center">Site options</h3>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<p>
|
||||
<strong>Theme</strong><br />
|
||||
Available in all flavors, vanilla and chocolate.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<p>
|
||||
<strong>Animation</strong><br />
|
||||
Some computers may have issues rendering that gorgeous
|
||||
background animation. Enabling it substantially increases
|
||||
power consumption.
|
||||
</p>
|
||||
</div>
|
||||
<VCard>
|
||||
<template #title>
|
||||
<h3 class="alex text-align-center">Site options</h3>
|
||||
</template>
|
||||
<div class="overlay background"></div>
|
||||
<VCardText class="overlay content">
|
||||
<img
|
||||
class="icon-badge user-select-none"
|
||||
draggable="false"
|
||||
:src="pearlIcon"
|
||||
alt="Pearl"
|
||||
/>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<p>
|
||||
<strong>Theme</strong><br />
|
||||
Available in all flavors, vanilla and chocolate.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<p>
|
||||
<strong>Animation</strong><br />
|
||||
Some computers may have issues rendering that gorgeous
|
||||
background animation. Enabling it substantially increases
|
||||
power consumption.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Report a bug
|
||||
</VCardText>
|
||||
Report a bug
|
||||
<VCardActions>
|
||||
<VSpacer></VSpacer>
|
||||
|
||||
<VBtn text="Close Dialog" @click="isActive.value = false"></VBtn>
|
||||
<VBtn
|
||||
color="success"
|
||||
prepend-icon="close"
|
||||
@click="isActive.value = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</template>
|
||||
|
|
@ -71,6 +75,15 @@ const active = ref(false)
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.icon-badge {
|
||||
position: fixed;
|
||||
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import 'iconify-icon'
|
||||
import type { IconifyRenderMode } from 'iconify-icon'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
|
|
@ -8,6 +7,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
mode: {
|
||||
type: String as PropType<IconifyRenderMode>,
|
||||
default: 'svg',
|
||||
|
|
@ -33,12 +36,11 @@ const props = defineProps({
|
|||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const icon = props.name?.split(':')?.[0] === 'local' ?
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<iconify-icon
|
||||
class="icon"
|
||||
:icon="props.name"
|
||||
:mode="props.mode"
|
||||
:inline="props.inline"
|
||||
|
|
@ -49,4 +51,8 @@ const icon = props.name?.split(':')?.[0] === 'local' ?
|
|||
/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.icon {
|
||||
color: v-bind(color);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
export function useCustomTheme() {
|
||||
const { $vuetify } = useNuxtApp()
|
||||
|
||||
const isDark = useDark({
|
||||
valueDark: 'dark',
|
||||
valueLight: 'light',
|
||||
initialValue: 'light',
|
||||
onChanged: (dark: boolean) => {
|
||||
$vuetify.theme.global.name.value = dark ? 'dark' : 'light'
|
||||
},
|
||||
})
|
||||
|
||||
const toggle = useToggle(isDark)
|
||||
|
||||
return { isDark, toggle }
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
export default function () {
|
||||
const { $vuetify } = useNuxtApp()
|
||||
const config = useAppConfig()
|
||||
|
||||
const dark = useDark({
|
||||
valueLight: config.theme.light,
|
||||
valueDark: config.theme.dark,
|
||||
onChanged: (dark: boolean) => {
|
||||
$vuetify.theme.global.name.value = dark
|
||||
? config.theme.dark
|
||||
: config.theme.light
|
||||
},
|
||||
})
|
||||
|
||||
const toggle = useToggle(dark)
|
||||
|
||||
return { dark, toggle }
|
||||
}
|
||||
50
config.ts
50
config.ts
|
|
@ -1,3 +1,4 @@
|
|||
import type { ThemeDefinition } from 'vuetify'
|
||||
import packageJSON from './package.json'
|
||||
|
||||
interface TitleConfig {
|
||||
|
|
@ -10,6 +11,15 @@ interface BuildConfig {
|
|||
version: string
|
||||
}
|
||||
|
||||
interface ThemeConfig {
|
||||
file: string
|
||||
cookie: string
|
||||
default: string
|
||||
light: string
|
||||
dark: string
|
||||
themes: Record<string, ThemeDefinition>
|
||||
}
|
||||
|
||||
type config = {
|
||||
url: string
|
||||
name: string
|
||||
|
|
@ -17,6 +27,7 @@ type config = {
|
|||
description: string
|
||||
locale: string
|
||||
build: BuildConfig
|
||||
theme: ThemeConfig
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -33,4 +44,43 @@ export default {
|
|||
date: new Date().toISOString().split('T')[0],
|
||||
version: packageJSON.version || '0.0.0',
|
||||
},
|
||||
theme: {
|
||||
file: './assets/styles/vuetify.scss',
|
||||
cookie: 'color-scheme',
|
||||
default: 'vanilla',
|
||||
light: 'vanilla',
|
||||
dark: 'chocolate',
|
||||
themes: {
|
||||
vanilla: {
|
||||
dark: false,
|
||||
colors: {
|
||||
background: '#FFFFFF',
|
||||
surface: '#FFFFFF',
|
||||
primary: '#6200EE',
|
||||
'primary-darken-1': '#3700B3',
|
||||
secondary: '#03DAC6',
|
||||
'secondary-darken-1': '#018786',
|
||||
error: '#B00020',
|
||||
info: '#2196F3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FB8C00',
|
||||
},
|
||||
},
|
||||
chocolate: {
|
||||
dark: true,
|
||||
colors: {
|
||||
background: '#000',
|
||||
surface: '#000',
|
||||
primary: '#795548',
|
||||
'primary-darken-1': '#5D4037',
|
||||
secondary: '#FF9800',
|
||||
'secondary-darken-1': '#F57C00',
|
||||
error: '#B00020',
|
||||
info: '#2196F3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FB8C00',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies config as config
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
import 'iconify-icon'
|
||||
import type { IconAliases, IconSet } from 'vuetify'
|
||||
|
||||
const aliases = <IconAliases>{
|
||||
/* custom ones */
|
||||
email: 'mdi:email',
|
||||
/* vuetify aliases */
|
||||
collapse: 'mdi:chevron-up',
|
||||
complete: 'mdi:check',
|
||||
cancel: 'mdi:close-circle',
|
||||
close: 'mdi:close',
|
||||
delete: 'mdi:close-circle',
|
||||
// delete (e.g. v-chip close)
|
||||
clear: 'mdi:close-circle',
|
||||
success: 'mdi:check-circle',
|
||||
info: 'mdi:information',
|
||||
warning: 'mdi:alert-circle',
|
||||
error: 'mdi:close-circle',
|
||||
prev: 'mdi:chevron-left',
|
||||
next: 'mdi:chevron-right',
|
||||
checkboxOn: 'mdi:checkbox-marked',
|
||||
checkboxOff: 'mdi:checkbox-blank-outline',
|
||||
checkboxIndeterminate: 'mdi:minus-box',
|
||||
delimiter: 'mdi:circle',
|
||||
// for carousel
|
||||
sortAsc: 'mdi:arrow-up',
|
||||
sortDesc: 'mdi:arrow-down',
|
||||
expand: 'mdi:chevron-down',
|
||||
menu: 'mdi:menu',
|
||||
subgroup: 'mdi:menu-down',
|
||||
dropdown: 'mdi:menu-down',
|
||||
radioOn: 'mdi:radiobox-marked',
|
||||
radioOff: 'mdi:radiobox-blank',
|
||||
edit: 'mdi:pencil',
|
||||
ratingEmpty: 'mdi:star-outline',
|
||||
ratingFull: 'mdi:star',
|
||||
ratingHalf: 'mdi:star-half-full',
|
||||
loading: 'mdi:cached',
|
||||
first: 'mdi:page-first',
|
||||
last: 'mdi:page-last',
|
||||
unfold: 'mdi:unfold-more-horizontal',
|
||||
file: 'mdi:paperclip',
|
||||
plus: 'mdi:plus',
|
||||
minus: 'mdi:minus',
|
||||
calendar: 'mdi:calendar',
|
||||
$checkboxOn: 'mdi:checkbox-marked',
|
||||
$checkboxOff: 'mdi:checkbox-blank-outline',
|
||||
}
|
||||
|
||||
const iconify = <IconSet>{
|
||||
component: (props: any) => {
|
||||
console.log(props)
|
||||
|
||||
const { icon, tag, ...rest } = props
|
||||
const strIcon = icon as string
|
||||
|
||||
return h(tag, rest, [
|
||||
h('iconify-icon', {
|
||||
key: strIcon,
|
||||
icon: aliases[strIcon] ?? icon,
|
||||
...rest,
|
||||
}),
|
||||
])
|
||||
},
|
||||
}
|
||||
|
||||
export { aliases, iconify }
|
||||
|
|
@ -72,19 +72,19 @@ export default defineNuxtConfig({
|
|||
importComposables: true,
|
||||
prefixComposables: true,
|
||||
styles: {
|
||||
configFile: './assets/styles/vuetify.scss',
|
||||
configFile: config.theme.file,
|
||||
},
|
||||
includeTransformAssetsUrls: true,
|
||||
ssrClientHints: {
|
||||
reloadOnFirstRequest: false,
|
||||
viewportSize: true,
|
||||
prefersColorScheme: true,
|
||||
// prefersColorSchemeOptions: {
|
||||
// cookieName: 'color-scheme',
|
||||
// lightThemeName: 'light',
|
||||
// darkThemeName: 'dark',
|
||||
// useBrowserThemeOnly: false,
|
||||
// },
|
||||
prefersColorSchemeOptions: {
|
||||
cookieName: config.theme.cookie,
|
||||
lightThemeName: config.theme.light,
|
||||
darkThemeName: config.theme.dark,
|
||||
useBrowserThemeOnly: true,
|
||||
},
|
||||
prefersReducedMotion: false,
|
||||
},
|
||||
},
|
||||
|
|
@ -96,7 +96,24 @@ export default defineNuxtConfig({
|
|||
components: false,
|
||||
labComponents: true,
|
||||
directives: false,
|
||||
icons: false,
|
||||
date: {
|
||||
adapter: 'vuetify',
|
||||
},
|
||||
theme: {
|
||||
defaultTheme: config.theme.default,
|
||||
themes: config.theme.themes,
|
||||
},
|
||||
icons: {
|
||||
defaultSet: 'custom',
|
||||
},
|
||||
defaults: {
|
||||
VApp: {
|
||||
class: 'ender-app',
|
||||
},
|
||||
VBtn: {
|
||||
class: 'text-none',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
googleFonts: {
|
||||
|
|
@ -175,4 +192,9 @@ export default defineNuxtConfig({
|
|||
typescript: {
|
||||
typeCheck: true,
|
||||
},
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag === 'iconify-icon',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,47 +3,74 @@ const socials = [
|
|||
{
|
||||
name: 'YouTube',
|
||||
url: 'https://go.enderman.ch/youtube',
|
||||
icon: 'youtube-icon',
|
||||
icon: {
|
||||
name: 'logos:youtube-icon',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Andrew',
|
||||
url: 'https://go.enderman.ch/andrew',
|
||||
icon: 'youtube-icon',
|
||||
icon: {
|
||||
name: 'logos:youtube-icon',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Twitch',
|
||||
url: 'https://go.enderman.ch/twitch',
|
||||
icon: 'twitch',
|
||||
icon: {
|
||||
name: 'fa:twitch',
|
||||
color: '#B68CFF',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'TikTok',
|
||||
url: 'https://go.enderman.ch/tiktok',
|
||||
icon: 'tiktok-icon',
|
||||
icon: {
|
||||
name: 'logos:tiktok-icon',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Twitter',
|
||||
url: 'https://go.enderman.ch/twitter',
|
||||
icon: 'twitter',
|
||||
icon: {
|
||||
name: 'logos:twitter',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Telegram',
|
||||
url: 'https://go.enderman.ch/telegram',
|
||||
icon: 'telegram',
|
||||
icon: {
|
||||
name: 'logos:telegram',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Discord',
|
||||
url: 'https://go.enderman.ch/discord',
|
||||
icon: 'discord-icon',
|
||||
icon: {
|
||||
name: 'logos:discord-icon',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'GitHub',
|
||||
url: 'https://go.enderman.ch/github',
|
||||
icon: 'github-icon',
|
||||
icon: {
|
||||
name: 'fa:github',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Steam',
|
||||
url: 'https://go.enderman.ch/steam',
|
||||
icon: 'steam',
|
||||
icon: {
|
||||
name: 'fa:steam',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -100,17 +127,10 @@ useHead({
|
|||
<h5 class="alex">Social media</h5>
|
||||
<ul class="list-style-type-none p-0">
|
||||
<li v-for="(page, index) in socials" :key="index">
|
||||
<div class="d-flex flex-row align-items-center gap-1">
|
||||
<XIcon :name="`logos:${page.icon}`" inline />
|
||||
<a
|
||||
class="link-hi"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
:href="page.url"
|
||||
>
|
||||
{{ page.name }}
|
||||
</a>
|
||||
</div>
|
||||
<a class="link-hi" target="_blank" rel="noopener" :href="page.url">
|
||||
<Icon :name="page.icon.name" :color="page.icon.color" inline />
|
||||
<span class="mx-2">{{ page.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import { aliases, iconify } from '~/iconify'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
|
||||
vuetifyOptions.icons = {
|
||||
defaultSet: 'iconify',
|
||||
aliases,
|
||||
sets: { iconify },
|
||||
}
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue