Skip to content

Commit

Permalink
feat: 1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@GabsEdits
GabsEdits committed Apr 11, 2024
1 parent b1052c3 commit 0856cdd
Show file tree
Hide file tree
Showing 17 changed files with 867 additions and 433 deletions.
163 changes: 90 additions & 73 deletions components/404View.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,99 +4,116 @@
<span class="glitch" data-text="404">404</span>
<h1>Not Found!</h1>
<p>
Hmm, Sorry... The page you are looking for could not be found, maybe
something went wrong?
Oops! We couldn't find the page you're looking for. It seems like
something went wrong. It might not be our fault. If you believe it is,
please let us know by filing an issue.
</p>
</section>
<p class="dialog-buttons">
<a onclick="window.history.go(-1)">← Go Back</a>
<a id="file-an-issue" v-bind:href="theme.nav.git + '/issues/new'"
>File an issue</a
>
</p>
</main>
</template>

<script setup lang="ts">
import { useData } from "vitepress";
const { theme } = useData();
</script>

<style lang="scss">
#NotFound {
background-color: var(--color-background-second);
border-radius: 10px;
padding: 30px 20px;
box-shadow: var(--base-shadow);
margin-bottom: 20px;
color: var(--color-text-secondary);
width: 100%;
text-align: center;
background-color: transparent !important;
box-shadow: none !important;
border-radius: 10px;
padding: 30px 20px;
margin-bottom: 20px;
color: var(--color-text-secondary);
width: 100%;
text-align: center;
h1 {
font-size: 2em;
margin-top: 0 !important;
font-weight: 800;
margin-bottom: 0 !important;
}
h1 {
font-size: 2em;
margin-top: 0 !important;
color: var(--color-accent);
font-weight: 800;
margin-bottom: 0 !important;
}
span {
font-size: 7em;
font-weight: 800;
letter-spacing: -12.2px;
line-height: -2px;
color: var(--color-text);
position: relative;
display: inline-block;
animation: notfoundblink .8s infinite alternate;
span {
font-size: 7em;
font-weight: 800;
letter-spacing: -12.2px;
line-height: -2px;
color: var(--color-text);
position: relative;
display: inline-block;
animation: notfoundblink 0.8s infinite alternate;
@keyframes notfoundblink {
from {
opacity: 1;
}
@keyframes notfoundblink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
to {
opacity: 0;
}
}
&::before,
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
&::before,
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&::before {
left: 2px;
text-shadow: -3px 0 var(--color-accent), 0 3px var(--color-accent), 3px 0 var(--color-accent), 0 -3px var(--color-accent);
opacity: 0.8;
animation: glitch 1s infinite linear alternate-reverse;
}
&::before {
left: 2px;
text-shadow: -3px 0 var(--color-accent), 0 3px var(--color-accent),
3px 0 var(--color-accent), 0 -3px var(--color-accent);
opacity: 0.8;
animation: glitch 1s infinite linear alternate-reverse;
}
&::after {
left: -2px;
text-shadow: 3px 0 var(--color-background-mute), 0 -3px var(--color-background-mute), -3px 0 var(--color-background-mute), 0 3px var(--color-background-mute);
opacity: 0.8;
animation: glitch 1.5s infinite linear alternate-reverse;
}
}
&::after {
left: -2px;
text-shadow: 3px 0 var(--color-background-mute),
0 -3px var(--color-background-mute),
-3px 0 var(--color-background-mute),
0 3px var(--color-background-mute);
opacity: 0.8;
animation: glitch 1.5s infinite linear alternate-reverse;
}
}
}
@keyframes glitch {
0% {
transform: translate(0);
}
@keyframes glitch {
0% {
transform: translate(0);
}
25% {
transform: translate(4px, -4px);
}
25% {
transform: translate(4px, -4px);
}
50% {
transform: translate(-4px, 4px);
}
50% {
transform: translate(-4px, 4px);
}
75% {
transform: translate(4px, 0);
}
75% {
transform: translate(4px, 0);
}
100% {
transform: translate(0);
}
100% {
transform: translate(0);
}
}
}
</style>
60 changes: 43 additions & 17 deletions components/BlogFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,45 @@
If you have any questions or comments about this post, please feel free to
leave a comment below.
</p>

<noscript
><small
>Heads Up! You <i>need</i> JavaScript to view/write comments or to react
to the post. So you can't do anything unless you turn on
JavaScript.</small
></noscript
>
<div id="giscusContainer"></div>
<a href="/blog/">
<span>← Go back to the blog's home</span>
</a>
<br />
<hr />
<p class="dialog-buttons" v-if="frontmatter.prev || frontmatter.next">
<a
:href="`${frontmatter.prev.toLowerCase().replace(/\s+/g, '-')}.html`"
target="_self"
v-if="frontmatter.prev"
>
<span><small>← Previous</small></span>
<br /><span>{{ frontmatter.prev }}</span>
</a>
<a
:href="`${frontmatter.next.toLowerCase().replace(/\s+/g, '-')}.html`"
target="_self"
v-if="frontmatter.next"
>
<span><small>Next →</small></span>
<br /><span>{{ frontmatter.next }}</span>
</a>
</p>
</section>
</template>

<script setup lang="ts">
import { useData } from "vitepress";
import { onMounted } from "vue";
const { theme } = useData();
const { theme, frontmatter } = useData();
onMounted(() => {
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Load GitHub Comments script dynamically
const script = document.createElement("script");
script.src = "https://giscus.app/client.js";
Expand All @@ -35,12 +58,8 @@ onMounted(() => {
script.setAttribute("data-reactions-enabled", "1");
script.setAttribute("data-emit-metadata", "0");
script.setAttribute("data-input-position", "bottom");
// Apply different theme attributes based on color mode
script.setAttribute("data-theme", isDarkMode ? "transparent_dark" : "light");
script.setAttribute("data-theme", "preferred_color_scheme");
script.setAttribute("data-lang", "en");
script.setAttribute("data-loading", "lazy");
script.setAttribute("crossorigin", "anonymous");
// Append the script to the document
Expand All @@ -55,17 +74,25 @@ onMounted(() => {
a {
display: block;
padding: 20px;
border-radius: 10px;
color: var(--color-text-secondary);
width: 100%;
color: var(--color-accent);
margin: 0 0.2rem;
text-align: center;
text-decoration: none;
background-color: transparent;
transition: all 0.3s ease;
margin-top: 30px;
&:first-child {
border-radius: 10px;
text-align: left;
}
&:last-child {
border-radius: 10px;
text-align: right;
}
&:hover {
transform: translateY(-5px);
background-color: var(--color-background-second);
}
&:active {
Expand All @@ -74,7 +101,6 @@ onMounted(() => {
span {
font-size: 1em;
font-weight: 800;
margin-bottom: 0 !important;
}
}
Expand Down
81 changes: 50 additions & 31 deletions components/BlogHead.vue
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,62 @@
<template>
<div id="blog-head">
<h1>{{ frontmatter.title }}</h1>
<small>
{{ formatDate(frontmatter.date) }} &middot;
<span class="tags">
<span v-for="(tag, index) in frontmatter.tags" :key="index">#{{ tag }}</span>
</span>
</small>
<br>
<p>{{ frontmatter.description }}</p>
<hr />
</div>
<div id="blog-head">
<h1>{{ frontmatter.title }}</h1>
<small>
{{
// Blog Post Published Date
new Date(frontmatter.date).toLocaleDateString("en-GB", {
day: "2-digit",
month: "long",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
})
}}
&middot;
<span v-if="theme.blog.author">
Author:
{{ frontmatter.author }}
&middot;
</span>
<span class="tags">
<span v-for="(tag, index) in frontmatter.tags" :key="index"
>#{{ tag }}</span
>
</span>
</small>
<br />
<p>{{ frontmatter.description }}</p>
<hr />
</div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress';
const { frontmatter } = useData();
const formatDate = (dateString) => {
const options = { day: '2-digit', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' };
const date = new Date(dateString);
return date.toLocaleDateString('en-GB', options);
};
import { useData } from "vitepress";
const { frontmatter, theme } = useData();
</script>

<style lang="scss">
#blog-head {
.tags span {
margin-right: 5px;
color: var(--color-text-secondary);
background-color: var(--color-background-second);
padding: 0.15rem 0.45rem;
border-radius: 20px;
font-size: 12px;
}
.tags span {
margin-right: 5px;
color: var(--color-text-secondary);
background-color: var(--color-background-second);
padding: 0.15rem 0.45rem;
border-radius: 20px;
font-size: 12px;
transition: all 0.3s ease;
cursor: default;
p {
color: var(--color-text-secondary);
&:hover {
background-color: var(--color-accent-alpha);
color: var(--color-accent);
transform: scale(1.05) !important;
}
}
p {
color: var(--color-text-secondary);
font-style: italic;
}
}
</style>
Loading

0 comments on commit 0856cdd

Please sign in to comment.