feat: make Icon Links toggleable in Configuration

CHANGELOG.md

@@ -24,6 +24,8 @@
 
   - `numeric` for numeric style headings
 
+- Make Icon Links a toggleable option in Configuration
+
 - Add `note` informal card
 
 - Small changes to images behavior

Layout.vue

@@ -9,12 +9,12 @@ import ArticleFooter from "./layouts/ArticleFooter.vue";
 import SiteFooter from "./components/Footer.vue";
 import Navigation from "./components/Navigation.vue";
 
-const { site, frontmatter, page } = useData();
+const { site, frontmatter, page, theme } = useData();
 </script>
 
 <template>
   <Navigation />
-  <main id="content-main" :class="{ numeric: frontmatter.style === 'numeric' }">
+  <main id="content-main" :class="{ numeric: frontmatter.style === 'numeric' || theme.style === 'numeric', 'icon-links': theme.links === 'icons' }">
     <div v-if="frontmatter.home">
       <h1>{{ site.title }}</h1>
     </div>

docs/.vitepress/config.mts

@@ -12,6 +12,7 @@ export default defineConfig({
   cleanUrls: true,
 
   themeConfig: {
+    links: "icons",
     author: "Gabriel Cozma",
     articles: {
       giscus: {

docs/guide/index.md

@@ -15,7 +15,7 @@ Aplós is a user-friendly template for Vitepress that allows you to quickly set
 2. After initializing, you have two options:
 
    - Clone the repository to edit the project locally: `git clone https://github.com/*your_username*/aplos`
-   - Use GitHub Codespaces to edit the project online: [GitHub Codespaces](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=737827959) { .external-link }
+   - Use GitHub Codespaces to edit the project online: [GitHub Codespaces](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=737827959)
 
    Make sure to replace _your_username_ with your GitHub username.
 

minimal/Layout.vue

@@ -7,20 +7,22 @@ import Navigation from "../components/Navigation.vue";
 import NotFound from "../layouts/NotFound.vue";
 import HelpfulLayout from "../layouts/Helpful.vue";
 
-const { site, frontmatter, page } = useData();
+const { site, frontmatter, page, theme } = useData();
 </script>
 
 <template>
-  <Navigation />
-  <main id="content-main" :class="{ numeric: frontmatter.style === 'numeric' }">
-    <div v-if="frontmatter.home">
-      <h1>{{ site.title }}</h1>
-    </div>
-    <NotFound v-if="page.isNotFound" />
-    <div v-else :class="frontmatter.pageClass">
-      <Content />
-    </div>
-    <HelpfulLayout v-if="frontmatter.layout == 'helpful'" />
-  </main>
-  <SiteFooter />
+  <div :class="{ plain: theme.type === 'plain' }">
+    <Navigation />
+    <main id="content-main" :class="{ numeric: frontmatter.style === 'numeric' || theme.style === 'numeric' }">
+      <div v-if="frontmatter.home">
+        <h1>{{ site.title }}</h1>
+      </div>
+      <NotFound v-if="page.isNotFound" />
+      <div v-else :class="frontmatter.pageClass">
+        <Content />
+      </div>
+      <HelpfulLayout v-if="frontmatter.layout == 'helpful'" />
+    </main>
+    <SiteFooter />
+  </div>
 </template>

styles/components/links.scss

@@ -1,13 +1,17 @@
-.external-link a {
-  &::after {
-    content: " ↗";
-    font-size: inherit;
+.icon-links {
+  a[href*="https://"],
+  a[href*="http://"]
+  {
+    &::after {
+      content: " ↗";
+      font-size: 0.75rem;
+    }
   }
-}
 
-.internal-link a {
-  &::after {
-    content: " →";
-    font-size: 0.75rem;
+  a {
+    &::after {
+      content: " →";
+      font-size: 0.75rem;
+    }
   }
 }