feat: Modern fot stacks, smaller Not Found, issue button optional, re…

…arange styles, rebrand blog classes, cleanup content, sort imports, add .editorconfig and update deps in dev env

Aplos never dies!!

.development/default/package.json

@@ -2,7 +2,7 @@
     "type": "module",
     "dependencies": {
         "aplos": "file:../.././",
-        "sass": "^1.74.1",
-        "vitepress": "^1.1.4"
+        "sass": "^1.77.2",
+        "vitepress": "^1.2.2"
     }
 }

.development/default/pages/.vitepress/theme/custom.scss

@@ -1,8 +1,7 @@
 #for-development {
-  text-align: center;
-  color: var(--color-text-secondary);
   margin-top: 150px;
+  color: var(--color-text-secondary);
   font-weight: 700;
   letter-spacing: 10px;
-  background-color: var(--color-accent-alpha);
+  text-align: center;
 }

.development/default/pages/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 import type { Theme } from "vitepress";
-import Aplos from "../../../../../minimal/Layout.vue";
 import "../../../../../minimal";
-import "./custom.scss"
+import Aplos from "../../../../../minimal/Layout.vue";
+import "./custom.scss";
 
 export default {
   Layout: Aplos,

.development/default/pages/index.md

@@ -1,6 +1,16 @@
 # Aplós Nightly
 
-This is used for development purposes only, to only check if the changes are working as expected.
+This is used to see the changes that you are building in real-time. For this to work, you need to install VitePress:
+
+```sh
+pnpm add vitepress
+```
+
+After being done with the development, you should remove VitePress:
+
+```sh
+pnpm rm vitepress
+```
 
 **See [Demo](./demo.md) to see if everything is working as expected.**
 

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = false

CHANGELOG.md

@@ -1,3 +1,41 @@
+## 1.6.0 (unreleased)
+
+### Feature(s)
+
+- Add a `no-underline` class to remove the underline from links
+
+- Make the Content's Width adjustable
+
+- Make "Create a new Issue" button in the Helpful Layout optional
+
+- Provide Modern Font Stacks for the system font stack
+
+- Make "File an Issue" button on the not found page optional
+
+- Make the Not Found page smaller in width by 30%
+
+### Cleanup(s)
+
+- Migrate the Helpful Layout and the Not Found Layout to the `layouts` folder
+
+- Migrate styles from `index.scss` and `common.scss` to their respective files if they are big enough for better organization
+
+- General cleanup of content and code
+
+- Rebrand the `blog-*` classes to `article-*` classes (the components themselves were already rebranded in 1.5.0)
+
+- Cleanup the Not Found's View Styles
+
+- Add Aplós' version to `index.scss` for better tracking
+
+- Sort Imports
+
+### For Development
+
+- Update Dependencies inside the Development Example
+
+- Add `.editorconfig` file for better code consistency
+
 ## 1.5.1 (2024-05-18)
 
 ### Feature(s)
@@ -55,14 +93,14 @@
 ### Work in Progress Element(s)
 
 - Reinstate the ActivityPub comments _(not yet fully implemented)_
+
   - [x] Migrate script to TypeScript locally
   - [x] Make it run `onMounted`
   - [ ] Fix the build issue
 
-
 - Allow elements to go over the allocated width
   - [x] Migrate body to an grid
-  - [ ] Provide Grid Templates 
+  - [ ] Provide Grid Templates
 
 ## 1.4.1 (2024-05-05)
 

Layout.vue

@@ -1,12 +1,12 @@
 <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 ArticleHead from "./layouts/ArticleHead.vue";
 import ArticleFooter from "./layouts/ArticleFooter.vue";
-import HelpfulLayout from "./components/HelpfulLayout.vue";
+import HelpfulLayout from "./layouts/Helpful.vue";
+import NotFound from "./layouts/NotFound.vue";
 import ArticleList from "./layouts/ArticleList.vue";
 
 const { site, frontmatter, page } = useData();

components/Footer.vue

@@ -41,7 +41,6 @@ const { theme } = useData();
 </template>
 
 <style lang="scss">
-
 #footer {
   position: relative;
   bottom: 0;
@@ -53,7 +52,7 @@ const { theme } = useData();
   text-align: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 963px;
+  max-width: var(--content-width);
 
   a {
     text-decoration: underline 1.4px;
@@ -92,4 +91,4 @@ const { theme } = useData();
     font-weight: 900;
   }
 }
-</style>
+</style>

index.ts

@@ -1,7 +1,7 @@
-import "./Layout.vue";
-import "./styles/index.scss";
-import "non.geist/mono";
-import "inter-ui/inter.css";
-import "inter-ui/inter-variable.css";
 import "@csstools/normalize.css";
+import "inter-ui/inter-variable.css";
+import "inter-ui/inter.css";
+import "non.geist/mono";
 import "sass";
+import "./Layout.vue";
+import "./styles/index.scss";

layouts/ArticleFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="blog-footer">
+  <section id="article-footer">
     <hr />
     <h2>Comments</h2>
     <p>
@@ -34,7 +34,7 @@
     <hr />
     <p class="dialog-buttons" v-if="frontmatter.prev || frontmatter.next">
       <a
-        class="blog-nav"
+        class="article-nav"
         :href="`${frontmatter.prev.toLowerCase().replace(/\s+/g, '-')}.html`"
         target="_self"
         v-if="frontmatter.prev"
@@ -43,7 +43,7 @@
         <br /><span>{{ frontmatter.prev }}</span>
       </a>
       <a
-        class="blog-nav"
+        class="article-nav"
         :href="`${frontmatter.next.toLowerCase().replace(/\s+/g, '-')}.html`"
         target="_self"
         v-if="frontmatter.next"
@@ -64,10 +64,10 @@ const { frontmatter } = useData();
 </script>
 
 <style lang="scss">
-#blog-footer {
+#article-footer {
   margin-top: 50px;
 
-  .blog-nav {
+  .article-nav {
     display: block;
     padding: 20px;
     color: var(--color-accent);

layouts/ArticleHead.vue

@@ -1,9 +1,8 @@
 <template>
-  <div id="blog-head">
+  <div id="article-head">
     <h1>{{ frontmatter.title }}</h1>
     <small>
       {{
-        // Blog Post Published Date
         new Date(frontmatter.date).toLocaleDateString("en-GB", {
           day: "2-digit",
           month: "long",
@@ -36,27 +35,29 @@ 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;
-    transition: all 0.3s ease;
-    cursor: default;
+#article-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;
+      transition: all 0.3s ease;
+      cursor: default;
 
-    &:hover {
-      background-color: var(--color-accent-alpha);
-      color: var(--color-accent);
-      transform: scale(1.05) !important;
+      &:hover {
+        background-color: var(--color-accent-alpha);
+        color: var(--color-accent);
+        transform: scale(1.05);
+      }
     }
-  }
 
-  p {
-    color: var(--color-text-secondary);
-    font-style: italic;
+    p {
+      color: var(--color-text-secondary);
+      font-style: italic;
+    }
   }
 }
 </style>

components/HelpfulLayout.vue → layouts/Helpful.vue

@@ -3,7 +3,10 @@
     <hr />
     <p class="dialog-buttons">
       <a href="#top" target="_top">↑ Go to top</a>
-      <a id="file-an-issue" v-bind:href="theme.nav.git + '/issues/new'"
+      <a
+        id="file-an-issue"
+        v-if="theme.nav.git"
+        v-bind:href="theme.nav.git + '/issues/new'"
         >File an issue</a
       >
     </p>

components/404View.vue → layouts/NotFound.vue

@@ -4,14 +4,20 @@
       <span class="glitch" data-text="404">404</span>
       <h1>Not Found!</h1>
       <p>
-        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.
+        Oops! The page you are looking for has been removed, relocated or never
+        existed. Please check the URL or go back to the homepage.
+        <span v-if="theme.nav.git"
+          >If you believe something should be here, feel free to file an issue
+          with the button below.</span
+        >
       </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'"
+      <a
+        id="file-an-issue"
+        v-if="theme.nav.git"
+        v-bind:href="theme.nav.git + '/issues/new'"
         >File an issue</a
       >
     </p>
@@ -26,21 +32,24 @@ const { theme } = useData();
 
 <style lang="scss">
 #NotFound {
-  background-color: transparent !important;
-  box-shadow: none !important;
+  background-color: transparent;
+  box-shadow: none;
   border-radius: 10px;
   padding: 30px 20px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(var(--content-width) - 30%);
   margin-bottom: 20px;
   color: var(--color-text-secondary);
   width: 100%;
   text-align: center;
 
   h1 {
     font-size: 2em;
-    margin-top: 0 !important;
+    margin-top: 0;
     color: var(--color-accent);
     font-weight: 800;
-    margin-bottom: 0 !important;
+    margin-bottom: 0;
   }
 
   span {

minimal.ts

@@ -1,5 +1,5 @@
+import "inter-ui/inter-variable.css";
+import "inter-ui/inter.css";
+import "non.geist/mono";
 import "./minimal/Layout.vue";
 import "./styles/index.scss";
-import "inter-ui/inter.css";
-import "inter-ui/inter-variable.css";
-import "non.geist/mono"

minimal/Layout.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useData } from "vitepress";
 import { Content } from "vitepress";
-import NotFound from "../components/404View.vue";
+import NotFound from "../layouts/NotFound.vue";
 import SiteFooter from "../components/Footer.vue";
 import Navigation from "../components/Navigation.vue";
-import HelpfulLayout from "../components/HelpfulLayout.vue";
+import HelpfulLayout from "../layouts/Helpful.vue";
 
 const { site, frontmatter, page } = useData();
 </script>

no-blog.ts

@@ -1,3 +1,3 @@
 // This file serves as a fallback for the breaking change of renaming "no-blog" to "minimal".
-// Will be removed in the next major version.
+// Will be removed in the next major version (v2.0.0).
 import "./minimal.ts";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplos",
-  "version": "1.5.1",
+  "version": "1.6.0-0",
   "type": "module",
   "description": "A sleek, contemporary, and purposefully designed VitePress theme",
   "main": "index.ts",