From 6de6d8be08848802c4624a645da7b8ec2bba22e3 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Mon, 3 Jun 2024 20:39:00 +0300
Subject: [PATCH] feat: make Icon Links toggleable in Configuration

---
 CHANGELOG.md                 |  2 ++
 Layout.vue                   |  4 ++--
 docs/.vitepress/config.mts   |  1 +
 docs/guide/index.md          |  2 +-
 minimal/Layout.vue           | 28 +++++++++++++++-------------
 styles/components/links.scss | 22 +++++++++++++---------
 6 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf32372..53272a4 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/Layout.vue b/Layout.vue
index 40b36d1..5a0ec49 100644
--- a/Layout.vue
+++ b/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>
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index b2895a7..abed38a 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -12,6 +12,7 @@ export default defineConfig({
   cleanUrls: true,
 
   themeConfig: {
+    links: "icons",
     author: "Gabriel Cozma",
     articles: {
       giscus: {
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 71030ed..734a7e2 100644
--- a/docs/guide/index.md
+++ b/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.
 
diff --git a/minimal/Layout.vue b/minimal/Layout.vue
index b005b7f..5c6f061 100644
--- a/minimal/Layout.vue
+++ b/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>
diff --git a/styles/components/links.scss b/styles/components/links.scss
index 66d35d4..7059f5f 100644
--- a/styles/components/links.scss
+++ b/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;
+    }
   }
 }