SevenOfAces/personal-site
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fixed background

Browse source
This commit is contained in:
Mrrp 2024-12-22 13:21:05 -08:00
parent 5f9eb1fc50
commit a3256225e4
8 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.vue
View file

@ -12,6 +12,7 @@ import './assets/style.css'
name: 'page',
mode: 'out-in'
}" />
<div></div>
<background-calm />
</template>

39
assets/markdown_conf.ts
View file

@ -1,5 +1,6 @@
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import hljs from "highlight.js";
import MarkdownIt from "markdown-it";
import Token from "markdown-it/lib/token.mjs";
export default function configured_markdown(): MarkdownIt {
const md: MarkdownIt = MarkdownIt({
@ -10,26 +11,34 @@ export default function configured_markdown(): MarkdownIt {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre><code class="hljs">' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) { }
hljs.highlight(str, {
language: lang,
ignoreIllegals: true,
}).value +
"</code></pre>";
} catch (__) {}
}
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
}
})
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) +
"</code></pre>";
},
});
md.renderer.rules.hr = function (tokens, idx, options, env, self) {
return '<div class="rounded-full h-0.5 bg-purple-500 my-3"></div>'
}
md.renderer.rules.h6 = function (tokens, idx, options, env, self) {
return '<h6 class="text-lg font-semibold my-3"><br>' +
tokens[idx].content + "</h6>";
};
md.renderer.rules.softbreak = function (tokens, idx, options, env, self) {
return '<br>'
}
return "<br>";
};
md.renderer.rules.hardbreak = function (tokens, idx, options, env, self) {
return '<br><br>'
return "<br><br>";
};
md.renderer.rules.text = function (tokens, idx, options, env, self) {
return tokens[idx].content;
}
return md;

16
assets/style.css
View file

@ -15,6 +15,7 @@ h1 {
}
h2 {
font-family: 'Lobster', cursive, 'Courier New', Courier, monospace;
@apply text-2xl font-bold;
}
@ -35,7 +36,7 @@ h6 {
}
a {
@apply transition text-purple-400 hover:text-purple-500;
@apply transition text-purple-400 hover:text-purple-600;
}
@ -82,6 +83,19 @@ code {
@apply p-1 border-purple-800 border rounded-lg;
}
/* Markdown improvements to headers when a descendent of class="md-contents" */
/* h1 to h2; Add a border to the bottom of the header */
.md-contents h1:not(.md-override) {
@apply border-b-4 border-purple-600 mb-3;
}
.md-contents h2:not(.md-override) {
@apply border-b border-purple-600 mb-3;
}
.md-contents div:not(.md-override) {
@apply mb-3 mt-3;
}
/* Code theme */
.hljs {

10
components/BackgroundCalm.vue
View file

@ -7,17 +7,18 @@ const onLoad = (container: Container) => {
</script>
<template>
<div>
<NuxtParticles
class="fixed w-full h-full"
class="w-full h-full z-0"
id="tsparticles"
@load="onLoad"
:particlesInit="particlesInit"
:options="{
fullScreen: {
enable: true,
zIndex: -1
zIndex: -10
},
fpsLimit: 60,
fpsLimit: 40,
interactivity: {
detect_on: 'window',
events: {
@ -34,7 +35,7 @@ const onLoad = (container: Container) => {
}
},
particles: {
zIndex: -10,
zIndex: 0,
color: {
value: '#A020F0'
},
@ -74,4 +75,5 @@ const onLoad = (container: Container) => {
>
</NuxtParticles>
<slot></slot>
</div>
</template>

2
components/Markdown.vue
View file

@ -31,5 +31,5 @@ watch(() => props.text, (newVal) => {
<div v-if="loading" class="text-center animate-pulse">
<h2>Loading...</h2>
</div>
<div v-html="text"></div>
<div class="md-contents" v-html="text"></div>
</template>

2
pages/blog.vue
View file

@ -162,7 +162,7 @@ watch(url, async () => {
</div>
<div
class="text-pretty min-w-96 text-left max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
<div v-html="text"></div>
<div class="md-contents" v-html="text"></div>
</div>
</div>
</Transition>

6
pages/index.vue
View file

@ -17,15 +17,15 @@ fetch("/about_me.md")
</script>
<template>
<div class="relative z-50 flex w-full justify-center text-white">
<div class="relative flex w-full justify-center text-white">
<div class="mt-8 flex-col text-center">
<div class="flex justify-center">
<div class="p-2 shadow-md rounded-full bg-pink-500">
<img class="z-20 transition-all w-40 h-40 md:w-56 md:h-56 rounded-full"
<img class="transition-all w-40 h-40 md:w-56 md:h-56 rounded-full"
src="https://avatars.githubusercontent.com/u/94077364?v=4" alt="User PFP" />
</div>
</div>
<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-70 bg-purple-950">
<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
<Markdown :text="aboutMe"></Markdown>
</div>
</div>

9
public/about_me.md
View file

@ -1,12 +1,8 @@
# Helau! :3
<h1 class="md-override">Helau! :3</h1>
## 🌙 Luna - She/Her
<a href="mailto: thelunacy@proton.me">`thelunacy@proton.me`</a>
###### This is a specific email for contact.
<br>
[`thelunacy@proton.me`](mailto:thelunacy@proton.me)
###### 🏳️‍⚧️ I am exploring identity, so this may change or I might go by different things elsewhere.
@ -15,6 +11,7 @@
<div style="color: pink">
*Queer rights are human rights.*
</div>
---