Merge branch 'main' into mobile

Author: filipslezaklab

package.json

@@ -47,7 +47,8 @@
     "rehype-external-links": "^2.1.0",
     "rehype-raw": "^7.0.0",
     "sass": "^1.89.2",
-    "sharp": "0.33.5",
+    "sharp": "0.34.0",
+    "shiki": "^3.8.1",
     "short-unique-id": "^5.3.2",
     "slick-carousel": "^1.8.1",
     "typescript": "^5.8.3",

public/images/iot/IoT.png

@@ -0,0 +1,98 @@
+---
+import { codeToHtml } from 'shiki';
+
+const { code, lang = "bash" } = Astro.props;
+const highlighted = await codeToHtml(code, {
+  lang,
+  theme: 'github-light'
+});
+---
+
+<div class="code-block-wrapper">
+  <button class="copy-button" data-code={code} title="Copy code">
+    <i class="lni lni-clipboard"></i>
+  </button>
+  <Fragment set:html={highlighted} />
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const copyButtons = document.querySelectorAll('.copy-button');
+    
+    copyButtons.forEach(button => {
+      button.addEventListener('click', async function(this: HTMLButtonElement) {
+        const code = this.dataset.code;
+        const icon = this.querySelector('i');
+        
+        if (!code || !icon) return;
+        
+        try {
+          await navigator.clipboard.writeText(code);
+          
+          // Change icon to checkmark
+          icon.className = 'lni lni-checkmark';
+          
+          // Reset icon after 2 seconds
+          setTimeout(() => {
+            icon.className = 'lni lni-clipboard';
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy text: ', err);
+        }
+      });
+    });
+  });
+</script>
+
+<style lang="scss">
+.code-block-wrapper {
+  position: relative;
+  
+  .copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 10;
+    background: var(--surface-frame-bg);
+    border: 1px solid var(--border-separator);
+    border-radius: 4px;
+    padding: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    
+    &:hover {
+      opacity: 1;
+      background: var(--surface-main-primary);
+      color: white;
+      transform: translateY(-1px);
+    }
+    
+    i {
+      font-size: 1rem;
+      color: inherit;
+    }
+  }
+}
+
+:global(pre) {
+  background: var(--code-bg, #fff);
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: hidden;
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+:global(code) {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.666em;
+  font-weight: 300;
+  background: var(--code-bg, #fff);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+}
+</style>

public/images/iot/acl.png

@@ -18,13 +18,14 @@
     "external": false
   },
   {
-    "display": "Compare",
-    "url": "/compare/",
-    "prefetch": true
+    "display": "IoT",
+    "url": "/iot/",
+    "prefetch": true,
+    "external": false
   },
   {
     "display": "Enterprise",
-    "url": "https://docs.defguard.net/enterprise",
+    "url": "https://docs.defguard.net/enterprise/enterprise-features",
     "prefetch": false,
     "external": true
   },

public/images/iot/manage.png

@@ -60,7 +60,7 @@ const { trustedBy = true, title, description, buttons = [], repo = "defguard", s
 
 <style lang="scss" is:global>
   #home-header {
-    padding-bottom: page-spacing(60px);
+    padding-bottom: page-spacing(30px);
     padding-top: 50px;
 
     & > p {