Add comments and css code highlight (minor changes)

astro.config.mjs

@@ -14,7 +14,7 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [remarkBreaks],
     shikiConfig: {
-      theme: shikiTheme,
+      theme: 'css-variables',
     }
   },
   vite: {

src/components/BlogPostCard.astro

@@ -132,10 +132,9 @@ const dateFormatOption = {
     color: var(--heading);
   }
 
-  .blog-entry:not(:has(.coverImage)) {
+  :global(.first) .blog-entry:not(:has(.coverImage)) {
     h2 {
       font-size: var(--font-size-xl);
-      margin-block-end: 1em;
     }
   }
   .blog-entry .details {

src/components/codeembed.astro

@@ -0,0 +1,19 @@
+---
+import { Code } from 'astro:components';
+
+interface Props {
+  url: string;
+  lang: string;
+}
+
+const codeUrl = async (url: string) => {
+  const code = await fetch(url).then((res) => res.text());
+  return code;
+};
+
+const { url, lang } = Astro.props;
+const code = await codeUrl(url);
+---
+
+<Code code={code} lang={lang} theme="css-variables" />
+

src/components/comint/index.tsx

@@ -0,0 +1,93 @@
+import { createEffect, createResource } from "solid-js";
+import styles from './style.module.css';
+
+const instance = 'https://fosstodon.org';
+const fetchComments = async (id: string) => {
+  const url = instance + '/api/v1/statuses/' + id + '/context';
+
+  const response = await fetch(url);
+  return (await response.json()) as {
+    ancestors: Comment[];
+    descendants: Comment[];
+  };
+}
+
+interface Comment {
+  account: {
+    display_name: string;
+    avatar_static: string;
+    url: string;
+  };
+  content: string;
+  created_at: string;
+  uri: string;
+  url: string;
+  replies_count: number;
+  reblogs_count: number;
+  favourites_count: number;
+}
+
+const Comment = (props: { comment: Comment }) => {
+  return (
+    <article class={styles.comment + ' theme-card'}>
+      <header>
+        <div>
+          <img src={props.comment.account.avatar_static} alt="" width="32" height="32" />
+          <h3>
+            <a href={props.comment.account.url}>
+              {props.comment.account.display_name}
+            </a>
+          </h3>
+        </div>
+        {props.comment.created_at &&
+          <p>
+            <a href={props.comment.url}>
+              {(new Date(props.comment.created_at)).toDateString()}
+            </a>
+          </p>
+        }
+      </header>
+      <div>
+        <div class={styles.ccontent} innerHTML={props.comment.content} />
+        <div class={styles.meta}>
+          <a href={props.comment.url}>
+            {props.comment.replies_count} Replies, {' '}
+            {props.comment.reblogs_count} Reblogs, {' '}
+            {props.comment.favourites_count} Favourites
+          </a>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export const Commint = (props: { tootId: string }) => {
+  // console.log('COMMINT');
+
+  const [data, { refetch, }] = createResource(async () => fetchComments(props.tootId));
+
+  createEffect(() => {
+    const d = data();
+    console.log({ d });
+  });
+  return (
+    <div>
+      {data.loading && <p>Loading...</p>}
+      {data.error && <p>Error: {data.error}</p>}
+      {data() && (
+        <>
+          <h2>Comments:</h2>
+          <p>
+            <a href={instance + '/web/statuses/' + props.tootId}>View on Mastodon</a>
+          </p>
+          <br />
+          <div class={styles.comments}>
+            {data()!.descendants.map((comment: Comment) => (
+              <Comment comment={comment} />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/comint/style.module.css

@@ -0,0 +1,55 @@
+.comments {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.comment {
+  padding: 1em;
+  border-radius: calc(2 * var(--border-radius));
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    > div {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+    h3,
+    p {
+      margin: 0;
+    }
+    img {
+      width: 2rem;
+      height: 2rem;
+      border-radius: 50%;
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin: 0;
+    }
+  }
+
+  .ccontent {
+    padding: 0.5em;
+    p {
+      margin: 0.5em 0;
+    }
+  }
+
+  .meta {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.5em;
+    font-size: 0.8em;
+    color: #666;
+
+    a {
+      text-decoration: none;
+      border-bottom: none;
+    }
+  }
+}

src/components/images/homeIcon.astro

@@ -21,7 +21,7 @@ const { type } = Astro.props;
   padding-inline-start: 1em;
 }
 .home-icon :global(svg) {
-  height: auto;
+  height: 12em;
   width: 66%;
 }
 .home-icon :global(svg .surface-fill) {

src/content/blog/comments-via-mastodon.mdx

@@ -0,0 +1,42 @@
+---
+title: 'Comments via Mastodon'
+date: 2024-10-13
+description: "Replaced comments with Mastodon's context API calls."
+
+categories: ["tech"]
+tags: ["tech", "software"]
+
+tootId: "113034812167024055"
+hideTOC: true
+---
+
+import CodeEmbed from '../../components/codeembed.astro';
+
+I have replaced the comment mechanism of this website again.
+
+I looked into [Webmentions](https://indieweb.org/webmention) but the setup was quite complex. I want to add it later.
+
+Now the comments are raw calls to the mastodon context APIs. There is a slight technicality in updating the `tootId` in the post frontmatter, but when set it will fetch and render the comments on client side (so they will be latest).
+
+Old comments are available in the [old repo's issues](https://github.com/xypnox/blag_zola/issues). 
+
+Earlier people needed a github account to post comments, now they need a mastodon/fediverse account instead.
+
+
+Here is the [basic Solid component](https://) I wrote for rendering comments:
+
+<CodeEmbed url="https://raw.githubusercontent.com/xypnox/xypnox.github.io/refs/heads/v2/src/theme.ts" lang="ts" />
+
+And the code embed component (because why not):
+
+<CodeEmbed url="https://raw.githubusercontent.com/xypnox/xypnox.github.io/refs/heads/v2/src/theme.ts" lang="astro" />
+
+Currently apart from the user profile image, the data is rendered in plain text, no icons.
+
+Also new is the css based syntax highlighting from github code blocks as seen above.
+
+With these changes, the site is now entirely customizable in terms of colors and fonts. The code blocks and comments were the last remaining parts that did not use the theme variables.
+
+
+
+Hopefully you will find comments below.

src/content/blog/governmint-wobsite-bad.md

@@ -6,6 +6,7 @@ description: 'Why are government websites bad?'
 categories: ["tech", "culture"]
 tags: ["tech", "culture", "software"]
 
+tootId: "113034812167024055"
 hideTOC: true
 ---
 

src/content/config.ts

@@ -1,31 +1,34 @@
-import { z, defineCollection } from 'astro:content';
+import { z, defineCollection } from "astro:content";
 
 const blog = defineCollection({
-  schema: ({ image }) => z.object({
-    title: z.string(),
-    date: z.date(),
-    description: z.string().optional(),
-    tags: z.array(z.string()).optional(),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      date: z.date(),
+      description: z.string().optional(),
+      tags: z.array(z.string()).optional(),
 
-    categories: z.array(z.string()).optional(),
+      categories: z.array(z.string()).optional(),
 
-    // Image to show in blog list and intro image in blog post
-    coverImage: image().optional(),
-    coverAlt: z.string().optional(),
-    socialImage: image().optional(), // will use coverImage or default
-    hidden: z.boolean().optional(), // will default to false
+      // Image to show in blog list and intro image in blog post
+      coverImage: image().optional(),
+      coverAlt: z.string().optional(),
+      socialImage: image().optional(), // will use coverImage or default
+      hidden: z.boolean().optional(), // will default to false
 
-    hideTOC: z.boolean().optional(), // will default to false
-  }),
-})
+      tootId: z.string().optional(), // to show the comments from mastodon toot
 
-const poems = defineCollection({
-  schema: () => z.object({
-    title: z.string(),
-    date: z.date(),
-    hidden: z.boolean().optional(), // will default to false
-  }),
-})
+      hideTOC: z.boolean().optional(), // will default to false
+    }),
+});
 
-export const collections = { blog, poems }
+const poems = defineCollection({
+  schema: () =>
+    z.object({
+      title: z.string(),
+      date: z.date(),
+      hidden: z.boolean().optional(), // will default to false
+    }),
+});
 
+export const collections = { blog, poems };

src/layouts/MainLayout.astro

@@ -145,4 +145,18 @@ const props = Astro.props;
       font-size: var(--font-size-base);
     }
   }
+
+  .astro-code {
+    --astro-code-color-text: var(--text);
+    --astro-code-color-background: var(--background);
+    --astro-code-token-constant: var(--primary-color);
+    --astro-code-token-string: var(--heading);
+    --astro-code-token-comment: var(--fadeText);
+    --astro-code-token-keyword: var(--primary-color);
+    --astro-code-token-parameter: var(--heading);
+    --astro-code-token-function: var(--primary-color);
+    --astro-code-token-string-expression: var(--heading);
+    --astro-code-token-punctuation: var(--fadeText);
+    --astro-code-token-link: var(--primary-color);
+  }
 </style>

src/pages/blag/posts/[...slug].astro

@@ -3,6 +3,7 @@ import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 import Layout from "../../../layouts/MainLayout.astro";
 import Toc from "../../../components/Toc.astro";
+import { Commint } from "../../../components/comint";
 import Tag from "../../../components/nav/Tag.astro";
 import { blogStaticPaths } from "../../../lib/dataAstro";
 
@@ -98,16 +99,7 @@ console.log({ entryD: entry.data });
         ❦
         <p>Sooner or later, everything ends.</p>
       </div>
-      <h2>Comments</h2>
-      <script
-        is:inline
-        src="https://utteranc.es/client.js"
-        repo="xypnox/blag_zola"
-        issue-term="pathname"
-        label="comments"
-        theme="photon-dark"
-        crossorigin="anonymous"
-        async></script>
+      {entry.data.tootId && <Commint tootId={entry.data.tootId} client:load />
     </div>
     {
       headings.length > 0 && entry.data.hideTOC !== true && (
@@ -185,8 +177,8 @@ console.log({ entryD: entry.data });
     max-width: var(--layout-content-main);
     width: 100%;
     margin: 0 auto;
-    line-height: 1.5;
-    font-size: 1.2rem;
+    line-height: 1.6;
+    font-size: 1.1em;
   }
 
   blockquote.hidden-post {
@@ -252,9 +244,6 @@ console.log({ entryD: entry.data });
       max-width: 800px;
       position: relative;
     }
-    .content {
-      font-size: 1rem;
-    }
   }
 
   @media (max-width: 390px) {

src/pages/design/index.astro

@@ -15,9 +15,9 @@ const designSections = [
     slug: "https://posters.xypnox.com",
   },
   {
-    name: "Experiments",
+    name: "Blag Posts",
     image: "/design-covers/exp.webp",
-    slug: "https://xypnox.studio",
+    slug: "/blag/tags/design/",
   },
 ];
 ---

src/pages/index.astro

@@ -28,7 +28,7 @@ import LatestBlog from "../components/latestBlog.astro";
           { title: "agenc", href: "https://agenc.xyp.one", desc: "A system for online services" },
           { title: "Tools", href: "/tools/", desc: "A collection of utilities" },
           // { title: "Experiments", href: "https://xypnox.studio", desc: "A place to experiment with frontend" },
-          { title: "Repositories", href: "https://github.com/xypnox?tab=repositories", desc: "Repositories and open code" },
+          { title: "Repositories", href: "https://github.com/xypnox", desc: "Repositories and open code" },
           { title: "dotfiles", href: "https://github.com/xypnox/dotfiles", desc: "Configuration files for system" },
         ]}
       >