working on og images

astro.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
       Head: "./src/components/NHead.astro",
       PageTitle: "./src/components/PageTitle.astro",
       PageFrame: "./src/components/PageFrame.astro",
+      Sidebar: "./src/components/Sidebar.astro"
     },
     plugins: [starlightImageZoom()],
     tableOfContents: {

bin/og.sh

@@ -0,0 +1,13 @@
+#! /bin/bash
+
+find dist -type f -name "*.html" -exec grep -H  -o '"og:url" content="[^"]*"' {} \; | sed -e 's/:/ /' -e 's/=/ /' -e 's/"//g' -e 's|og:url content https://vtbag.dev||' > pages
+
+awk < pages '{print "test(\"" $2 "\", async ({ page }) => {await shoot(page, \"" $2 "\")});"; system("mkdir -p public/" $2);}' | sort
+
+awk < pages '{print $1, $2}' | while read -r file url ; do
+  cmd="s|<meta property=\"og:image\" content=\"[^\"]*\">|<meta property=\"og:image\" content=\"${url}og.png\">|"
+  sed -i.bak -e "${cmd}" $file
+done
+
+
+

public/bag-og.png

@@ -0,0 +1 @@
+../src/assets/cards/bag.png

public/chamber-og.png

@@ -0,0 +1 @@
+../src/assets/cards/chamber.png

public/crossing-og.png

@@ -0,0 +1 @@
+../src/assets/cards/crossing.png

public/shaft-og.png

@@ -0,0 +1 @@
+../src/assets/cards/shaft.png

public/signal-og.png

@@ -0,0 +1 @@
+../src/assets/cards/signal.png

src/components/Bsky.astro

@@ -1,9 +1,53 @@
 ---
-export interface Props {
-  text: string;
-}
-const { text } = Astro.props;
+const choices = [
+  "Checking out [URL] and wanted to share ",
+  "On [URL] and thought I'd share ",
+  "Found something on [URL] ",
+  "Diving into [URL] I'm wondering ",
+  "Currently on [URL] and had to share my thoughts: ",
+  "Taking a look at [URL]. Let's talk about it. ",
+  "Here's what I think checking out [URL]: ",
+  "Just read [URL] and figured ",
+  "When exploring [URL], here's what comes to mind ",
+];
+const text =
+  choices[~~(Math.random() * choices.length)]?.replace(
+    "[URL]",
+    `vtbag.dev${Astro.url.pathname}`
+  ) ?? "";
 const encodedText = encodeURIComponent(text);
 ---
 
-<a target="_blank" href={`https://bsky.app/intent/compose?text=${encodedText}`}><slot /></a>
+<a
+  class="button-link not-content"
+  target="_blank"
+  href={`https://bsky.app/intent/compose?text=${encodedText}`}
+  ><span>Discuss on <b>🦋</b></span></a
+>
+
+<style>
+  .button-link span {
+    view-transition-name: bskyText;
+    display: inline-block;
+    margin-inline: auto;
+    font-size: 1rem;
+    padding: 3px 10px;
+    text-decoration: none;
+  }
+  .button-link {
+    view-transition-name: bsky;
+    color: #fff;
+    text-align:  center;
+    display: inline-block;
+    background-color: var(--sl-color-accent-low);
+    border: 2px solid var(--sl-color-accent);
+    border-radius: 8px;
+    box-shadow:
+      inset 1px 1px 5px var(--sl-color-gray-6),
+      1px 1px 2px var(--sl-color-gray-1);
+    transition:
+      background-color 0.3s ease,
+      box-shadow 0.3s ease;
+  }
+
+</style>

src/components/NHead.astro

@@ -3,11 +3,14 @@ import type { Props } from "@astrojs/starlight/props";
 import StarlightHead from "@astrojs/starlight/components/Head.astro";
 import turnSignal from "@vtbag/turn-signal?url";
 import camShaft from "@vtbag/cam-shaft?url";
+import PagefindToTextFragments from "./PagefindToTextFragments.astro";
 import "./vtbag-bar.css";
 ---
 
 <StarlightHead {...Astro.props}><slot /></StarlightHead>
 
+<PagefindToTextFragments />
+
 { // @ts-ignore
 <link rel="expect" href="#the_unexpected" blocking="render"/>}
 

src/components/PagefindToTextFragments.astro

@@ -0,0 +1,80 @@
+---
+
+---
+
+<script>
+  const targetAnchor = (e: Event) => {
+    let anchor: HTMLAnchorElement | null = null;
+    let target: HTMLElement | null = e.target as HTMLElement;
+    if (target instanceof HTMLElement) {
+      target = target.closest(`p[class*="pagefind-ui__result-excerpt"]`);
+      if (target instanceof HTMLElement) {
+        anchor = target.parentElement!.querySelector("a");
+      }
+    }
+    return { target, anchor };
+  };
+
+  function jumpToTextFragment(e: MouseEvent) {
+    const { target, anchor } = targetAnchor(e);
+    if (!target || !anchor) return;
+    const originalHash = anchor.hash;
+    if ("fragmentDirective" in document) {
+      let excerpt = target.innerText.replace(/\s+\d+\./g, ".");
+      let fragment = "";
+      const split = excerpt
+        .split(/[?\.:!…](\s+|$)/g)
+        .filter((x) => x.length > 0);
+      if (split.length > 0) {
+        fragment =
+          "#:~:text=" +
+          encodeURIComponentPlus(
+            split.sort((a, b) => b.length - a.length)[0] ?? ""
+          );
+        anchor.hash = fragment;
+      }
+    }
+    anchor.click();
+    anchor.hash = originalHash;
+  }
+
+  document.addEventListener("click", (e) => {
+    jumpToTextFragment(e);
+  });
+
+  function encodeURIComponentPlus(str: string) {
+    var replacements = {
+      "'": "%27",
+      "(": "%28",
+      ")": "%29",
+      "*": "%2a",
+      "-": "%2d",
+      _: "%5f",
+      "~": "%7e",
+    } as Record<string, string>;
+
+    return encodeURIComponent(str)
+      .split("")
+      .map((c) => replacements[c] || c)
+      .join("");
+  }
+</script>
+
+<style is:global>
+  .pagefind-ui__result-excerpt.svelte-4xnkmf.svelte-4xnkmf,
+  .pagefind-ui__result-excerpt.svelte-j9e30.svelte-j9e30 {
+    cursor: pointer;
+  }
+  html body #starlight__search .pagefind-ui__result-link::after {
+    content: none;
+  }
+
+  .pagefind-ui__result-inner.svelte-4xnkmf.svelte-4xnkmf
+    > .pagefind-ui__result-excerpt.svelte-4xnkmf.svelte-4xnkmf {
+    margin-top: 0px;
+    padding: var(--sl-search-result-nested-pad-block)
+      var(--sl-search-result-pad-inline-end)
+      var(--sl-search-result-nested-pad-block) 1rem;
+    background-color: var(--sl-color-black);
+  }
+</style>

src/components/Sidebar.astro

@@ -0,0 +1,8 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/Sidebar.astro';
+import Bsky from "./Bsky.astro";
+---
+
+{Astro.url.pathname !== "/" && <Bsky/>}
+<div style="view-transition-name: sl-sidebar"><Default {...Astro.props}><slot /></Default></div>

src/content/docs/basics/api.mdx

@@ -12,6 +12,7 @@ I made a start with …
 
 While I add more pages, I'm also happy that I can offer some links to previous work on the `astro-vtbot` package[^1].
 
+* [References](https://events-3bg.pages.dev/jotter/api/references/) to the specs and interesting articles beyond
 * An [Overview](https://events-3bg.pages.dev/jotter/api/) and a [Details](https://events-3bg.pages.dev/jotter/api/details/) article on the API
 * An in depth [same-document example](https://events-3bg.pages.dev/jotter/api/example/)
 

src/content/docs/index.mdx

@@ -47,19 +47,20 @@ import Bsky from "../../components/Bsky.astro";
   }
 `}</style>
 
-<p class="smallCTA">If you're enjoying this site, please <a target="_blank" href="https://bsky.app/profile/martr.app">follow me</a> and <a target="_blank" href="https://bsky.app/profile/vtbag.dev">The Bag</a> on <span>🦋</span>  Bluesky! <br /><br />And maybe you want to <Bsky text="Just checked out the vtbag.dev site of @vtbag.dev and want to share ...">share something with your followers</Bsky> <span>🦋</span> about this site?</p>
+<p class="smallCTA">Spark up a discussion on <span><b>🦋</b></span> Bluesky! Hit the <Bsky/> buttons to share your thoughts and please stay connected with
+<a target="_blank" href="https://bsky.app/profile/vtbag.dev">The Bag</a> and <a target="_blank" href="https://bsky.app/profile/martr.app">me</a> for  all the latest!</p>
 
 <style>{`
   p {
     max-width: 70%;
     margin-inline: auto;
   }
-  p span {
-    view-transition-name: butterfly2;
-  }
-  p span:first-of-type {
+  p span b {
     view-transition-name: butterfly1;
   }
+  p a span b {
+    view-transition-name: butterfly2;
+  }
   ::view-transition-new(butterfly1) {
     animation: 1s both ease-out butterfly1;
   }