Added Everything

Layout.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { Content } from "vitepress";
+import NotFound from "./components/404View.vue";
+import SiteFooter from "./components/Footer.vue";
+import Navigation from "./components/Navigation.vue";
+import BlogHead from "./components/BlogHead.vue";
+import BlogFooter from "./components/BlogFooter.vue";
+import SimpleLayout from "./components/SimpleLayout.vue";
+
+const { site, frontmatter, page } = useData();
+</script>
+
+<template>
+  <Navigation />
+  <main>
+    <div v-if="frontmatter.home">
+      <h1>{{ site.title }}</h1>
+    </div>
+    <div v-if="frontmatter.layout == 'blog'">
+      <BlogHead />
+    </div>
+    <NotFound v-if="page.isNotFound" />
+    <div v-else :class="frontmatter.pageClass">
+      <Content />
+    </div>
+    <SimpleLayout v-if="frontmatter.layout == 'simple'" />
+    <div v-if="frontmatter.layout == 'blog'">
+      <BlogFooter />
+    </div>
+  </main>
+  <SiteFooter />
+</template>

README.md

@@ -0,0 +1,25 @@
+<div align="center">
+<h1>Aplós - Theme</h1>
+Aplós, but just the theme files, as a Git Submodule.
+</div>
+
+> [!IMPORTANT]
+As I said above, this repo is just for these theme files for Git Submodule. For the actual Aplós Project check [GabsEdits/aplos](https://github.com/GabsEdits/aplos)
+
+## Usage
+First, Init the Submodules:
+```sh
+git submodule init
+```
+
+Then, add the theme to the `pages/.vitepress/theme` directory:
+```sh
+git submodule add https://github.com/GabsEdits/aplos-theme.git pages/.vitepress/theme
+```
+
+### Update
+To update the theme run this command:
+
+```bash
+git submodule update --remote --merge
+```

components/404View.vue

@@ -0,0 +1,102 @@
+<template>
+  <main>
+    <section id="NotFound">
+      <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?
+      </p>
+    </section>
+  </main>
+</template>
+
+<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;
+
+    h1 {
+        font-size: 2em;
+        margin-top: 0 !important;
+        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;
+
+        @keyframes notfoundblink {
+            from {
+                opacity: 1;
+            }
+
+            to {
+                opacity: 0;
+            }
+        }
+
+        @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;
+            }
+
+            &::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);
+        }
+
+        25% {
+            transform: translate(4px, -4px);
+        }
+
+        50% {
+            transform: translate(-4px, 4px);
+        }
+
+        75% {
+            transform: translate(4px, 0);
+        }
+
+        100% {
+            transform: translate(0);
+        }
+    }
+}
+</style>

components/BlogFooter.vue

@@ -0,0 +1,82 @@
+<template>
+  <section id="blog-footer">
+    <hr />
+    <h2>Comments</h2>
+    <p>
+      If you have any questions or comments about this post, please feel free to
+      leave a comment below.
+    </p>
+    <div id="giscusContainer"></div>
+    <a href="/blog/">
+      <span>← Go back to the blog's home</span>
+    </a>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { onMounted } from "vue";
+
+const { theme } = 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";
+  script.async = true;
+  script.setAttribute("data-repo", theme.value.blog.data.repo);
+  script.setAttribute("data-repo-id", theme.value.blog.data.repoid);
+  script.setAttribute("data-category", "Blog Comments");
+  script.setAttribute("data-category-id", theme.value.blog.data.categoryid);
+  script.setAttribute("data-mapping", "title");
+  script.setAttribute("data-strict", "0");
+  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-lang", "en");
+  script.setAttribute("data-loading", "lazy");
+  script.setAttribute("crossorigin", "anonymous");
+
+  // Append the script to the document
+  document.getElementById("giscusContainer")?.appendChild(script);
+});
+</script>
+
+<style lang="scss">
+#blog-footer {
+  margin-top: 50px;
+
+  a {
+    display: block;
+    padding: 20px;
+    border-radius: 10px;
+    color: var(--color-text-secondary);
+    width: 100%;
+    text-align: center;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    margin-top: 30px;
+
+    &:hover {
+      transform: translateY(-5px);
+      background-color: var(--color-background-second);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    span {
+      font-size: 1em;
+      font-weight: 800;
+      margin-bottom: 0 !important;
+    }
+  }
+}
+</style>

components/BlogHead.vue

@@ -0,0 +1,43 @@
+<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>
+</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);
+};
+</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;
+    }
+
+    p {
+        color: var(--color-text-secondary);
+    }
+}
+</style>

components/Footer.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useData } from "vitepress";
+const currentYear = ref<string>("");
+
+const { theme } = useData();
+
+onMounted(() => {
+  const now = new Date();
+  const options = { year: "numeric", timeZone: "Europe/Chisinau" };
+  currentYear.value = now.toLocaleDateString(
+    undefined,
+    options as Intl.DateTimeFormatOptions
+  );
+});
+</script>
+
+<template>
+  <footer>
+    <p v-if="theme.footer.madeby.show">
+      Made with ❤️ by
+      <a :href="theme.footer.madeby.link" id="author"
+        ><mark>{{ theme.footer.madeby.name }}</mark></a
+      >
+    </p>
+    <p id="copyright" v-if="theme.footer.copyright">
+      &copy; {{ theme.author }},
+      <span v-if="theme.footer.startYear">{{ theme.footer.startYear }}-</span
+      >{{ currentYear }}.
+    </p>
+    <p id="copyleft" v-if="theme.footer.copyleft?.show">
+      &#127279; Licensed under the
+      <a :href="theme.footer.copyleft.info">{{
+        theme.footer.copyleft.license
+      }}</a
+      >.
+    </p>
+    <p id="powered" v-if="theme.footer.poweredBy">
+      Powered by <a href="https://vitepress.dev/">VitePress</a> and
+      <a href="https://aplos.gxbs.me">Aplós</a>
+    </p>
+  </footer>
+</template>

components/Navigation.vue

@@ -0,0 +1,63 @@
+<template>
+  <header v-if="theme.nav.show !== false">
+    <nav>
+      <ul>
+        <li id="title">
+          <a href="/" @click="setActive('/')">
+            {{ site.title }}
+          </a>
+        </li>
+        <li v-for="(navItem, index) in navigation" :key="index">
+          <a
+            :href="navItem.link"
+            :class="{ active: isActive(navItem.link) }"
+            @click="setActive(navItem.link)"
+          >
+            {{ navItem.text }}
+          </a>
+        </li>
+        <li v-if="theme.nav.rss">
+          <a
+            target="_blank"
+            :href="theme.nav.rss"
+            aria-label="Link to the RSS Feed"
+          >
+            <RSSFeed />
+          </a>
+        </li>
+        <li v-if="theme.nav.git">
+          <a
+            target="_blank"
+            :href="theme.nav.git"
+            aria-label="Link to the source code"
+          >
+            <SourceCode />
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useData } from "vitepress";
+import SourceCode from "../icons/SourceCode.vue";
+import RSSFeed from "../icons/RSSFeed.vue";
+
+const { site, theme } = useData();
+
+const currentPath = ref("/");
+const isActive = (route: string) => currentPath.value === route;
+const setActive = (route: string) => {
+  currentPath.value = route;
+};
+
+onMounted(() => {
+  if (typeof window !== "undefined") {
+    currentPath.value = window.location.pathname;
+  }
+});
+
+const navigation = theme.value.nav.links;
+</script>