Merge pull request #164 from annkots/master

Imunify doc updates

Author: annkots

docs/.vuepress/client.ts

@@ -1,6 +1,7 @@
-import {provide} from "vue";
-import {defineClientConfig} from "@vuepress/client";
+import { provide } from "vue";
+import { defineClientConfig } from "@vuepress/client";
 import mitt from 'mitt';
+import copyCodeMixin from './mixins/copyCodeMixin.js';
 
 import Layout from "./theme/layouts/Layout.vue";
 import HomeLayout from "./theme/layouts/HomeLayout.vue";
@@ -16,11 +17,12 @@ import CodeTabs from "./components/CodeTabs.vue";
 import CodeWithCopy from "./components/CodeWithCopy.vue";
 
 export default defineClientConfig({
-        rootComponents: [
+    rootComponents: [
         Chat,
     ],
     async enhance({ app }) {
         app.config.globalProperties.$eventBus = mitt();
+        app.mixin(copyCodeMixin);
     },
     layouts: {
         Layout,

docs/.vuepress/mixins/copyCodeMixin.js

@@ -0,0 +1,63 @@
+// Auto-add copy buttons to all code blocks
+export default {
+    mounted() {
+        this.addCopyButtons();
+    },
+    updated() {
+        this.addCopyButtons();
+    },
+    methods: {
+        addCopyButtons() {
+            // Find all code blocks that don't already have a copy button
+            const codeBlocks = document.querySelectorAll('div[class*="language-"]:not(.has-copy-button)');
+
+            codeBlocks.forEach((block) => {
+                // Mark this block as having a copy button
+                block.classList.add('has-copy-button');
+
+                // Create copy button
+                const button = document.createElement('button');
+                button.className = 'copy-code-button';
+                button.setAttribute('aria-label', 'Copy code');
+                button.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon">
+            <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
+            <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
+          </svg>
+        `;
+
+                // Add click handler
+                button.addEventListener('click', () => {
+                    const code = block.querySelector('pre code');
+                    if (code) {
+                        const text = code.innerText;
+                        navigator.clipboard.writeText(text).then(() => {
+                            // Show success state
+                            button.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon copied">
+                  <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
+                </svg>
+              `;
+                            button.classList.add('copied');
+
+                            // Reset after 2 seconds
+                            setTimeout(() => {
+                                button.innerHTML = `
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="copy-icon">
+                    <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
+                    <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
+                  </svg>
+                `;
+                                button.classList.remove('copied');
+                            }, 2000);
+                        });
+                    }
+                });
+
+                // Add button to code block
+                block.style.position = 'relative';
+                block.appendChild(button);
+            });
+        }
+    }
+};

docs/.vuepress/public/images/proactivedefenseui.png

@@ -242,6 +242,35 @@ badge[type="danger"]
   &:before
     content: attr(text);
 
+// Copy code button styling
+.copy-code-button
+  position: absolute
+  top: 0.5rem
+  right: 0.5rem
+  background: transparent
+  border: none
+  cursor: pointer
+  padding: 0.25rem
+  z-index: 10
+  opacity: 0
+  transition: opacity 0.2s ease
+
+  .copy-icon
+    fill: #ccc
+    width: 18px
+    height: 18px
+    transition: fill 0.2s ease
+
+  &:hover .copy-icon
+    fill: $mainColor
+
+  &.copied .copy-icon
+    fill: $mainColor
+
+div[class*="language-"]
+  &:hover .copy-code-button
+    opacity: 1
+
 @media (max-width: $mobileBreakpoint)
   .content:not(.custom)
     width 100%

docs/.vuepress/styles/theme.styl

@@ -1567,7 +1567,7 @@ The general structure of the <span class="notranslate">`imunify360-agent notific
 
 <div class="notranslate">
 
-```json
+```
 {
    "rules": {
       "SCRIPT_BLOCKED": {
@@ -1671,7 +1671,7 @@ Let's review all options for a specific event on the <span class="notranslate">R
 
 <div class="notranslate">
 
-```json
+```
    "REALTIME_MALWARE_FOUND": {
       "SCRIPT": {
          "scripts": [], 
@@ -1725,7 +1725,7 @@ The <span class="notranslate">`imunify360-agent notifications-config show`</span
 
 <div class="notranslate">
 
-```json
+```
 {
    "rules": {
       "SCRIPT_BLOCKED": {
@@ -1833,7 +1833,7 @@ The <span class="notranslate">`imunify360-agent notifications-config show`</span
 
 <div class="notranslate">
 
-```json
+```
 {
    "rules": {
       "CUSTOM_SCAN_MALWARE_FOUND": {

docs/command_line_interface/README.md

@@ -778,7 +778,7 @@ Proactive Defense requires [Hardened PHP](/dashboard/#installation) (alt-php) to
 
 Go to <span class="notranslate">Imunify360 → Proactive Defense</span>.
 
-![](/images/proactivedefensemain_zoom70.png)
+![](/images/proactivedefenseui.png)
 
 Here you can set a mode, view detected events and perform actions on them.