Upgrade to Nuxt 3.12, simplify logic
This commit is contained in:
parent
753bdb5c0a
commit
9339416c1b
|
|
@ -1 +1 @@
|
|||
[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1147,"mtime":1708248797872,"hashOfConfig":"24"},{"size":979,"mtime":1706003786966,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"24"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"24"},{"size":983,"mtime":1708206997656,"hashOfConfig":"24"},{"size":1912,"mtime":1708290866348,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"24"},{"size":1645,"mtime":1708450985689,"hashOfConfig":"24"},"5tgxr3","1nljphs","1lk8nat"]
|
||||
[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1005,"mtime":1718446378238,"hashOfConfig":"24"},{"size":961,"mtime":1718445804903,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"26"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"26"},{"size":983,"mtime":1708206997656,"hashOfConfig":"26"},{"size":1895,"mtime":1718444102273,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"26"},{"size":1673,"mtime":1718386852848,"hashOfConfig":"24"},"5tgxr3","lsooul","1lk8nat","1nljphs"]
|
||||
8
app.vue
8
app.vue
|
|
@ -27,8 +27,8 @@ useHead({
|
|||
>
|
||||
<div
|
||||
id="ender-layout"
|
||||
class="p-animated d-flex flex-column align-items-center h-100"
|
||||
:class="{ 'pt-sm-5': !reader }"
|
||||
class="p-animated flex flex-col items-center h-full"
|
||||
:class="{ 'sm:pt-8': !reader }"
|
||||
>
|
||||
<AClientOnly appear mode="out-in">
|
||||
<SwipeControls v-if="vdisp.xs" />
|
||||
|
|
@ -57,12 +57,12 @@ useHead({
|
|||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||||
leave="animate__animated animate__fadeOutDown"
|
||||
>
|
||||
<Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-2 px-2" />
|
||||
<Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-4 px-2" />
|
||||
</AClientOnly>
|
||||
|
||||
<ClientOnly>
|
||||
<template #fallback> </template>
|
||||
<Portal layout="#ender-layout" animate randomize fade />
|
||||
<LazyPortal layout="#ender-layout" animate randomize fade />
|
||||
</ClientOnly>
|
||||
</VThemeProvider>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@layer base, vuetify, overrides
|
||||
|
|
@ -1,14 +1,3 @@
|
|||
// Libraries.
|
||||
@use 'bootstrap' with (
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 601px,
|
||||
md: 961px,
|
||||
lg: 1281px,
|
||||
xl: 1921px,
|
||||
xxl: 2561px
|
||||
)
|
||||
);
|
||||
@use 'animate.css';
|
||||
|
||||
// Modules.
|
||||
|
|
@ -20,15 +9,12 @@
|
|||
--animate-duration: 1s;
|
||||
--animate-delay: 0.75s;
|
||||
--animate-repeat: 1;
|
||||
--bs-font-sans-serif: 'Lato', 'Times New Roman';
|
||||
--bs-font-monospace: 'JetBrains Mono', 'Courier New';
|
||||
--bs-body-font-size: 20px;
|
||||
--bs-body-line-height: 1.5;
|
||||
}
|
||||
|
||||
// The HTML page.
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// The body element.
|
||||
|
|
@ -54,6 +40,49 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
// Entry point (Vue mount).
|
||||
#ender-app {
|
||||
flex: 1 1 0;
|
||||
|
|
@ -61,10 +90,6 @@ body {
|
|||
}
|
||||
|
||||
// Helper classes that don't exist in Bootstrap.
|
||||
.mh-0 {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -143,7 +168,7 @@ body {
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
.separator {
|
||||
.accent {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -183,41 +208,23 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
%link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
%transition {
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.link {
|
||||
@extend %link;
|
||||
|
||||
&:hover {
|
||||
color: cornflowerblue;
|
||||
}
|
||||
|
||||
&-hi {
|
||||
@extend %link;
|
||||
&-hi-force-dark {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
|
||||
&-force-dark {
|
||||
@extend %link;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radial-gradient {
|
||||
.accent-gradient {
|
||||
background: radial-gradient(
|
||||
circle at left,
|
||||
rgb(255 255 255 / 80%),
|
||||
|
|
@ -272,25 +279,19 @@ body {
|
|||
background-color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
|
||||
.link {
|
||||
a {
|
||||
color: royalblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
|
||||
&-hi {
|
||||
color: royalblue;
|
||||
|
||||
&:hover {
|
||||
color: darkblue;
|
||||
}
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
.accent {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.radial-gradient {
|
||||
.accent-gradient {
|
||||
background: radial-gradient(
|
||||
circle at left,
|
||||
rgb(0 0 0 / 95%),
|
||||
|
|
@ -422,7 +423,7 @@ body {
|
|||
|
||||
:is(p, li) {
|
||||
a {
|
||||
@extend %link;
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
|
|
@ -452,7 +453,7 @@ body {
|
|||
font-weight: 700;
|
||||
|
||||
a {
|
||||
@extend %link;
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
&:hover {
|
||||
color: indianred;
|
||||
|
|
@ -549,7 +550,11 @@ body {
|
|||
}
|
||||
|
||||
// Dynamic classes.
|
||||
@include bootstrap.media-breakpoint-up(sm) {
|
||||
@screen sm {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#ender-app {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -586,7 +591,12 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@include bootstrap.media-breakpoint-up(md) {
|
||||
@screen md {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
.post {
|
||||
&-box {
|
||||
padding-bottom: 0.6942rem;
|
||||
|
|
@ -623,19 +633,23 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@include bootstrap.media-breakpoint-up(lg) {
|
||||
@screen lg {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dimensions {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@include bootstrap.media-breakpoint-up(xl) {
|
||||
@screen xl {
|
||||
.dimensions {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@include bootstrap.media-breakpoint-up(xxl) {
|
||||
@screen 2xl {
|
||||
.dimensions {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use 'vuetify/settings' with (
|
||||
@forward 'vuetify/settings' with (
|
||||
$utilities: false,
|
||||
$color-pack: false,
|
||||
|
||||
$button-banner-actions-padding: 0 69px,
|
||||
$reset: false,
|
||||
$layers: true,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@ onMounted(() => setTimeout(type, 1500))
|
|||
<template>
|
||||
<section>
|
||||
<h3 class="alex">Page not found!</h3>
|
||||
<pre class="pre-wrap">{{ buffer }}<span class="blinker">▊</span></pre>
|
||||
<pre
|
||||
class="whitespace-pre-wrap break-keep">{{ buffer }}<span class="blinker">▊</span></pre>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,36 +28,33 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-row justify-content-sm-center">
|
||||
<NuxtLink
|
||||
class="no-decoration logo d-flex flex-row align-items-center user-select-none"
|
||||
to="/"
|
||||
>
|
||||
<img
|
||||
class="logo-image"
|
||||
draggable="false"
|
||||
:width="props.width"
|
||||
:height="props.height"
|
||||
:src="props.src"
|
||||
:alt="props.alt"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="alex mb-0">{{ props.title }}</h1>
|
||||
<Separator class="m-0" />
|
||||
<p class="mb-0">{{ props.description }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<NuxtLink
|
||||
class="flex flex-row items-center text-inherit hover:text-inherit select-none sm:m-auto lg:m-0"
|
||||
to="/"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
:width="props.width"
|
||||
:height="props.height"
|
||||
:src="props.src"
|
||||
:alt="props.alt"
|
||||
/>
|
||||
<div>
|
||||
<h2>{{ props.title }}</h2>
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<p>{{ props.description }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logo {
|
||||
> img.logo-image {
|
||||
a {
|
||||
> img {
|
||||
transition: ease 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> img.logo-image {
|
||||
> img {
|
||||
transform: scale(105%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
|
|||
|
||||
<template>
|
||||
<nav
|
||||
class="d-flex flex-row flex-wrap flex-sm-column flex-lg-row justify-content-around justify-content-sm-start justify-content-lg-between gap-2 gap-lg-3"
|
||||
class="flex flex-row flex-wrap sm:flex-col lg:flex-row justify-around sm:justify-start lg:justify-between gap-2 lg:gap-3"
|
||||
>
|
||||
<Logo
|
||||
:src="logo"
|
||||
|
|
@ -21,7 +21,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
|
|||
description="official website"
|
||||
/>
|
||||
<ul
|
||||
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"
|
||||
class="flex flex-row flex-wrap items-center sm:items-start lg:items-center justify-center gap-3 m-2 sm:m-0 lg:mx-2 sm:my-2 lg:my-0"
|
||||
>
|
||||
<li v-for="(page, index) in links" :key="index" class="nav-item">
|
||||
<Route
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ const props = defineProps({
|
|||
|
||||
<template>
|
||||
<NuxtLink
|
||||
class="link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
|
||||
active-class="icon-active px-sm-3"
|
||||
class="flex flex-row items-center gap-2 select-none no-decoration"
|
||||
active-class="icon-active sm:px-3"
|
||||
:to="!props.external ? props.path : undefined"
|
||||
:href="props.external ? props.path : undefined"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<hr
|
||||
class="separator radial-gradient border-0"
|
||||
:style="{ height: props.height + 'px' }"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -22,7 +22,7 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
let cardIcon = warningIcon
|
||||
let color = 'rgba(255 246 147 / 60%)'
|
||||
let color = 'rgb(255 246 147 / 60%)'
|
||||
|
||||
switch (props.icon) {
|
||||
case 'error':
|
||||
|
|
@ -44,13 +44,13 @@ switch (props.icon) {
|
|||
|
||||
case 'checkmark':
|
||||
cardIcon = checkIcon
|
||||
color = 'rgba(69 255 255 / 60%)'
|
||||
color = 'rgb(69 255 255 / 60%)'
|
||||
|
||||
break
|
||||
|
||||
case 'idea':
|
||||
cardIcon = ideaIcon
|
||||
color = 'rgba(255 255 255 / 60%)'
|
||||
color = 'rgb(255 255 255 / 60%)'
|
||||
|
||||
break
|
||||
|
||||
|
|
@ -61,9 +61,7 @@ switch (props.icon) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="tilt d-flex flex-row align-items-center gap-2 mb-0 mb-sm-2 mb-md-4"
|
||||
>
|
||||
<div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="cardIcon"
|
||||
|
|
@ -72,7 +70,7 @@ switch (props.icon) {
|
|||
/>
|
||||
<h3 class="mb-0 nobr">{{ props.title }}</h3>
|
||||
</div>
|
||||
<div class="box p-4 rounded-4 mb-4">
|
||||
<div class="box p-4 rounded-xl mb-4">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: The hidden features of the Windows OOBE
|
||||
description: The Windows 11 OOBE is a mess, but it's excellent for bulk deployment has some hidden features and customization options!
|
||||
description: The Windows 11 OOBE is a mess, but it's excellent for bulk deployment and has some hidden features and customization options!
|
||||
authors: ['Enderman']
|
||||
created: 2024-03-01T23:30:10Z
|
||||
updated: 2024-03-02T15:10:58Z
|
||||
|
|
|
|||
|
|
@ -41,17 +41,17 @@ const swipe = useSwipe(card, {
|
|||
<template>
|
||||
<main
|
||||
ref="card"
|
||||
class="dimensions background h-animated overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
|
||||
class="dimensions background h-animated overflow-auto flex flex-col gap-3 sm:gap-2 px-4 pt-4 pb-3"
|
||||
:class="{
|
||||
'rounded-1-sm': !reader,
|
||||
'mh-0 h-100': reader,
|
||||
'sm:rounded-xl': !reader,
|
||||
'!max-h-full h-full': reader,
|
||||
}"
|
||||
>
|
||||
<Options />
|
||||
<Navigation />
|
||||
<slot name="header" />
|
||||
<NuxtPage
|
||||
class="scrollbar fade-mask-sm flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
|
||||
class="scrollbar fade-mask-sm flex-grow overflow-x-hidden overflow-y-auto min-h-full sm:py-4 sm:pe-3"
|
||||
/>
|
||||
<slot name="footer" />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ export default defineNuxtConfig({
|
|||
pageTransition: { name: 'page', mode: 'out-in' },
|
||||
rootId: 'ender-app',
|
||||
},
|
||||
devtools: {
|
||||
enabled: true,
|
||||
},
|
||||
features: {
|
||||
inlineStyles: false,
|
||||
},
|
||||
|
|
@ -54,12 +57,9 @@ export default defineNuxtConfig({
|
|||
'@pinia/nuxt',
|
||||
'@nuxt/content',
|
||||
'vuetify-nuxt-module',
|
||||
'@nuxtjs/seo',
|
||||
'@nuxtjs/google-fonts',
|
||||
'nuxt-site-config',
|
||||
'nuxt-simple-sitemap',
|
||||
'nuxt-simple-robots',
|
||||
'nuxt-og-image',
|
||||
'nuxt-link-checker',
|
||||
'@nuxtjs/tailwindcss',
|
||||
],
|
||||
content: {
|
||||
markdown: {
|
||||
|
|
@ -224,6 +224,9 @@ export default defineNuxtConfig({
|
|||
blockNonSeoBots: true,
|
||||
credits: false,
|
||||
},
|
||||
tailwindcss: {
|
||||
exposeConfig: true,
|
||||
},
|
||||
typescript: {
|
||||
typeCheck: true,
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
44
package.json
44
package.json
|
|
@ -15,45 +15,43 @@
|
|||
"lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/content": "^2.11.0",
|
||||
"@nuxt/devtools": "^1.0.8",
|
||||
"@nuxt/content": "^2.12.1",
|
||||
"@nuxt/devtools": "^1.3.3",
|
||||
"@nuxt/types": "^2.17.3",
|
||||
"@nuxtjs/eslint-config-typescript": "^12.1.0",
|
||||
"@nuxtjs/eslint-module": "^4.1.0",
|
||||
"@nuxtjs/google-fonts": "^3.1.3",
|
||||
"@nuxtjs/google-fonts": "^3.2.0",
|
||||
"@nuxtjs/seo": "^2.0.0-rc.10",
|
||||
"@nuxtjs/stylelint-module": "^5.2.0",
|
||||
"@nuxtjs/tailwindcss": "^6.12.0",
|
||||
"@pinia/nuxt": "^0.5.1",
|
||||
"@typescript-eslint/parser": "^6.19.1",
|
||||
"@tailwindcss/typography": "^0.5.13",
|
||||
"@typescript-eslint/eslint-plugin": "^7.13.0",
|
||||
"@typescript-eslint/parser": "^7.13.0",
|
||||
"animate.css": "latest",
|
||||
"bootstrap": "^5.3.2",
|
||||
"caniuse-lite": "^1.0.30001580",
|
||||
"caniuse-lite": "^1.0.30001634",
|
||||
"eslint": "^8.56.0",
|
||||
"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.10.2",
|
||||
"nuxt-link-checker": "^3.0.0-rc.6",
|
||||
"nuxt-og-image": "^3.0.0-rc.29",
|
||||
"nuxt-simple-robots": "^4.0.0-rc.13",
|
||||
"nuxt-simple-sitemap": "^4.4.1",
|
||||
"nuxt-site-config": "^2.2.8",
|
||||
"nuxt": "^3.12.1",
|
||||
"pinia": "^2.1.7",
|
||||
"prettier": "^3.2.4",
|
||||
"sass": "^1.70.0",
|
||||
"stylelint": "^16.2.1",
|
||||
"prettier": "^3.3.2",
|
||||
"sass": "^1.77.5",
|
||||
"stylelint": "^16.6.1",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"typescript": "^5.3.3",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-tsc": "^1.8.27",
|
||||
"vuetify": "^3.5.1",
|
||||
"vuetify-nuxt-module": "^0.10.2"
|
||||
"stylelint-config-standard-scss": "^13.1.0",
|
||||
"typescript": "^5.4.5",
|
||||
"vue": "^3.4.28",
|
||||
"vue-router": "^4.3.3",
|
||||
"vue-tsc": "^1.8.22",
|
||||
"vuetify": "^3.6.9",
|
||||
"vuetify-nuxt-module": "^0.14.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@date-io/date-fns": "^3.0.0",
|
||||
"date-fns": "^3.3.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"remark-reading-time": "^2.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,15 +42,15 @@ useHead({
|
|||
|
||||
<template>
|
||||
<section>
|
||||
<h3 class="alex">About me</h3>
|
||||
<Separator />
|
||||
<h4>About me</h4>
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<p>
|
||||
<strong>🚧 This page is currently under construction.</strong> Expect a
|
||||
lot more content to be added as time passes.
|
||||
<em>Please report all bugs you encounter via the link in the footer</em>,
|
||||
I will make sure to sand them down.
|
||||
</p>
|
||||
<Separator />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<p>
|
||||
Nice to meet you! I'm Andrew, a {{ age }}-year-old guy from Kaluga,
|
||||
Russia. I have been developing software since I was 10, and I have always
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ useHead({
|
|||
<template>
|
||||
<article
|
||||
v-if="data"
|
||||
class="post scrollbar fade-mask-sm d-flex flex-column gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
|
||||
class="post scrollbar fade-mask-sm flex flex-col gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-3"
|
||||
>
|
||||
<div
|
||||
class="post-preamble"
|
||||
|
|
@ -135,14 +135,14 @@ useHead({
|
|||
>
|
||||
<div class="p-2">
|
||||
<h3 class="alex">{{ data.title }}</h3>
|
||||
<div class="d-flex flex-row row-gap-0 column-gap-2 flex-wrap">
|
||||
<div class="d-flex flex-row gap-1 align-items-center">
|
||||
<div class="flex flex-row gap-x-0 gap-y-2 flex-wrap">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<iconify-icon icon="mdi:calendar" />
|
||||
<strong class="nobr font-small">
|
||||
{{ formatDate(data.created, 'LLLL do, y – HH:mm') }}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="d-flex flex-row gap-1 align-items-center">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<iconify-icon icon="mdi:clock-outline" />
|
||||
<strong class="nobr font-small">
|
||||
{{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
|
||||
|
|
@ -162,7 +162,7 @@ useHead({
|
|||
</NuxtLink>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<Separator class="mt-0" />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<ContentRenderer :value="data" />
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ useHead({
|
|||
}"
|
||||
>
|
||||
<template #default="{ list }">
|
||||
<div class="d-grid gap-3">
|
||||
<div class="grid gap-3">
|
||||
<NuxtLink
|
||||
v-for="post in list"
|
||||
:key="post._path"
|
||||
|
|
@ -64,7 +64,7 @@ useHead({
|
|||
class="no-decoration"
|
||||
>
|
||||
<article
|
||||
class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
|
||||
class="post-box flex flex-col md:flex-row gap-3 rounded-xl h-full"
|
||||
>
|
||||
<div class="post-thumb">
|
||||
<img
|
||||
|
|
@ -74,14 +74,14 @@ useHead({
|
|||
`/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
|
||||
"
|
||||
:alt="post.title"
|
||||
class="rounded-4"
|
||||
class="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="w-full">
|
||||
<h3 class="post-title alex">{{ post.title }}</h3>
|
||||
<p class="post-description mb-0">{{ post.description }}</p>
|
||||
|
||||
<div class="post-tags d-flex flex-row flex-wrap gap-2 py-2">
|
||||
<div class="post-tags flex flex-row flex-wrap gap-2 py-2">
|
||||
<span
|
||||
v-for="(tag, index) in post.tags.slice(0, 3)"
|
||||
:key="index"
|
||||
|
|
@ -94,10 +94,10 @@ useHead({
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<Separator class="m-0" />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
|
||||
<div class="post-details py-2">
|
||||
<div class="d-flex flex-row gap-1 align-items-center">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<iconify-icon icon="mdi:calendar" />
|
||||
<small class="nobr">
|
||||
{{ formatDate(post.created, 'LLLL do, y – HH:mm') }}
|
||||
|
|
@ -105,7 +105,7 @@ useHead({
|
|||
</div>
|
||||
<div
|
||||
v-if="post.updated"
|
||||
class="d-flex flex-row gap-1 align-items-center"
|
||||
class="flex flex-row items-center gap-1"
|
||||
>
|
||||
<iconify-icon icon="mdi:pencil" />
|
||||
<small class="nobr">
|
||||
|
|
@ -115,9 +115,7 @@ useHead({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="post-pocket d-flex flex-row gap-1 align-items-center p-2"
|
||||
>
|
||||
<div class="post-pocket flex flex-row items-center gap-1 p-2">
|
||||
<iconify-icon icon="mdi:clock-outline" />
|
||||
<small class="nobr font-monospace font-small">
|
||||
{{ post.readingTime.text }}
|
||||
|
|
@ -129,9 +127,7 @@ useHead({
|
|||
</template>
|
||||
|
||||
<template #not-found>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-center align-items-center gap-3"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center gap-3">
|
||||
<span>No posts found 🙁</span>
|
||||
<NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,19 +47,19 @@ defineRouteRules({
|
|||
|
||||
<template>
|
||||
<section>
|
||||
<h3 class="alex">Welcome 👋</h3>
|
||||
<p>
|
||||
<h3>Welcome 👋</h3>
|
||||
<p class="mb-4">
|
||||
I'm <strong>Enderman</strong> – a software engineer, a malware
|
||||
enthusiast and most importantly, a weird tall creature. I have over 300K
|
||||
subscribers on
|
||||
<a class="link-hi" :href="`${config.shortener}/youtube`">YouTube</a> and
|
||||
over 20K followers on
|
||||
<a class="link-hi" :href="`${config.shortener}/twitter`">Twitter</a>.
|
||||
Sometimes I wish there were 48 hours in a day.
|
||||
subscribers on <a :href="`${config.shortener}/youtube`">YouTube</a> and
|
||||
over 25K followers on
|
||||
<a class="text-inherit no-underline" :href="`${config.shortener}/twitter`"
|
||||
>Twitter</a
|
||||
>. Sometimes I wish there were 48 hours in a day.
|
||||
</p>
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-md-8">
|
||||
<h5 class="alex">What I do</h5>
|
||||
<div class="flex flex-col md:flex-row gap-3 mb-4">
|
||||
<div class="md:basis-0 md:flex-grow-[2]">
|
||||
<h6>What I do</h6>
|
||||
<ul class="list-style-type-do">
|
||||
<li>
|
||||
I develop cross-platform software. My language of choice is usually
|
||||
|
|
@ -85,8 +85,8 @@ defineRouteRules({
|
|||
<li>I make videos for you to enjoy!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<h5 class="alex">What I enjoy</h5>
|
||||
<div class="md:basis-0 md:flex-grow-[1]">
|
||||
<h6>What I enjoy</h6>
|
||||
<ul class="list-style-type-enjoy">
|
||||
<li>Teaching</li>
|
||||
<li>Mathematics</li>
|
||||
|
|
|
|||
|
|
@ -69,14 +69,14 @@ useHead({
|
|||
<template>
|
||||
<section>
|
||||
<h3 class="alex">Projects</h3>
|
||||
<Separator />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<p>
|
||||
<strong>🚧 This page is currently under construction.</strong> Expect a
|
||||
lot more content to be added as time passes.
|
||||
<em>Please report all bugs you encounter via the link in the footer</em>,
|
||||
I will make sure to sand them down.
|
||||
</p>
|
||||
<Separator />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<p><strong>My current projects are:</strong></p>
|
||||
<ul>
|
||||
<li v-for="(item, index) in projects" :key="index">
|
||||
|
|
|
|||
|
|
@ -117,14 +117,14 @@ useHead({
|
|||
<template>
|
||||
<section>
|
||||
<h3 class="alex">Online presence</h3>
|
||||
<Separator />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<p>
|
||||
<strong>🚧 This page is currently under construction.</strong> Expect a
|
||||
lot more content to be added as time passes.
|
||||
<em>Please report all bugs you encounter via the link in the footer</em>,
|
||||
I will make sure to sand them down.
|
||||
</p>
|
||||
<Separator />
|
||||
<hr class="accent accent-gradient border-0 h-px" />
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-3">
|
||||
<h5 class="alex">Social media</h5>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import type { Config } from 'tailwindcss'
|
||||
|
||||
export default <Partial<Config>>{
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
xl: '1920px',
|
||||
'2xl': '2560px',
|
||||
|
||||
desktop: '960px',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Lato',
|
||||
'ui-sans-serif',
|
||||
'system-ui',
|
||||
'sans-serif',
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol',
|
||||
'Noto Color Emoji',
|
||||
],
|
||||
serif: [
|
||||
'Alexandria',
|
||||
'ui-serif',
|
||||
'Georgia',
|
||||
'Times New Roman',
|
||||
'serif',
|
||||
],
|
||||
mono: [
|
||||
'JetBrains Mono',
|
||||
'Consolas',
|
||||
'Courier New',
|
||||
'ui-monospace',
|
||||
'monospace',
|
||||
],
|
||||
alex: ['Alexandria', 'serif'],
|
||||
lato: ['Lato', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
// ...
|
||||
],
|
||||
}
|
||||
Loading…
Reference in New Issue