feat(integration): adding "copy to clipboard" button to all code blocks

.gitignore

@@ -17,3 +17,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+pnpm-lock.yaml

src/components/CopyBody.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react'
+
+const copyToClipboard = (text: string) => {
+  return new Promise((resolve, reject) => {
+    if (navigator?.clipboard) {
+      const cb = navigator.clipboard
+      cb.writeText(text).then(resolve).catch(reject)
+    }
+  })
+}
+
+interface Props {
+  children: HTMLElement
+}
+
+export default function CopyBody({ children }: Props) {
+  const preRef = useRef<HTMLPreElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setCopied(false), 2000)
+    return () => clearTimeout(timer)
+  }, [copied])
+
+  const handleClickCopy = () => {
+    if (preRef.current?.innerText) {
+      copyToClipboard(preRef.current.innerText)
+      setCopied(true)
+    }
+  }
+
+  return (
+    <div className="relative group">
+      <pre className="bg-[#24292e]" ref={preRef}>
+        <button
+          type="button"
+          disabled={copied}
+          onClick={handleClickCopy}
+          aria-label="Copy to Clipboard"
+          className="absolute space-x-2 top-0 right-0 m-2 hidden transition bg-transparent border rounded-md p-2 focus:outline-none group-hover:flex disabled:flex fade-in"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 pointer-events-none"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            {copied ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
+              />
+            )}
+          </svg>
+        </button>
+
+        {children}
+      </pre>
+    </div>
+  )
+}

src/pages/en/integrations/go.mdx

@@ -5,67 +5,74 @@ layout: ../../../layouts/MainLayout.astro
 ---
 
 import TreblleIntegrations from '../../../components/TreblleIntegrations.astro'
+import CopyBody from '../../../components/CopyBody.tsx'
 
 ## Introduction
 
-Trebble middleware for Go works with applications based on `net/http`.
+Treblle middleware for Go works with applications based on `net/http`.
 
 ## Installation
 
 Trebble uses [Go Modules](https://github.com/golang/go/wiki/Modules) to manage dependencies.
 
-```shell
-go get github.com/treblle/treblle-go
-```
+<CopyBody client:load>
+  ```shell go get github.com/treblle/treblle-go ```
+</CopyBody>
 
 ## Basic configuration
 
 Configure Treblle at the start of your `main()` function:
 
+<CopyBody client:load>
 ```go
 import "github.com/treblle/treblle-go"
 
 func main() {
-	treblle.Configure(treblle.Configuration{
-		APIKey:     "YOUR API KEY HERE",
-		ProjectID:  "YOUR PROJECT ID HERE",
-        AdditionalFieldsToMask: []string{"password", "card_number"}, // optional, specify additional fields to mask
-	}
+treblle.Configure(treblle.Configuration{
+APIKey: "YOUR API KEY HERE",
+ProjectID: "YOUR PROJECT ID HERE",
+AdditionalFieldsToMask: []string{"password", "card_number"}, // optional, specify additional fields to mask
+}
 
     // rest of your program.
+
 }
 
-```
+````
+</CopyBody>
 
 After that, just use the middleware with any of your handlers:
 
+<CopyBody client:load>
 ```go
 mux := http.NewServeMux()
 mux.Handle("/", treblle.Middleware(http.HandlerFunc(yourHandler)))
-```
+````
+
+</CopyBody>
 
 ## gorilla/mux
 
 To setup the `treblle.Middleware` in `gorilla/mux`, you can use it as a global middleware:
 
-```go
-r := mux.NewRouter()
-r.Use(treblle.Middleware)
-```
+<CopyBody client:load>
+  ```go r := mux.NewRouter() r.Use(treblle.Middleware) ```
+</CopyBody>
 
 ### per-route
 
 You can also use `treblle.Middleware` as a per-route middleware just like you will use it with `net/http`:
 
-```go
-r := mux.NewRouter()
-r.Handle("/", treblle.Middleware(http.HandlerFunc(yourHandler)))
-```
+<CopyBody client:load>
+  ```go r := mux.NewRouter() r.Handle("/",
+  treblle.Middleware(http.HandlerFunc(yourHandler))) ```
+</CopyBody>
 
 ### Subroutes
 
 You can also use `treblle.Middleware` on `gorilla/mux` subroutes:
 
+<CopyBody client:load>
 ```go
 r := mux.NewRouter()
 
@@ -74,8 +81,11 @@ apiRouter := r.PathPrefix("/api").Subrouter()
 apiRouter.Use(treblle.Middleware) // Set as a middleware for this subroute
 
 apiRouter.HandleFunc("/users", yourHandler)
+
 ```
+</CopyBody>
 
 ## More Integrations
 
 <TreblleIntegrations />
+```

src/pages/en/integrations/laravel.mdx

@@ -5,6 +5,7 @@ layout: ../../../layouts/MainLayout.astro
 ---
 
 import TreblleIntegrations from '../../../components/TreblleIntegrations.astro'
+import CopyBody from '../../../components/CopyBody.tsx'
 
 ## Features
 
@@ -26,57 +27,56 @@ import TreblleIntegrations from '../../../components/TreblleIntegrations.astro'
 
 Install Treblle for Laravel via [Composer](http://getcomposer.org/) by running the following command in your terminal:
 
-```bash
-composer require treblle/treblle-laravel
-```
+<CopyBody client:load>
+  ```bash composer require treblle/treblle-laravel ```
+</CopyBody>
 
 ## Getting started
 
 You can get started with Treblle **directly from your Artisan console**. Just type in the following command in your
 terminal:
 
-```bash
-php artisan treblle:start
-```
+<CopyBody client:load>```bash php artisan treblle:start ```</CopyBody>
 
 The command guides you through a setup process and allows you to create an account, login to your existing account, create a
 new project and get all the `.env` keys you need to start using Treblle.
 
 You can also visit our website [treblle.com](https://treblle.com) and create a free account to get your API key and Project ID. Once
 you have both your API key and project ID, simply add them to your `.env` file:
 
-```shell
-TREBLLE_API_KEY=YOUR_API_KEY
-TREBLLE_PROJECT_ID=YOUR_PROJECT_ID
-```
+<CopyBody client:load>
+  ```shell TREBLLE_API_KEY=YOUR_API_KEY TREBLLE_PROJECT_ID=YOUR_PROJECT_ID ```
+</CopyBody>
 
 ## Enabling Treblle on your API
 
 Your first step should be to register Treblle into your in your middleware aliases in `app/Http/Kernel.php`:
 
-```php
-protected $middlewareAliases = [
-  // the rest of your middleware aliases
-  'treblle' => \Treblle\Middlewares\TreblleMiddleware::class,
-];
-```
+<CopyBody client:load>
+  ```php protected $middlewareAliases = [ // the rest of your middleware aliases
+  'treblle' => \Treblle\Middlewares\TreblleMiddleware::class, ]; ```
+</CopyBody>
 
 Open the **routes/api.php** and add the Treblle middleware to either a route group like so:
 
+<CopyBody client:load>
 ```php
 Route::middleware(['treblle'])->group(function () {
 
-  // YOUR API ROUTES GO HERE
-  Route::prefix('samples')->group(function () {
-    Route::get('{uuid}', [SampleController::class, 'view']);
-    Route::post('store', [SampleController::class, 'store']);
-  });
+// YOUR API ROUTES GO HERE
+Route::prefix('samples')->group(function () {
+Route::get('{uuid}', [SampleController::class, 'view']);
+Route::post('store', [SampleController::class, 'store']);
+});
 
 });
-```
+
+````
+</CopyBody>
 
 or to an individual route like so:
 
+<CopyBody client:load>
 ```php
 Route::group(function () {
   Route::prefix('users')->group(function () {
@@ -88,7 +88,9 @@ Route::group(function () {
     Route::post('{uuid}/update', [UserController::class, 'update']);
   });
 });
-```
+````
+
+</CopyBody>
 
 You're all set. Next time someone makes a request to your API you will see it in real-time on your Treblle dashboard
 alongside other features like: auto-generated documentation, error tracking, analytics and API quality scoring.
@@ -97,9 +99,7 @@ alongside other features like: auto-generated documentation, error tracking, ana
 
 You can configure Treblle using just `.env` variables:
 
-```shell
-TREBLLE_IGNORED_ENV=local,dev,test
-```
+<CopyBody client:load>```shell TREBLLE_IGNORED_ENV=local,dev,test ```</CopyBody>
 
 Define which environments Treblle should NOT LOG at all. By default, Treblle will log all environments except local, dev
 and test. If you want to change that you can define your own ignored environments by using a comma separated list, or
@@ -114,12 +114,13 @@ password_confirmation, cc, card_number, ccv, ssn, credit_score.
 You can customize this list by editing your configuration file. If you did not published your configuration file, run
 this command first:
 
-```bash
-php artisan vendor:publish --tag=treblle-config
-```
+<CopyBody client:load>
+  ```bash php artisan vendor:publish --tag=treblle-config ```
+</CopyBody>
 
 This will create a file at `config/treblle.php`. Then, open this file and tweak the masked fields:
 
+<CopyBody client:load>
 ```php
 return [
     // ...
@@ -139,8 +140,11 @@ return [
         'credit_score',
         'api_key',
     ],
+
 ];
+
 ```
+</CopyBody>
 
 ## Support
 
@@ -150,3 +154,4 @@ do our best to help you out.
 ## More Integrations
 
 <TreblleIntegrations />
+```