Fixed rss images

src/components/BaseHead.astro

@@ -32,16 +32,19 @@ const { title, description, image = '/logo.png' } = Astro.props;
 <meta name="title" content={title} />
 <meta name="description" content={description} />
 
+<!-- Fediverse -->
+<meta name="fediverse:creator" content="@pantonius@mastodon.social">
+
 <!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+<meta property="og:image" content={canonicalURL.origin + image} />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta property="twitter:image" content={canonicalURL.origin + image} />

src/components/Footer.astro

@@ -4,11 +4,17 @@ import Socials from "./Socials.astro";
 ---
 
 <footer>
-	&copy; {today.getFullYear()} <a href="/about">Anton</a>. All rights reserved.
+  <p>&copy; {today.getFullYear()} <a href="/about">Anton</a>. All rights reserved.</p>
   <Socials />
+  <div>
+    <a href="/slashes">/slashes</a> <a href="/slashes#rss">/rss</a>
+  </div>
 </footer>
 <style>
-	footer {
+  footer {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
 		background-color: var(--background-soft);
 		padding: 1rem 1rem 2rem;
 		width: 100%;

src/components/Header.astro

@@ -54,7 +54,6 @@ import Socials from "./Socials.astro";
 	}
 
   .internal-links {
-
     position: absolute;
     display: flex;
     flex-direction: row;
@@ -62,6 +61,7 @@ import Socials from "./Socials.astro";
     width: 100%;
     left: 0; 
     right: 0; 
+    pointer-events: none;
   }
 
   .internal-links a {
@@ -69,6 +69,7 @@ import Socials from "./Socials.astro";
 		color: var(--text);
 		border-bottom: 4px solid transparent;
 		text-decoration: none;
+    pointer-events: auto;
   }
 
   .internal-links a.active {

src/consts.ts

@@ -2,4 +2,4 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 export const SITE_TITLE = 'Pantosite';
-export const SITE_DESCRIPTION = 'The personal Blog of one Anton Pogrebnjak';
+export const SITE_DESCRIPTION = 'The personal website of Anton';

src/content/attachments/computer-graphics_plenoptic_function.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162.532" height="129.678" viewBox="0 0 162.532 129.678">
+<svg style="background: white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162.532" height="129.678" viewBox="0 0 162.532 129.678">
 <defs>
 <g>
 <g id="glyph-0-0">

src/content/blog/tikz-svg.mdx

@@ -2,6 +2,7 @@
 title: TikZ
 pubDate: 2025-02-06T19:00:00Z
 description: Converting TikZ graphics into svg graphics.
+heroImage: ../attachments/computer-graphics_plenoptic_function.svg
 ---
 At some point a man has to realize that they went down a rabbit-hole without any way to escape it. TikZ is one such rabbit-hole and, yes, I am that man.
 

src/pages/blog/rss.xml.js

@@ -0,0 +1,29 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
+
+export async function GET(context) {
+  const posts = await getCollection('blog');
+
+  return rss({
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    site: context.site,
+    items: posts.map((post) => {
+      let item = {
+        ...post.data,
+        link: `/blog/${post.id}/`,
+      };
+
+      if (post.data.heroImage) {
+        item.enclosure = {
+          url: post.data.heroImage.src,
+          length: post.data.heroImage.width * post.data.heroImage.height,
+          type: `image/${post.data.heroImage.format}`
+        }
+      }
+
+      return item;
+    })
+  });
+}

src/pages/projects/rss.xml.js

@@ -0,0 +1,29 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
+
+export async function GET(context) {
+  const posts = await getCollection('projects');
+
+  return rss({
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    site: context.site,
+    items: posts.map((project) => {
+      let item = {
+        ...project.data,
+        link: `/projects/${project.id}/`,
+      };
+
+      if (project.data.heroImage) {
+        item.enclosure = {
+          url: project.data.heroImage.src,
+          length: project.data.heroImage.width * project.data.heroImage.height,
+          type: `image/${project.data.heroImage.format}`
+        }
+      }
+
+      return item;
+    }),
+  });
+}

src/pages/rss.xml.js

@@ -3,14 +3,46 @@ import { getCollection } from 'astro:content';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 
 export async function GET(context) {
-	const posts = await getCollection('blog');
+  const posts = await getCollection('blog');
-	return rss({
+  const projects = await getCollection('projects');
-		title: SITE_TITLE,
+
-		description: SITE_DESCRIPTION,
+  let unifiedItems = posts.map((post) => {
-		site: context.site,
+    let item = {
-		items: posts.map((post) => ({
+      ...post.data,
-			...post.data,
+      link: `/blog/${post.id}/`,
-			link: `/blog/${post.id}/`,
+    };
-		})),
+
-	});
+    if (post.data.heroImage) {
+      item.enclosure = {
+        url: post.data.heroImage.src,
+        length: post.data.heroImage.width * post.data.heroImage.height,
+        type: `image/${post.data.heroImage.format}`
+      }
+    }
+
+    return item;
+  }).concat(projects.map((project) => {
+    let item = {
+      ...project.data,
+      link: `/projects/${project.id}/`,
+    };
+
+    if (project.data.heroImage) {
+      item.enclosure = {
+        url: project.data.heroImage.src,
+        length: project.data.heroImage.width * project.data.heroImage.height,
+        type: `image/${project.data.heroImage.format}`
+      }
+    }
+
+    return item;
+  }));
+  unifiedItems = unifiedItems.sort((a, b) => b.pubDate - a.pubDate);
+
+  return rss({
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    site: context.site,
+    items: unifiedItems,
+  });
 }

src/pages/slashes.astro

@@ -0,0 +1,42 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import Main from "../components/Main.astro";
+import Footer from "../components/Footer.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+	</head>
+	<body>
+		<Header />
+    <Main>
+      <div>
+      <h1>Slashes</h1>
+      <h2>Pages</h2>
+      <ul>
+        <li><a href="/projects">/projects</a> Projects I have worked on</li>
+        <li><a href="/photography">/photography</a> Some of my photographic work &mdash; still a work in progress</li>
+        <li><a href="/blog">/blog</a> Some essays and freeform writing on various topics</li>
+        <li><a href="/about">/about</a> If you care about who I am</li>
+      </ul>
+
+      <h2 id="rss">RSS Feeds</h2>
+      <p>If you want to subscribe to any content you may use any of the following rss feeds.</p>
+      <ul>
+        <li><a href="/blog/rss.xml">/blog/rss.xml</a> Blog posts about various topics</li>
+        <li><a href="/projects/rss.xml">/projects/rss.xml</a> Posts about projects I have worked on</li>
+        <li><a href="/rss.xml">/rss.xml</a> All feeds in one</li>
+      </ul>
+      </div>
+		</Main>
+		<Footer />
+	</body>
+
+	<style>
+  </style>
+
+</html>