install system dependencies on linux in CI workflow

Add VST search functionality

.github/workflows/create-release.yml

@@ -46,6 +46,21 @@ jobs:
           version: "0.9.7"
           enable-cache: true
 
+      - name: Install system dependencies (Linux)
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libxcb-xinerama0 \
+            libxkbcommon-x11-0 \
+            libxcb-cursor0 \
+            libxcb-keysyms1 \
+            libxcb-render-util0 \
+            libxcb-icccm4 \
+            libxcb-image0 \
+            libxcb-shape0 \
+            libxcb-util1
+
       - name: Install Python dependencies
         run: |
           uv pip install -r requirements.txt

.github/workflows/dev.yml

@@ -51,6 +51,21 @@ jobs:
           version: "0.9.7"
           enable-cache: true
 
+      - name: Install system dependencies (Linux)
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libxcb-xinerama0 \
+            libxkbcommon-x11-0 \
+            libxcb-cursor0 \
+            libxcb-keysyms1 \
+            libxcb-render-util0 \
+            libxcb-icccm4 \
+            libxcb-image0 \
+            libxcb-shape0 \
+            libxcb-util1
+
       - name: Install Python dependencies
         run: |
           uv pip install -r requirements.txt

.github/workflows/test.yml

@@ -41,6 +41,21 @@ jobs:
           version: "0.9.7"
           enable-cache: true
 
+      - name: Install system dependencies (Linux)
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libxcb-xinerama0 \
+            libxkbcommon-x11-0 \
+            libxcb-cursor0 \
+            libxcb-keysyms1 \
+            libxcb-render-util0 \
+            libxcb-icccm4 \
+            libxcb-image0 \
+            libxcb-shape0 \
+            libxcb-util1
+
       - name: Install Python dependencies
         run: |
           uv pip install -r requirements.txt

docs/index.html

@@ -39,9 +39,10 @@
             <h1>KeksPirates</h1>
         </div>
         <nav class="tab">
-            <a class="tablinks" onclick="openTab(event, 'start')" id="defaultOpen">Home</a>
-            <a class="tablinks" onclick="openTab(event, 'api')">API</a>
-            <a class="tablinks" onclick="openTab(event, 'docs')">Docs</a>
+            <a class="tablinks" onclick="openTab(event, 'start')" id="navHome">Home</a>
+            <a class="tablinks" onclick="openTab(event, 'api')" id="navApi">API</a>
+            <a class="tablinks" onclick="openTab(event, 'docs')" id="navDocs">Docs</a>
+            <a class="tablinks" id="navVst" href="https://vstsearch.softwaremanager.xyz">VST Search</a>
             <!-- <a class="tablinks" onclick="openTab(event, 'notfound')">404</a> -->
         </nav>
     </header>
@@ -187,6 +188,17 @@
             </div>
         </div>
 
+        <div id="vstsearch" class="tabcontent">
+            <div class="cse-search">
+                <h3 class="vst-logo"><span style="color: #db65d5">VST Search</span></h3>
+                <div class="gcse-searchbox"></div>
+
+                <div class="gcse-searchresults"></div>
+
+
+            </div>
+        </div>
+
         <div id="notfound" class="tabcontent">
             <div class="notfound-frame">
                 <h1 class="notfound-title">404</h1>
@@ -203,6 +215,20 @@
     </footer>
 
     <script>
+    const MAIN_ORIGIN = 'https://softwaremanager.xyz';
+    const VST_ORIGIN  = 'https://vstsearch.softwaremanager.xyz';
+    const onVstDomain = window.location.hostname.startsWith('vstsearch.');
+
+    let cseLoaded = false;
+    function loadCSE() {
+        if (cseLoaded) return;
+        cseLoaded = true;
+        var s = document.createElement('script');
+        s.async = true;
+        s.src = 'https://cse.google.com/cse.js?cx=e7334cef72a8b42e7';
+        document.head.appendChild(s);
+    }
+
     function openTab(evt, tabName, pushToHistory = true) {
         var i, tabcontent, tablinks;
         
@@ -218,6 +244,8 @@
         
         var target = document.getElementById(tabName);
         target.style.display = "block";
+
+        if (tabName === 'vstsearch') loadCSE();
         // restart animation
         target.classList.remove('tab-animate');
         void target.offsetWidth;
@@ -247,6 +275,10 @@
 
     // Determine the correct tab immediately (before full load) to prevent flash
     (function() {
+        if (onVstDomain) {
+            document.getElementById('vstsearch').style.display = 'block';
+            return;
+        }
         let currentPath = window.location.pathname;
         let tabName = 'start';
         if (currentPath === '/api') tabName = 'api';
@@ -257,9 +289,23 @@
     })();
 
     window.onload = function() {
+        if (onVstDomain) {
+            document.getElementById('navHome').href = MAIN_ORIGIN + '/';
+            document.getElementById('navApi').href  = MAIN_ORIGIN + '/api';
+            document.getElementById('navDocs').href = MAIN_ORIGIN + '/docs';
+            ['navHome', 'navApi', 'navDocs'].forEach(function(id) {
+                document.getElementById(id).removeAttribute('onclick');
+            });
+            openTab(null, 'vstsearch', false);
+            document.getElementById('navVst').className += " active";
+            return;
+        }
+
         let currentPath = window.location.pathname;
-        
-        if (currentPath === '/api') {
+
+        if (currentPath === '/vstsearch') {
+            window.location.replace(VST_ORIGIN);
+        } else if (currentPath === '/api') {
             openTab(null, 'api', false);
         } else if (currentPath === '/docs') {
             openTab(null, 'docs', false);

docs/main.css

@@ -378,6 +378,84 @@ pre.api-response {
     font-size: 2rem;
 }
 
+.cse-search {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 70vh;
+    text-align: center;
+}
+
+.cse-search .vst-logo {
+    font-family: var(--main-font);
+    font-size: 3.5rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin-bottom: 1.5rem;
+    user-select: none;
+}
+
+.cse-search .gsc-control-cse,
+.cse-search .gsc-results-wrapper-overlay,
+.cse-search .gsc-results-wrapper-visible {
+    background: transparent !important;
+    border: none !important;
+}
+
+.cse-search .gsc-input-box,
+.cse-search .gsc-input-box.gsc-input-box-hover,
+.cse-search .gsc-input-box.gsc-input-box-focus {
+    background: #1a1b1d !important;
+    border-color: #1a1b1d !important;
+}
+
+.cse-search .gsc-input,
+.cse-search input.gsc-input,
+.cse-search .gsib_a input.gsc-input {
+    background: transparent !important;
+    color: #fff !important;
+}
+
+.cse-search .gsib_a {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.76 13.27L20.49 19L19 20.49L13.27 14.76C12.2 15.53 10.91 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C13.09 3 16 5.91 16 9.5C16 10.91 15.53 12.2 14.76 13.27ZM9.5 5C7.01 5 5 7.01 5 9.5C5 11.99 7.01 14 9.5 14C11.99 14 14 11.99 14 9.5C14 7.01 11.99 5 9.5 5Z' fill='%23ffffff'/></svg>") !important;
+}
+
+.cse-search .gsc-search-button-v2 {
+    background: #db65d5 !important;
+    border-color: #db65d5 !important;
+}
+
+.cse-search .gsc-search-button-v2:hover {
+    background: #c94dc3 !important;
+    border-color: #c94dc3 !important;
+}
+
+.cse-search .gcsc-more-maybe-branding-root,
+.gcsc-find-more-on-google {
+    display: none !important;
+}
+
+.gsc-completion-container,
+.gssb_c, .gssb_e,
+table.gssb_c, table.gssb_e {
+    background: #1a1b1d !important;
+    border-color: #333 !important;
+    color: #fff !important;
+}
+
+.gsc-completion-container td,
+.gsc-completion-container .gsc-completion-suggestion,
+.gssb_a, .gssb_a td, .gssb_i {
+    background: #1a1b1d !important;
+    color: #fff !important;
+}
+
+.gsc-completion-container .gsc-completion-selected,
+.gsc-completion-container tr:hover td,
+.gssb_a:hover td, .gssb_e-hover {
+    background: #2a2b2d !important;
+}
 
 @media(max-width: 560px) {
 

functions/_middleware.js

@@ -0,0 +1,55 @@
+// Cloudflare Pages middleware.
+//
+// Both softwaremanager.xyz and vstsearch.softwaremanager.xyz serve the same
+// index.html. Crawlers (Discord, Twitter, etc.) read the raw HTML and do NOT
+// run JavaScript, so we rewrite the <title> and Open Graph / Twitter meta tags
+// server-side when the request is for the VST Search subdomain. This gives the
+// subdomain its own link embed without a separate deploy.
+
+const VST = {
+  title: "VST Search - SoftwareManager",
+  description: "Search for plugins easily",
+  url: "https://vstsearch.softwaremanager.xyz/",
+};
+
+class AttributeSetter {
+  constructor(attribute, value) {
+    this.attribute = attribute;
+    this.value = value;
+  }
+  element(element) {
+    element.setAttribute(this.attribute, this.value);
+  }
+}
+
+class ContentSetter {
+  constructor(value) {
+    this.value = value;
+  }
+  element(element) {
+    element.setInnerContent(this.value);
+  }
+}
+
+export async function onRequest(context) {
+  const { request, next } = context;
+  const response = await next();
+
+  const onVstDomain = new URL(request.url).hostname.startsWith("vstsearch.");
+  const contentType = response.headers.get("content-type") || "";
+
+  // Leave everything untouched on the main domain and for non-HTML responses.
+  if (!onVstDomain || !contentType.includes("text/html")) {
+    return response;
+  }
+
+  return new HTMLRewriter()
+    .on("title", new ContentSetter(VST.title))
+    .on("meta[name='description']", new AttributeSetter("content", VST.description))
+    .on("meta[property='og:title']", new AttributeSetter("content", VST.title))
+    .on("meta[property='og:description']", new AttributeSetter("content", VST.description))
+    .on("meta[property='og:url']", new AttributeSetter("content", VST.url))
+    .on("meta[name='twitter:title']", new AttributeSetter("content", VST.title))
+    .on("meta[name='twitter:description']", new AttributeSetter("content", VST.description))
+    .transform(response);
+}