done with the copy button. Need to fix the positioning tho, when scrolling it moves instead of being fixed to the top right

Author: michaelessiet

package-lock.json

@@ -54,7 +54,8 @@
     "compression": "^1.7.4",
     "connect": "^3.7.0",
     "debug": "^4.3.4",
-    "sirv": "^2.0.2"
+    "sirv": "^2.0.2",
+    "solid-icons": "^1.0.4"
   },
   "engines": {
     "node": ">=16"

package.json

@@ -0,0 +1,26 @@
+import { BiSolidCopy } from "solid-icons/bi";
+import { createSignal, Show } from "solid-js";
+
+interface Props {
+  parentRef: HTMLPreElement;
+}
+
+function CopyButton(props: Props) {
+  const [copied, setCopied] = createSignal(false);
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(props.parentRef.innerText);
+    setCopied(true);
+    setInterval(() => setCopied(false), 2000);
+  }
+
+  return (
+    <button onclick={copyToClipboard} class="absolute top-4 right-4">
+      <Show when={copied()} fallback={<BiSolidCopy size={24} />}>
+        Copied!
+      </Show>
+    </button>
+  );
+}
+
+export default CopyButton;

src/components/CopyButton.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, useContext } from "solid-js";
-import { CodeFormat, ConfigContext } from "./context/ConfigContext";
+import { JSXElement, useContext } from "solid-js";
+import { ConfigContext } from "./context/ConfigContext";
 
-const Container = (props: PropsWithChildren) => {
+const Container = (props: {children:JSXElement}) => {
   const [config, setConfig] = useContext(ConfigContext);
 
   return (
@@ -37,7 +37,7 @@ const Container = (props: PropsWithChildren) => {
   );
 };
 
-const Code = (props: PropsWithChildren<{ language: CodeFormat }>) => {
+const Code = (props: { language: string, children: JSXElement }) => {
   const [config] = useContext(ConfigContext);
   return (
     <div

src/components/Snippet.tsx

@@ -6,6 +6,8 @@ import "tippy.js/dist/tippy.css";
 import { Title } from "./components/Main";
 import { Title as MetaTitle } from "@solidjs/meta";
 import { usePageState } from "~/components/context/PageStateContext";
+import { BiSolidCopy } from "solid-icons/bi";
+import CopyButton from "./components/CopyButton";
 
 function Anchor(props: ParentProps<{ id: string }>) {
   return (
@@ -127,31 +129,37 @@ export default {
       </code>
     );
   },
-  pre: (props) => (
-    <>
-      {/* <Show when={props.filename?.length > 5}>
+  pre: (props) => {
+    let ref: HTMLPreElement;
+
+    return (
+      <>
+        {/* <Show when={props.filename?.length > 5}>
         <span {...props} class="h-4 p-1">
           {props.filename}
         </span>
       </Show> */}
-      <pre
-        {...mergeProps(props, {
-          get class() {
-            return (
-              props.className +
-              " " +
-              (props.bad ? "border-red-400 border-1" : "")
-            );
-          },
-          get className() {
-            return undefined;
-          },
-        })}
-      >
-        {props.children}
-      </pre>
-    </>
-  ),
+        <pre
+          {...mergeProps(props, {
+            get class() {
+              return (
+                props.className +
+                " " +
+                (props.bad ? "border-red-400 border-1" : "")
+              );
+            },
+            get className() {
+              return undefined;
+            },
+          })}
+          ref={ref}
+        >
+          <CopyButton parentRef={ref}/>
+          {props.children}
+        </pre>
+      </>
+    );
+  },
   table: (props) => (
     <table class="w-full max-w-full <sm:portrait:text-xs my-6 rounded-1xl dark:bg-[rgba(17,24,39,1)] shadow-lg text-left overflow-hidden">
       {props.children}
@@ -163,7 +171,9 @@ export default {
   ),
   td: (props) => <td class="p-4 <sm:p-2">{props.children}</td>,
   tr: (props) => (
-    <tr class="dark:even-of-type:bg-[#23406e] light:even-of-type:bg-[#90C2E7]">{props.children}</tr>
+    <tr class="dark:even-of-type:bg-[#23406e] light:even-of-type:bg-[#90C2E7]">
+      {props.children}
+    </tr>
   ),
   "data-lsp": (props) => {
     const id = createUniqueId();