astro

2 posts with the tag “astro”

Copy as Markdown

Oct 19, 2025

Create the React Component

Since Astro components cannot provide interactivity, you need to create a React component called CopyAsMarkdown.tsx which will handle copying the page content to the user’s clipboard.

This component should accept the page’s title and content as props:

CopyAsMarkdown.tsx

import React, { Component, useState } from "react";

export default function CopyAsMarkdown({
  title,
  content,
  children,
}: {
  title: string;
  content?: string;
  children?: React.ReactNode;
}) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    if (!content) return;

    try {
      await navigator.clipboard.writeText(content);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy content: ", err);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: "8px",
      }}
    >
      <h1 id={"_top"}>{title}</h1>
      <button
        onClick={handleCopy}
        disabled={!content}
        style={{
          padding: "6px 12px",
          fontSize: "14px",
          border: "1px solid #ccc",
          borderRadius: "4px",
          backgroundColor: copied ? "#4CAF50" : "#f9f9f9",
          color: copied ? "white" : "#333",
          cursor: content ? "pointer" : "not-allowed",
          opacity: content ? 1 : 0.5,
          transition: "all 0.2s ease",
          alignItems: "center",
          display: "flex",
          gap: "6px",
        }}
      >
        {children && children}
        {copied ? "Copied!" : "Copy as Markdown"}
      </button>
    </div>
  );
}

Create the Astro Component

Create a new component in src/components to replace the default PageTitle component.

This component will use the React component from above. In order to make the React component interactive, you need to add the client:load directive:

PageTitleWithCopyButton.astro

---
import { Icon } from "@astrojs/starlight/components";
import CopyAsMarkdown from "./CopyAsMarkdown";
---

<CopyAsMarkdown
  client:load
  title={Astro.locals.starlightRoute.entry.data.title}
  content={Astro.locals.starlightRoute.entry.body}
>
  <Icon name="document" />
</CopyAsMarkdown>

<style>
  @layer starlight.core {
    h1 {
      margin-top: 1rem;
      font-size: var(--sl-text-h1);
      line-height: var(--sl-line-height-headings);
      font-weight: 600;
      color: var(--sl-color-white);
    }
  }
</style>

Override the PageTitle Component

In your astro.config.mjs file, override the default PageTitle component with the new component you just created:

// @ts-check
import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  integrations: [
    starlight({
      components: {
        PageTitle: "./src/components/PageTitleWithCopyButton.astro",
      },
    }),
    react(),
  ],
});

Tags:

• astro

Add Amplitude Analytics to Astro Website

Jun 15, 2025

There are a handful of blogs about adding Google Analytics to your Astro website and virtually none that do the same for Amplitude. In this post, I’ll show you how to quickly set up Amplitude analytics on an Astro website so you can use all of the marvelous charting tools Amplitude has to offer.

Create a New Amplitude Project

In the Amplitude dashboard, navigate to Settings -> Organization Settings -> Projects and create a new project for your website or blog. Copy the API key for the next steps.

Install Partytown

In your Astro project, run the following command to install the Partytown plugin:

npx astro add partytown

This will add the Partytown plugin to your astro.config.js file:

astro.config.js

import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  // ...
  integrations: [
    partytown(),
  ],
});

For this to work, you’ll need to add the following line to the plugin setup:

export default defineConfig({
  // ...
  integrations: [
    partytown(
        config: { forward: ["amplitude", "amplitude.init"] },
    ),
  ],
});

Because Partytown scripts run in a separate web worker, you need to tell Partytown what variables it needs to forward to the window object.

Add the Amplitude Scripts

In a shared head component, add the following two scripts

BaseHead.astro

<script
  is:inline
  type="text/partytown"
  src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"
></script>

<script is:inline type="text/javascript">
  window.amplitude = window.amplitude || {};
  window.amplitude.init =
    window.amplitude.init ||
    function () {
      (window.amplitude._q = window.amplitude._q || []).push(arguments);
    };

  window.amplitude.init("AMPLITUDE_API_KEY", {
    autocapture: true,
  });
</script>

Remember to replace AMPLITUDE_API_KEY with your API key from step 1

Deploy and Track

This is basically all you need to start tracking website traffic. With the autocapture flag set to true, Amplitude will track page views, button clicks, and digital demographics.

In the Amplitude dashboard, you can use a pre-built dashboard to start monitoring your website. I like the “User Activity” dashboard which gives you information like:

• Daily active users
• Daily new users
• Returning users
• Average session length
• Device breakdown

Happy coding ☕️

Tags:

• astro