Treblle · Nelwhix · Oct 9, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+pnpm-lock.yaml
diff --git a/public/check.svg b/public/check.svg
diff --git a/public/clipboard.svg b/public/clipboard.svg
diff --git a/public/copy-btn.css b/public/copy-btn.css
@@ -0,0 +1,29 @@
+.copy-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0.5rem;
+  background-color: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  transition: opacity 0.2s;
+  outline: none;
+  cursor: pointer;
+}
+
+.copy-button[disabled] {
+  display: flex;
+  opacity: 0;
+}
+
+.copy-button:focus,
+.copy-button:hover {
+  opacity: 1;
+}
+
+.copy-icon {
+  height: 1rem;
+  width: 1rem;
+  pointer-events: none;
+}
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -138,6 +138,9 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`
         top: 2rem;
       }
     </style>
+
+    <link rel="stylesheet" href="/copy-btn.css">
+    <script src="../scripts/copy-btn.js"></script>
   </head>
 
   <body>

diff --git a/src/pages/en/integrations/go.mdx b/src/pages/en/integrations/go.mdx
@@ -8,14 +8,14 @@ import TreblleIntegrations from '../../../components/TreblleIntegrations.astro'
 
 ## 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
+    go get github.com/treblle/treblle-go
 ```
 
 ## Basic configuration
@@ -26,13 +26,14 @@ Configure Treblle at the start of your `main()` function:
 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.
+
 }
 
 ```
@@ -49,17 +50,15 @@ mux.Handle("/", treblle.Middleware(http.HandlerFunc(yourHandler)))
 To setup the `treblle.Middleware` in `gorilla/mux`, you can use it as a global middleware:
 
 ```go
-r := mux.NewRouter()
-r.Use(treblle.Middleware)
+    r := mux.NewRouter() r.Use(treblle.Middleware)
 ```
 
 ### 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)))
+    r := mux.NewRouter() r.Handle("/", treblle.Middleware(http.HandlerFunc(yourHandler)))
 ```
 
 ### Subroutes

diff --git a/src/pages/en/integrations/laravel.mdx b/src/pages/en/integrations/laravel.mdx
@@ -46,33 +46,31 @@ You can also visit our website [treblle.com](https://treblle.com) and create a f
 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
+TREBLLE_API_KEY=YOUR_API_KEY TREBLLE_PROJECT_ID=YOUR_PROJECT_ID
 ```
 
 ## 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,
-];
+    protected $middlewareAliases = [ // the rest of your middleware aliases
+  'treblle' => \Treblle\Middlewares\TreblleMiddleware::class, ];
 ```
 
 Open the **routes/api.php** and add the Treblle middleware to either a route group like so:
 
 ```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']);
+});
 
 });
+
 ```
 
 or to an individual route like so:
@@ -98,7 +96,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
+    TREBLLE_IGNORED_ENV=local,dev,test
 ```
 
 Define which environments Treblle should NOT LOG at all. By default, Treblle will log all environments except local, dev
@@ -115,7 +113,7 @@ You can customize this list by editing your configuration file. If you did not p
 this command first:
 
 ```bash
-php artisan vendor:publish --tag=treblle-config
+    php artisan vendor:publish --tag=treblle-config
 ```
 
 This will create a file at `config/treblle.php`. Then, open this file and tweak the masked fields:
@@ -139,7 +137,9 @@ return [
         'credit_score',
         'api_key',
     ],
+
 ];
+
 ```
 
 ## Support
@@ -150,3 +150,4 @@ do our best to help you out.
 ## More Integrations
 
 <TreblleIntegrations />
+```
diff --git a/src/pages/en/integrations/lumen.mdx b/src/pages/en/integrations/lumen.mdx
@@ -22,7 +22,7 @@ import TreblleIntegrations from '../../../components/TreblleIntegrations.astro'
 Install Treblle for Lumen via [Composer](http://getcomposer.org/) by running the following command in your console:
 
 ```bash
-composer require treblle/treblle-lumen
+    composer require treblle/treblle-lumen
 ```
 
 ## Getting started
@@ -34,33 +34,29 @@ Installing Lumen packages is a lot more complicated than Laravel packages and re
 The first thing we need to do is publish the Treblle config file and make sure Lumen loads it. To do that we need to copy/paste the package config file like so:
 
 ```bash
-mkdir -p config
-cp vendor/treblle/treblle-lumen/config/treblle.php config/treblle.php
+    mkdir -p config cp vendor/treblle/treblle-lumen/config/treblle.php config/treblle.php
 ```
 
 Now we can have Lumen load the config file. We do that by adding a new line in `bootstrap/app.php`, under the **Register Config Files** section, like so:
 
 ```php
-$app->configure('treblle');
+    $app->configure('treblle');
 ```
 
 ### Step 2: Register middleware
 
 We need to register the Treblle middleware in Lumen. To do add a new line of code to `bootstrap/app.php`, under the Register Middleware section, like so:
 
 ```php
-$app->routeMiddleware([
-    'treblle' => Treblle\Middlewares\TreblleMiddleware::class
-]);
+    $app->routeMiddleware([ 'treblle' => Treblle\Middlewares\TreblleMiddleware::class ]);
 ```
 
 ### Step 3: Configure Treblle
 
 You need an API key and Project ID for Treblle to work. You can get those by creating a free account on [treblle.com](https://treblle.com) and your first project. You'll get the two keys which you need to add to your `.env` file like so:
 
 ```bash
-TREBLLE_API_KEY=YOUR_API_KEY
-TREBLLE_PROJECT_ID=YOUR_PROJECT_ID
+TREBLLE_API_KEY=YOUR_API_KEY TREBLLE_PROJECT_ID=YOUR_PROJECT_ID
 ```
 
 ## Enable Treblle on your API
@@ -69,8 +65,8 @@ Now that we've installed the package we simply need to enable it. Open **routes/
 
 ```php
 $router->group(['prefix' => 'api', 'middleware' => 'treblle'], function () use ($router) {
-    $router->get('users',  ['uses' => 'UserController@index']);
-    $router->post('users',  ['uses' => 'TestController@store']);
+  $router->get('users',  ['uses' => 'UserController@index']);
+  $router->post('users',  ['uses' => 'TestController@store']);
 });
 ```
 

diff --git a/src/pages/en/integrations/php.mdx b/src/pages/en/integrations/php.mdx
@@ -19,7 +19,7 @@ import TreblleIntegrations from '../../../components/TreblleIntegrations.astro'
 You can install Treblle for PHP via [Composer](http://getcomposer.org/). Simply run the following command:
 
 ```bash
-$ composer require treblle/treblle-php
+    composer require treblle/treblle-php
 ```
 
 ## Getting started
@@ -35,12 +35,13 @@ declare(strict_types=1);
 use GuzzleHttp\Client;
 use Treblle\Factory\TreblleFactory;
 
-require_once __DIR__.'/../vendor/autoload.php';
+require_once **DIR**.'/../vendor/autoload.php';
 
 error_reporting(E_ALL);
 ob_start();
 
 $treblle = TreblleFactory::create('_YOUR_API_KEY_', '_YOUR_PROJECT_ID_');
+
 ```
 
 That's it. Your API requests and responses are now being sent to your Treblle project. Just by adding that line of code
@@ -91,21 +92,23 @@ use GuzzleHttp\Client;
 use Treblle\Factory\TreblleFactory;
 
 // DON'T FORGET TO AUTOLOAD COMPOSER DEPENDENCIES
-require_once __DIR__.'/../vendor/autoload.php';
+require_once **DIR**.'/../vendor/autoload.php';
 
 error_reporting(E_ALL);
 ob_start();
 
-/*
-* Pass an array of words that you would like to be masked
-* as a fourth parameter when initializing Treblle
-*/
-$treblle = TreblleFactory::create(
-    '_YOUR_API_KEY_',
-    '_YOUR_PROJECT_ID_',
-    false, // Debug mode
-    ['keyword', 'maskme', 'sensitive']
-);
+/\*
+
+- Pass an array of words that you would like to be masked
+- as a fourth parameter when initializing Treblle
+  \*/
+  $treblle = TreblleFactory::create(
+  '_YOUR_API_KEY_',
+  '_YOUR_PROJECT_ID_',
+  false, // Debug mode
+  ['keyword', 'maskme', 'sensitive']
+  );
+
 ```
 
 ### Overriding HTTP client and Treblle endpoint URL

diff --git a/src/pages/en/integrations/symfony.mdx b/src/pages/en/integrations/symfony.mdx
@@ -40,15 +40,15 @@ Configure the SDK by adding the following snippet to your project configuration.
 to `app/config/config_prod.yml`. For Symfony 4 or newer add the value to `config/packages/treblle.yaml`.
 
 ```yaml
-treblle:
-  project_id: "%env(TREBLLE_PROJECT_ID)%"
-  api_key: "%env(TREBLLE_API_KEY)%"
-  debug: false
-  masked:
-    - password
-    - api_key
-    - secret
-  endpoint_url: "https://rocknrolla.treblle.com" // optional
+    treblle:
+        project_id: "%env(TREBLLE_PROJECT_ID)%"
+        api_key: "%env(TREBLLE_API_KEY)%"
+        debug: false
+        masked:
+            - password
+            - api_key
+            - secret
+        endpoint_url: "https://rocknrolla.treblle.com" // optional
 ```
 
 ## Overriding data providers

diff --git a/src/scripts/copy-btn.js b/src/scripts/copy-btn.js
@@ -0,0 +1,38 @@
+let copyBtnLabel = '/clipboard.svg'
+let codeBlocks = Array.from(document.querySelectorAll('pre'))
+
+async function copyCode(block, button) {
+  let code = block.querySelector('code')
+  let text = code.innerText
+
+  await navigator.clipboard.writeText(text)
+
+  const clipImage = button.querySelector('img')
+  clipImage.src = '/check.svg'
+
+  setTimeout(() => {
+    clipImage.src = copyBtnLabel
+  }, 2000)
+}
+
+for (let codeBlock of codeBlocks) {
+  let wrapper = document.createElement('div')
+  wrapper.style.position = 'relative'
+
+  let copyBtn = document.createElement('button')
+  copyBtn.className = 'copy-button'
+  let clipImage = document.createElement('img')
+  clipImage.setAttribute('src', copyBtnLabel)
+  clipImage.className = 'copy-icon'
+  copyBtn.appendChild(clipImage)
+
+  codeBlock.setAttribute('tabindex', '0')
+  codeBlock.appendChild(copyBtn)
+
+  codeBlock.parentNode.insertBefore(wrapper, codeBlock)
+  wrapper.appendChild(codeBlock)
+
+  copyBtn.addEventListener('click', async () => {
+    await copyCode(codeBlock, copyBtn)
+  })
+}