add external and mail icons to links, fix link underlines

Author: smithbm2316

config/webc.js

@@ -19,6 +19,9 @@ export default function webcConfig(eleventyConfig) {
     // any `.webc` files found in the top-level of our `includes` directory
     // or in the `components` directory inside of our `includes` directory
     // will be processed as global webc components.
-    components: `${config.dir.input}/${config.dir.includes}/components/*.webc`,
+    components: [
+      `${config.dir.input}/${config.dir.includes}/components/*.webc`,
+      `${config.dir.input}/${config.dir.includes}/elements/*.webc`,
+    ],
   });
 }

links.md

@@ -54,6 +54,7 @@
 - [tailwindcss as a utility generator with eleventy](https://eleventy-excellent.netlify.app/blog/what-is-tailwind-css-doing-here/)
 - [tailwindcss v4 alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha#try-out-the-alpha)
 - [relevant 11ty Serverless plugin code that helped me figure out how to use the programmatic api to generate a page](https://github.com/11ty/eleventy/blob/v2.x/src/Serverless.js#L160)
+- [show all links to external pages from jim nielsen's blog](https://blog.jim-nielsen.com/about/external-links)
 
 ## webc
 

src/_includes/components/main-nav.webc

@@ -60,11 +60,11 @@
 
     & a {
       text-transform: lowercase;
-      text-decoration: none;
+      text-decoration-line: none;
     }
 
     & a:is(:hover, :active, :focus-visible) {
-      text-decoration: underline;
+      text-decoration-line: underline;
     }
   }
 

src/_includes/elements/img.webc

@@ -0,0 +1,8 @@
+<script webc:type='render'>
+  function() {
+    if (!this.alt) {
+      throw new Error("Need to have an `alt` attribute for the <img> tag.");
+    }
+    return `<img src="${this.src}" alt="${this.alt}">`;
+  }
+</script>

src/_includes/layouts/post.webc

@@ -83,10 +83,10 @@
 
     & > a {
       color: var(--color-primary);
-      text-decoration: none;
+      text-decoration-line: none;
 
       &:hover {
-        text-decoration: underline;
+        text-decoration-line: underline;
       }
     }
   }

src/index.webc

@@ -4,13 +4,13 @@
 
   <ul>
     <li webc:for="link of socials">
-      <a rel="noreferrer" :href="link.href" @text="link.text"></a>
+      <a :href="link.href" @text="link.text"></a>
     </li>
   </ul>
 
   <p>
     <span @text="p1[0]"></span>
-    <a href="https://www.vincit.com" rel="noreferrer" @text="p1[1]"></a>
+    <a href="https://www.vincit.com" @text="p1[1]"></a>
     <span @text="p1[2]"></span>
   </p>
   <p>

src/projects.webc

@@ -9,7 +9,7 @@
 
   <ul webc:if="projects.length > 0">
     <li webc:for="project of projects">
-      <a :href='project.url' rel="noreferrer">
+      <a :href='project.url'>
         <h2 @text='`~/${project.name}`'></h2>
         <p @text='project.description'></p>
       </a>
@@ -45,7 +45,15 @@
     padding: 0.6em 0.9em;
     margin-inline: -0.9em;
 
-    text-decoration: none;
+    text-decoration-line: none;
+
+    /* disable icon on external link, but put it on the first child of the link */
+    &:after {
+      content: none;
+    }
+    &:first-child :after {
+      content: ' \2197';
+    }
 
     &:focus-visible {
       outline-color: var(--color-primary);
@@ -55,7 +63,6 @@
 
     h2 {
       font-size: var(--font-size-lg);
-
     }
     &:hover h2 {
       color: var(--color-primary);

src/styles/base.css

@@ -54,6 +54,13 @@ a {
     color: var(--color-primary);
   }
 }
+/* show icons for external and mailto: links */
+a[href^='http']:after {
+  content: ' \2197';
+}
+a[href^='mailto:']:after {
+  content: ' \2709';
+}
 
 /*
  * but if they're in an paragraph or are anchor links inside of a heading on one
@@ -71,7 +78,7 @@ a[data-anchor="true"] {
 
 /* override tailwind default of no underline for links */
 a {
-  text-decoration: underline;
+  text-decoration-line: underline;
   text-decoration-thickness: 2px;
 }
 /* disable link underline by default if it's a direct child of a heading element */

src/styles/components.css

@@ -33,12 +33,12 @@ main {
 
   a {
     font-size: var(--font-size-md);
-    text-decoration: none;
+    text-decoration-line: none;
     max-width: 32ch;
 
     &:hover,
     &:focus-visible {
-      text-decoration: underline;
+      text-decoration-line: underline;
     }
   }
 
@@ -74,7 +74,7 @@ main {
       var(--padding-block-size) + var(--padding-inline-size) +
         var(--tag-hole-punch-size)
     );
-    text-decoration: none;
+    text-decoration-line: none;
     position: relative;
     /* clips the element to match the ::before element's path, otherwise
      * the background color of this element will escape the bounds

src/words/drafts/tailwind-is-good-enough.md

@@ -24,7 +24,6 @@ plugins: [
 ## downsides/gripes
 - css grid kinda sucks with tailwind
 	- to use the power of grid, you just need to use bespoke CSS (i.e. `grid-template-areas` and `grid-area: *`)
-	- 
 - logical properties support is half-assed
 	- why don't you just update `ml-*` / `pt-*` / etc utilities under the hood to use logical properties ??
 	- no `-block-` logical property utilities due to (understandable) naming collision with `-bottom` utilities