Improve link typography layout

astro.config.mjs

@@ -1,23 +1,42 @@
-import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx'
-import tailwind from '@astrojs/tailwind';
+import partytown from '@astrojs/partytown'
-import { astroImageTools } from 'astro-imagetools';
+import prefetch from '@astrojs/prefetch'
-import robotsTxt from 'astro-robots-txt';
+import sitemap from '@astrojs/sitemap'
-import sitemap from '@astrojs/sitemap';
+import tailwind from '@astrojs/tailwind'
-import prefetch from '@astrojs/prefetch';
+import { defineConfig } from 'astro/config'
-import partytown from '@astrojs/partytown';
+import compress from 'astro-compress'
-import icon from 'astro-icon';
+import icon from 'astro-icon'
-import mdx from '@astrojs/mdx';
+import { astroImageTools } from 'astro-imagetools'
-
+import robotsTxt from 'astro-robots-txt'
-import compress from "astro-compress";
+import rehypeExternalLinks from 'rehype-external-links'
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://ethanreece.com',
+    site: 'https://ethanreece.com',
-  integrations: [tailwind(), astroImageTools, robotsTxt(), sitemap(), prefetch(), partytown(), mdx(), icon({
+    integrations: [
-    include: {
+        tailwind(),
-      heroicons: ['*'],
+        astroImageTools,
-      'fa-brands': ['*'],
+        robotsTxt(),
-      'simple-icons': ['*']
+        sitemap(),
-    }
+        prefetch(),
-  }), compress()]
+        partytown(),
-});
+        mdx({
+            syntaxHighlight: 'shiki',
+            shikiConfig: { theme: 'dracula' },
+            rehypePlugins: [
+                rehypeExternalLinks,
+                {
+                    target: '_blank',
+                },
+            ],
+        }),
+        icon({
+            include: {
+                heroicons: ['*'],
+                'fa-brands': ['*'],
+                'simple-icons': ['*'],
+            },
+        }),
+        compress(),
+    ],
+})

package.json

@@ -24,6 +24,7 @@
         "astro-navbar": "^2.0.1",
         "astro-robots-txt": "^0.5.0",
         "astro-seo": "^0.7.4",
+        "rehype-external-links": "^2.1.0",
         "sharp": "^0.32.1",
         "tailwind-bootstrap-grid": "^5.0.1",
         "tailwindcss-hero-patterns": "^0.1.2"

pnpm-lock.yaml

@@ -47,6 +47,9 @@ dependencies:
   astro-seo:
     specifier: ^0.7.4
     version: 0.7.4
+  rehype-external-links:
+    specifier: ^2.1.0
+    version: 2.1.0
   sharp:
     specifier: ^0.32.1
     version: 0.32.1
@@ -3840,6 +3843,13 @@ packages:
       web-namespaces: 2.0.1
     dev: false
 
+  /hast-util-is-element@2.1.3:
+    resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==}
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/unist': 2.0.6
+    dev: false
+
   /hast-util-parse-selector@3.1.1:
     resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
     dependencies:
@@ -4041,6 +4051,11 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /is-absolute-url@4.0.1:
+    resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
+
   /is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
     dev: false
@@ -6254,6 +6269,18 @@ packages:
       functions-have-names: 1.2.3
     dev: true
 
+  /rehype-external-links@2.1.0:
+    resolution: {integrity: sha512-2YMJZVM1hxZnwl9IPkbN5Pjn78kXkAX7lq9VEtlaGA29qIls25vZN+ucNIJdbQUe+9NNFck17BiOhGmsD6oLIg==}
+    dependencies:
+      '@types/hast': 2.3.4
+      extend: 3.0.2
+      hast-util-is-element: 2.1.3
+      is-absolute-url: 4.0.1
+      space-separated-tokens: 2.0.2
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+    dev: false
+
   /rehype-parse@8.0.4:
     resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==}
     dependencies:

src/components/content/index/Section.astro

@@ -22,7 +22,7 @@ const anchorDistance = 'mt-[-5rem] pt-[5rem]'
     }`}
 >
     <div class={anchorDistance} id={slug}>
-        <div class={`mx-auto max-w-page-w space-y-paragraph`}>
+        <div class={`mx-auto max-w-page-w space-y-paragraph prose`}>
             <h2 class={`font-bold ${fontSizeH2}`}>
                 {title}
             </h2>

src/components/content/index/Socials.astro

@@ -29,19 +29,19 @@ const socials: Social[] = [
     {
         name: 'GitHub (Personal)',
         profile: 'Sudoer777',
-        url: 'https://github.com/sudoer777',
+        url: 'https://gh.sudoer.ch/sudoer777',
         icon: 'fa-brands:github',
     },
     {
         name: 'GitHub (R-Technics)',
         profile: 'ethanreece-rtechnics',
-        url: 'https://github.com/ethanreece-rtechnics',
+        url: 'https://gh.sudoer.ch/ethanreece-rtechnics',
         icon: 'heroicons:briefcase-solid',
     },
     {
         name: 'GitHub (Scrumfish)',
         profile: 'ethanreece-scrumfish',
-        url: 'https://github.com/ethanreece-scrumfish',
+        url: 'https://gh.sudoer.ch/ethanreece-scrumfish',
         icon: 'heroicons:briefcase-solid',
     },
     {
@@ -52,8 +52,8 @@ const socials: Social[] = [
     },
     {
         name: 'Mastodon (GoToSocial)',
-        profile: 'me@gts.sudoer.ch',
+        profile: '@me@gts.sudoer.ch',
-        url: 'https://gts.sudoer.ch/@me',
+        url: 'https://elk.sudoer.ch/@me@gts.sudoer.ch',
         icon: 'fa-brands:mastodon',
     },
     {
@@ -71,7 +71,7 @@ const socials: Social[] = [
 ]
 ---
 
-<div class="flex flex-col">
+<div class="not-prose flex flex-col">
     {
         socials.map((s) => (
             <div class="flex">

src/components/content/index/Subsection.astro

@@ -21,7 +21,7 @@ const background = 'bg-[#00000020]'
     rel="noopener noreferrer"
     class={`block md:rounded ${
         url &&
-        `hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
+        `hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none not-prose no-underline font-extralight`
     } ${fontSize} ${margin} ${background}`}
 >
     <div class={`mx-auto w-full md:w-auto max-w-page-w space-y-paragraph`}>

src/layouts/Article.astro

@@ -11,16 +11,16 @@ const { title, description } = Astro.props.frontmatter
 ---
 
 <Base title={`${title} - Ethan Reece`} description={description}>
-    <article class="px-screen-x">
+    <article class="prose mx-auto px-screen-x">
         <div class="mx-auto max-w-page-w">
             <section>
                 <header>
-                    <h1 class="pb-[1.5rem] pt-[.75rem] text-[2rem] font-bold">
+                    <h1>
                         {title}
                     </h1>
                 </header>
             </section>
-            <section class="space-y-paragraph">
+            <section>
                 <slot />
             </section>
         </div>

src/pages/credits.mdx

@@ -3,26 +3,20 @@ layout: '../layouts/Article.astro'
 title: 'Site Credits'
 ---
 
-Framework: Astro with TypeScript and MDX
+This site was built using the following tools:
 
-Runtime: Node.js
+|                           |                                                                                                                                   |
-
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-Version managemnet: asdf
+| **Framework:**            | Astro with TypeScript and MDX                                                                                                     |
-
+| **Runtime:**              | Node.js                                                                                                                           |
-Package management: pnpm
+| **Version management:**   | rtx                                                                                                                               |
-
+| **Package management:**   | pnpm                                                                                                                              |
-Layout: Tailwind CSS (with Astro extension)
+| **Layout:**               | Tailwind CSS (with Astro extension)                                                                                               |
-
+| **Font:**                 | JetBrains Mono (using Fontsource)                                                                                                 |
-Font: JetBrains Mono (using Fontsource)
+| **Icons:**                | Hero Icons, Font Awesome Brands, Simple Icons (using Astro Icon)                                                                  |
-
+| **Circuitboard Pattern:** | Hero Patterns                                                                                                                     |
-Icons: Hero Icons (using Astro Icon)
+| **IDE:**                  | VSCodium                                                                                                                          |
-
+| **Code formatting:**      | Prettier, ESLint, Astro MDX                                                                                                       |
-Circuitboard Pattern: Hero Patterns
+| **Optimization:**         | Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Astro Compress, Autoprefixer, CSSNano |
-
+| **Contact Frontends**     | Elk (Mastodon/GoToSocial), GotHub (GitHub)                                                                                        |
-IDE: VSCodium
+| **Source code:**          | [On Forgejo](https://git.sudoer.ch/me/ethanreece.com)                                                                             |
-
-Code formatting: Prettier, ESLint, Astro MDX
-
-Optimization: Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Autoprefixer, CSSNano
-
-Source code: On Forgejo

tailwind.config.cjs

@@ -4,7 +4,24 @@ const heropatterns = require('tailwindcss-hero-patterns/src/patterns')
 module.exports = {
     content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     theme: {
-        extend: {},
+        extend: {
+            typography: {
+                DEFAULT: {
+                    css: {
+                        color: 'black',
+                        fontWeight: '200',
+                        h1: {
+                            paddingTop: '1rem',
+                        },
+                        'a:hover': {
+                            background: 'black',
+                            color: 'white',
+                            textDecoration: 'none',
+                        },
+                    },
+                },
+            },
+        },
         heroPatterns: {
             circuitboard: heropatterns.circuitboard,
         },
@@ -44,5 +61,8 @@ module.exports = {
             md: '768px',
         },
     },
-    plugins: [require('tailwindcss-hero-patterns')],
+    plugins: [
+        require('tailwindcss-hero-patterns'),
+        require('@tailwindcss/typography'),
+    ],
 }