Initial commit

Works with Astro 3. Fixes #10. Fixes #4.

README.md

@@ -18,7 +18,7 @@ npm init astro -- --template Charca/astro-blog-template
 
 ## ✨ Features:
 
-- ✅ Astro 1.0
+- ✅ Astro 4.0
 - ✅ Dark Mode
 - ✅ Full Markdown support
 - ✅ SEO-friendly setup with canonical URLs and OpenGraph data

astro.config.mjs

@@ -1,6 +1,9 @@
 import { defineConfig } from 'astro/config'
 import svelte from '@astrojs/svelte'
 import mdx from '@astrojs/mdx'
+import remarkGfm from 'remark-gfm'
+import remarkSmartypants from 'remark-smartypants'
+import rehypeExternalLinks from 'rehype-external-links'
 
 // https://astro.build/config
 export default defineConfig({
@@ -10,9 +13,10 @@ export default defineConfig({
     shikiConfig: {
       theme: 'nord',
     },
+    remarkPlugins: [remarkGfm, remarkSmartypants],
     rehypePlugins: [
       [
-        'rehype-external-links',
+        rehypeExternalLinks,
         {
           target: '_blank',
         },

package.json

@@ -9,13 +9,13 @@
     "preview": "astro preview",
     "astro": "astro"
   },
-  "devDependencies": {
-    "@astrojs/mdx": "^0.8.3",
-    "@astrojs/svelte": "^1.0.0",
-    "astro": "^1.0.3",
-    "rehype-external-links": "^2.0.0"
-  },
   "dependencies": {
-    "reading-time": "^1.5.0"
+    "@astrojs/mdx": "^2.0.0",
+    "@astrojs/svelte": "^5.0.0",
+    "astro": "^4.0.1",
+    "reading-time": "^1.5.0",
+    "rehype-external-links": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-smartypants": "^2.0.0"
   }
 }

src/components/BaseHead.astro

@@ -1,14 +1,15 @@
 ---
+import { ViewTransitions } from 'astro:transitions'
 import '../styles/fonts.css'
 import '../styles/global.css'
 
 export interface Props {
-  title: string;
+  title: string
-  description: string;
+  description: string
-  permalink: string;
+  permalink: string
 }
 
-const { title, description, permalink } = Astro.props;
+const { title, description, permalink } = Astro.props
 const socialUrl = Astro.site.href + 'assets/social.png'
 ---
 
@@ -17,7 +18,6 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <meta name="viewport" content="width=device-width" />
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-
 <!-- Primary Meta Tags -->
 <title>{title}</title>
 <meta name="title" content={title} />
@@ -37,13 +37,18 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={socialUrl} />
 
+<ViewTransitions />
+
 <!-- This is intentionally inlined to avoid FOUC -->
-<script>
+<script is:inline>
-  const root = document.documentElement;
+  const root = document.documentElement
-  const theme = localStorage.getItem('theme');
+  const theme = localStorage.getItem('theme')
-  if (theme === 'dark' || (!theme) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  if (
-    root.classList.add('theme-dark');
+    theme === 'dark' ||
+    (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    root.classList.add('theme-dark')
   } else {
-    root.classList.remove('theme-dark');
+    root.classList.remove('theme-dark')
   }
 </script>

src/components/Header.astro

@@ -16,6 +16,6 @@ const { current = '' } = Astro.props;
 </style>
 
 <header>
-  <Logo />
+  <Logo/>
   <Nav current={current} />
 </header>

src/components/Logo.astro

@@ -1,10 +1,32 @@
+
+
 <style>
   img {
     display: block;
     width: 75px;
   }
+
+  @media screen and (max-width: 520px) {
+    img {
+      display: none;
+    }
+  }
+
+  .light {
+    visibility: hidden;
+  }
+
+  .dark {
+    visibility: hidden;
+  }
+
 </style>
 
-<a href="/">
+<div class="light">
-  <img alt="Blog Logo" src="/assets/logo.webp" width="75" height="50">
+  <img alt="Blog Logo" src="/assets/reuterLight3.png" width="200" height="200" />
+</div>
+<!-- 
+  <div class="dark">
+    <img alt="Blog Logo" src="/assets/reuterDark.png" width="200" height="200" />
+  </div> -->
 </a>

src/components/Nav.astro

@@ -1,6 +1,6 @@
 ---
 import ThemeToggleButton from './ThemeToggleButton.svelte';
-const { current = '' } = Astro.props;
+var { current = '' } = Astro.props;
 ---
 
 <style>

src/data/blog-posts/markdown-test.md

@@ -200,3 +200,5 @@ Incididunt in culpa cupidatat mollit cillum qui proident sit. In cillum aliquip
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/PCp2iXA1uLE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 Reprehenderit non eu quis in ad elit esse qui aute id [incididunt](#) dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure.
+
+[Hello World](/blog/hello-world)

src/pages/about.astro

@@ -9,7 +9,11 @@ const permalink = `${Astro.site.href}about`;
 <BaseLayout title={title} description={description} permalink={permalink} current="about">
   <div class="container">
     <h1>About</h1>
-    <figure class="about-image">
+
+    <p>
+      Reuter
+    </p>
+    <!-- <figure class="about-image">
       <img src="/assets/about-illustration.webp" alt="Illustration of a notebook" width="330">
       <figcaption>
         Illustration by
@@ -17,13 +21,7 @@ const permalink = `${Astro.site.href}about`;
         from
         <a href="https://icons8.com/illustrations" target="_blank" rel="noopener">Ouch!</a>
       </figcaption>
-    </figure>
+    </figure> -->
-    <p>Text placeholder via <a href="https://jeffsum.com/" target="_blank">Jeffsum</a>.</p>
-    <p>So you two dig up, dig up dinosaurs? What do they got in there? King Kong? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! Life finds a way. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.</p>
-    <p>You really think you can fly that thing? You know what? It is beets. I've crashed into a beet truck. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
-    <p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Hey, take a look at the earthlings. Goodbye! I was part of something special. Just my luck, no ice. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager?</p>
-    <p>Jaguar shark! So tell me - does it really exist? This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Yes, Yes, without the oops! You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager?</p>
-    <p>Yes, Yes, without the oops! Do you have any idea how long it takes those cups to decompose. They're using our own satellites against us. And the clock is ticking. Do you have any idea how long it takes those cups to decompose. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
   </div>
 </BaseLayout>
 

src/pages/blog/[slug].astro

@@ -14,7 +14,7 @@ export async function getStaticPaths() {
 const { Content, frontmatter } = Astro.props.post;
 const { title, description, publishDate } = frontmatter;
 const { slug, readingTime } = getPostData(Astro.props.post);
-const permalink = `${Astro.site.href}${slug}`;
+const permalink = `${Astro.site.href}blog/${slug}`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">

src/pages/index.astro

@@ -9,11 +9,12 @@ const permalink = Astro.site.href;
 <BaseLayout title={title} description={description} permalink={permalink}>
   <div class="home-container">
     <div class="home-copy">
-      <h1>Welcome to your new Astro Blog</h1>
+      <h1>Welcome to Reuter Development</h1>
-      <p>Check out the docs on <a href="https://www.github.com/Charca/astro-blog-template" target="_blank" rel="noopener">GitHub</a> to get started.</p>
+      <p>Where we make a clearing for you, cutting down the obstacles in your path.
     </div>
 
-    <div class="hero-image-container">
+
+    <!-- <div class="hero-image-container">
       <picture>
         <source srcset="/assets/home-illustration.webp" media="(min-width: 600px)">
         <img class="hero-image" alt="Illustration of person reading a book" src="/assets/home-illustration-small.webp" width="550" height="466">
@@ -25,9 +26,18 @@ const permalink = Astro.site.href;
         <a href="https://icons8.com/illustrations" target="_blank" rel="noopener">Ouch!</a>
       </p>
     </div>
-  </div>
+  </div> -->
 </BaseLayout>
 
+
+<h1>What defines Reuter Development</h1>
+
+<ul>
+  <li>Client-focused</li>
+  <li>Strong Center</li>
+  <li></li>
+</ul>
+
 <style>
   .home-container {
     align-items: center;

src/styles/global.css

@@ -1,4 +1,4 @@
-:root {
+:root :theme-light{
   --background-body: #fff;
   --text-main: #36393b;
   --text-secondary: #6b6f72;
@@ -14,6 +14,17 @@
   --primary-color: #548e9b;
 }
 
+html {
+  overflow-y: scroll;
+}
+
+@supports (scrollbar-gutter: stable) {
+  html {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+}
+
 *,
 *:before,
 *:after {