feat: advertise rss

Author: openscript

.changeset/gold-months-guess.md

@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Advertise RSS

astro.config.ts

@@ -8,8 +8,8 @@ import { remarkGitInfo } from "./src/remark/remark-git-info";
 import { remarkExcerpt } from "./src/remark/remark-excerpt";
 import search from "./src/integrations/search";
 import sitemap from "@astrojs/sitemap";
+import Icons from "unplugin-icons/vite";
 
-// https://astro.build/config
 export default defineConfig({
   prefetch: true,
   build: {
@@ -49,6 +49,7 @@ export default defineConfig({
           },
         },
       }),
+      Icons({ compiler: "astro" }),
     ],
   },
   integrations: [search(), mdx(), sitemap({ i18n: { defaultLocale: C.DEFAULT_LOCALE, locales: C.LOCALES } })],

package.json

@@ -42,18 +42,20 @@
     "rehype-slug": "^6.0.0",
     "sharp": "^0.34.3",
     "simple-git": "^3.28.0",
+    "unplugin-icons": "^22.2.0",
     "vfile": "^6.0.3"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.34.0",
+    "@iconify/json": "^2.2.377",
     "@openscript/unplugin-favicons": "^1.1.7",
     "@types/mdast": "^4.0.4",
     "@types/node": "^24.3.0",
     "@typescript-eslint/parser": "^8.40.0",
     "@vitest/coverage-v8": "3.2.4",
     "astro-eslint-parser": "^1.2.2",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",

pnpm-lock.yaml

@@ -0,0 +1,11 @@
+---
+---
+
+import LatestBlogsSection from '../../../layouts/sections/LatestBlogsSection.astro';
+import Button from '../../../components/Button.astro';
+
+<LatestBlogsSection locale="de">
+
+  <Button href="/de/blog" slot="call-to-action">Alle anzeigen</Button>
+
+</LatestBlogsSection>

src/content/sections/de/latest-blogs.mdx

@@ -6,6 +6,7 @@ import FidgetCheckboxes from '../../../components/fidget/FidgetCheckboxes.astro'
 import Button from '../../../components/Button.astro';
 
 <IntroSection>
+
   <Fragment slot="title">My life between bits and bytes.</Fragment>
   <FidgetCheckboxes slot="spotlight" />
 

src/content/sections/en/intro.mdx

@@ -0,0 +1,11 @@
+---
+---
+
+import LatestBlogsSection from '../../../layouts/sections/LatestBlogsSection.astro';
+import Button from '../../../components/Button.astro';
+
+<LatestBlogsSection locale="en">
+
+  <Button href="/blog" slot="call-to-action">Show all</Button>
+
+</LatestBlogsSection>

src/content/sections/en/latest-blogs.mdx

@@ -265,10 +265,7 @@ footer nav ul .active {
   font-weight: bold;
 }
 
-#topbar,
-header,
-main,
-footer {
+body > :is(#topbar, header, main, footer) {
   padding-left: var(--padding-page);
   padding-right: var(--padding-page);
 }

src/layouts/DefaultLayout.css

@@ -8,6 +8,7 @@ import { render } from "astro:content";
 import slug from "limax";
 import Card from "../../components/Card.astro";
 import DateTime from "../../components/DateTime.astro";
+import VscodeIconsFileTypeRss from "~icons/vscode-icons/file-type-rss";
 
 type Props = {
   locale: string;
@@ -31,6 +32,22 @@ const filteredPosts = posts.slice(0, 4);
     gap: 4rem;
   }
 
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+
+      a {
+        display: flex;
+      }
+    }
+  }
+
   @media (max-width: 1280px) {
     section :global(ul) {
       grid-template-columns: 1fr;
@@ -39,7 +56,15 @@ const filteredPosts = posts.slice(0, 4);
 </style>
 
 <section>
-  <h2>{t("latestPostsLabel")}</h2>
+  <header>
+    <h2>{t("latestPostsLabel")}</h2>
+    <div>
+      <a href={`/rss-${locale}.xml`}>
+        <VscodeIconsFileTypeRss style={{ fontSize: "1.5rem" }} />
+      </a>
+      <slot name="call-to-action" />
+    </div>
+  </header>
   <CardList>
     {
       filteredPosts.map(async (post, i) => {

src/layouts/sections/LatestBlogsSection.astro

@@ -1,7 +1,6 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import { getEntry } from "astro:content";
-import LatestBlogsSection from "../../layouts/sections/LatestBlogsSection.astro";
 import { render } from "astro:content";
 import { generateGetStaticIndexPaths } from "../../utils/paths";
 
@@ -11,6 +10,7 @@ const {
   data: { locale },
 } = Astro.props;
 const { Content: IntroSection } = await render(await getEntry("sections", `${locale}/intro`)!);
+const { Content: LatestBlogsSection } = await render(await getEntry("sections", `${locale}/latest-blogs`)!);
 ---
 
 <style>
@@ -21,5 +21,5 @@ const { Content: IntroSection } = await render(await getEntry("sections", `${loc
 
 <DefaultLayout translations={translations}>
   <IntroSection />
-  <LatestBlogsSection locale={locale} />
+  <LatestBlogsSection />
 </DefaultLayout>