enderman.ch
/
index
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move over to iconify-icon, wrap around

This commit is contained in:
Andrew Illarionov 2024-01-27 23:29:31 +03:00
parent 1f7c8f0ed4
commit 014e64d174
9 changed files with 115 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintcache
View File

@ -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\\ui\\Dialog.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.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":761,"mtime":1706186305129,"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":1519,"mtime":1706031675155,"hashOfConfig":"17"},{"size":16911,"mtime":1706027251875,"hashOfConfig":"17"},"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"},{"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"]

0
assets/styles/vuetify.scss Normal file
View File

60
components/blocks/Options.vue
View File

@ -1,14 +1,14 @@
<script setup lang="ts">
import Dialog from '~/components/ui/Dialog.vue'
import cogIcon from '~/assets/images/icons/cog.png'
import pearlIcon from '~/assets/images/icons/pearl.gif'
function optionsMenu() {}
const active = ref(false)
</script>
<template>
<div class="options-layout pass-through">
<div class="options clickable" @click="optionsMenu()">
<VDialog>
<template #activator="{ props }">
<div v-bind="props" class="options clickable">
<img
class="logo user-select-none"
draggable="false"
@ -16,25 +16,59 @@ function optionsMenu() {}
alt="Options"
/>
</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>
</div>
</div>
</div>
</VCardText>
Report a bug
<VCardActions>
<VSpacer></VSpacer>
<VBtn text="Close Dialog" @click="isActive.value = false"></VBtn>
</VCardActions>
</VCard>
</template>
</VDialog>
</template>
<style scoped lang="scss">
.options {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
&-layout {
position: fixed;
top: 0;
right: 0;
}
padding: 10px;
}
.logo {

76
components/ui/Dialog.vue
View File

@ -1,76 +0,0 @@
<script setup>
const props = defineProps({
icon: {
type: String,
default: '',
},
alt: {
type: String,
default: 'Icon',
},
})
const theme = ref(false)
const animation = ref(true)
</script>
<template>
<p>FALSE</p>
<!-- <QDialog ref="dialogRef" @hide="onDialogHide">-->
<!-- <QCard class="dialog">-->
<!-- <div class="overlay background"></div>-->
<!-- <div class="overlay content">-->
<!-- <img-->
<!-- class="icon-badge user-select-none"-->
<!-- draggable="false"-->
<!-- :src="props.icon"-->
<!-- :alt="props.alt"-->
<!-- />-->
<!-- <QCardSection>-->
<!-- <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>-->
<!-- <QToggle-->
<!-- v-model="theme"-->
<!-- class="px-5"-->
<!-- color="black"-->
<!-- dense-->
<!-- size="xl"-->
<!-- :unchecked-icon="mdiWhiteBalanceSunny"-->
<!-- :checked-icon="mdiWeatherNight"-->
<!-- icon-color="primary"-->
<!-- @change="theme = !theme"-->
<!-- />-->
<!-- <QCheckbox v-model="theme" />-->
<!-- </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>-->
<!-- <QToggle-->
<!-- v-model="animation"-->
<!-- color="purple"-->
<!-- dense-->
<!-- size="xl"-->
<!-- :unchecked-icon="mdiStop"-->
<!-- :checked-icon="mdiPlay"-->
<!-- @change="theme = !theme"-->
<!-- />-->
<!-- </div>-->
<!-- </div>-->
<!-- Report a bug-->
<!-- <QCardActions>-->
<!-- <QBtn label="OK" @click="onDialogOK" />-->
<!-- </QCardActions>-->
<!-- </QCardSection>-->
<!-- </div>-->
<!-- </QCard>-->
<!-- </QDialog>-->
</template>

44
components/ui/XIcon.vue
View File

@ -1,20 +1,52 @@
<script setup lang="ts">
import 'iconify-icon'
import type { IconifyRenderMode } from 'iconify-icon'
import type { PropType } from 'vue'
const props = defineProps({
name: {
type: String,
required: true,
},
size: {
type: String,
default: 'md',
mode: {
type: String as PropType<IconifyRenderMode>,
default: 'svg',
},
color: {
inline: {
type: Boolean,
default: false,
},
width: {
type: String,
default: 'currentColor',
default: '1em',
},
height: {
type: String,
default: '1em',
},
flip: {
type: String,
default: '',
},
rotate: {
type: [String, Number],
default: '',
},
})
const icon = props.name?.split(':')?.[0] === 'local' ?
</script>
<template></template>
<template>
<iconify-icon
:icon="props.name"
:mode="props.mode"
:inline="props.inline"
:width="props.width"
:height="props.height"
:flip="props.flip"
:rotate="props.rotate"
/>
</template>
<style scoped lang="scss"></style>

5
nuxt.config.ts
View File

@ -53,7 +53,6 @@ export default defineNuxtConfig({
'@nuxt/content',
'vuetify-nuxt-module',
'@nuxtjs/google-fonts',
'nuxt-icon',
'nuxt-site-config',
'nuxt-simple-sitemap',
'nuxt-simple-robots',
@ -72,7 +71,9 @@ export default defineNuxtConfig({
moduleOptions: {
importComposables: true,
prefixComposables: true,
styles: 'none',
styles: {
configFile: './assets/styles/vuetify.scss',
},
includeTransformAssetsUrls: true,
ssrClientHints: {
reloadOnFirstRequest: false,

18
package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "index",
"name": "enderapp",
"version": "0.1.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "index",
"name": "enderapp",
"version": "0.1.3",
"hasInstallScript": true,
"dependencies": {
@ -30,8 +30,8 @@
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-prettier": "^5.1.3",
"iconify-icon": "^1.0.8",
"nuxt": "^3.9.3",
"nuxt-icon": "^0.6.8",
"nuxt-link-checker": "^3.0.0-rc.6",
"nuxt-og-image": "^3.0.0-rc.29",
"nuxt-simple-robots": "^4.0.0-rc.13",
@ -10929,6 +10929,18 @@
"node": ">=14.18.0"
}
},
"node_modules/iconify-icon": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-1.0.8.tgz",
"integrity": "sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==",
"dev": true,
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
}
},
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",

2
package.json
View File

@ -32,8 +32,8 @@
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-prettier": "^5.1.3",
"iconify-icon": "^1.0.8",
"nuxt": "^3.9.3",
"nuxt-icon": "^0.6.8",
"nuxt-link-checker": "^3.0.0-rc.6",
"nuxt-og-image": "^3.0.0-rc.29",
"nuxt-simple-robots": "^4.0.0-rc.13",

2
pages/social.vue
View File

@ -101,7 +101,7 @@ useHead({
<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">
<Icon :name="`logos:${page.icon}`" />
<XIcon :name="`logos:${page.icon}`" inline />
<a
class="link-hi"
target="_blank"