feat: copy button on blog pages and getting started pages (#487)

Co-authored-by: Stanislav Zhuk <[email protected]>

Author: bmartinez287

astro.config.mjs

@@ -10,6 +10,7 @@ import searchIndex from "./src/lib/search-index.js"
 import sitemap from "@astrojs/sitemap"
 import tailwindcss from "@tailwindcss/vite"
 import widont from "rehype-widont"
+import { addCopyButton } from "shiki-transformer-copy-button"
 
 // https://astro.build/config
 export default defineConfig({
@@ -51,6 +52,14 @@ export default defineConfig({
     // https://github.com/shikijs/shiki/blob/main/docs/languages.md
     shikiConfig: {
       theme: "nord",
+      // You can add options to the transformer here
+      // For example, to change the 'copied' state duration:
+      // toggle: 3000, // 3 seconds
+      transformers: [
+        addCopyButton({
+          // visibility: 'hover', // if you want it to only show on hover
+        }),
+      ],
     },
     remarkPlugins: [remarkReadingTime],
     rehypePlugins: [

package-lock.json

@@ -26,7 +26,7 @@
     "@tailwindcss/vite": "^4.0.3",
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.8",
-    "astro": "^5.16.3",
+    "astro": "^5.16.5",
     "astro-rehype-relative-markdown-links": "^0.17.3",
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.0",
@@ -54,6 +54,7 @@
     "@types/marked": "^4.0.8",
     "dotenv": "^16.3.1",
     "prettier": "^3.6.2",
+    "shiki-transformer-copy-button": "^0.0.5",
     "textlint": "^15.1.0",
     "textlint-filter-rule-comments": "^1.2.2",
     "textlint-rule-no-todo": "^2.0.1",