Integrating Nuclia Widget

.github/workflows/build_deploy.yml → .github/workflows/build_deploy_staging.yml

@@ -1,17 +1,17 @@
-name: build/deploy training.plone.org
+name: Build / deploy staging.training.plone.org
 
 on:
   push:
     branches:
-      - "main"
+      - "nuclia"
     workflow_dispatch:
 
 jobs:
   build_deploy:
     runs-on: ubuntu-latest
-    environment: 
-      name: training.plone.org
-      url: https://training.plone.org
+    environment:
+      name: staging.training.plone.org
+      url: https://staging.training.plone.org
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/nuclia_sync.yml

@@ -0,0 +1,35 @@
+name: Nuclia Sync
+
+on: [push]
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.10"
+
+      - name: Install requirements
+        run: |
+          pip install -q -r requirements.txt
+
+      - name: Run Nuclia Sync
+        env:
+          DEPLOY_NUCLIA_URL: ${{secrets.DEPLOY_NUCLIA_URL}}
+          DEPLOY_NUCLIA_TOKEN: ${{secrets.DEPLOY_NUCLIA_TOKEN}}
+        run: |
+          python3 upload.py
+
+      - name: Commit changes
+        run: |
+          git config --global user.name github-actions
+          git config --global user.email [email protected]
+          git add .
+          git commit -m "Nuclia Sync: Updated docs" --allow-empty
+          git push
+

docs/_static/searchtester.js

@@ -0,0 +1,156 @@
+const { switchMap } = rxjs;
+const nucliaResult = document.querySelector("nuclia-search-results");
+const shadowRoot = nucliaResult.shadowRoot;
+
+const nuclia = new window.NucliaSDK.Nuclia({
+  backend: "https://nuclia.cloud/api",
+  zone: "europe-1",
+  knowledgeBox: "62407006-2711-4631-9c03-761d156de289",
+});
+
+function createBreadcrumbs(Container) {
+
+  // Container hash gets the md5 value of resource but i am unable to find resource by passing that hash
+  // let ContainerHash = Container.querySelector(
+  //   "div > div.sw-field-metadata > div > div:nth-child(2) > span.title-xxs"
+  // ).innerText;
+
+  let ContainerHeading = Container.querySelector("div");
+
+  // One of The hash that works 79e4d894189842acb0902b5d879c2fe6
+  try {
+    nuclia.db
+      .getKnowledgeBox()
+      .pipe(
+        switchMap((knowledgeBox) =>
+          knowledgeBox.getResource("79e4d894189842acb0902b5d879c2fe6", [
+            "extra",
+          ])
+        )
+      )
+      .subscribe(
+        (resource) => {
+          insertBreadcrumbDiv(resource, ContainerHeading);
+        },
+        (error) => {
+          console.error("Error fetching resource:", error);
+        }
+      );
+  } catch (error) {
+    console.error("Error in createBreadcrumbs:", error);
+  }
+}
+
+function insertBreadcrumbDiv(resource, ContainerHeading) {
+  let array = resource.extra.metadata["breadcrumbs"];
+  if (!ContainerHeading.querySelector("div.breadcrumbs")) {
+    let breadcrumbContainer = document.createElement("div");
+    breadcrumbContainer.className = "breadcrumbs";
+    for (let i = 0; i < array.length; i++) {
+      let dict = array[i];
+
+      // Create a span element for each breadcrumb
+      let breadcrumbSpan = document.createElement("span");
+
+      // Create a breadcrumb link or span based on whether it's the last breadcrumb
+      if (i < array.length - 1) {
+        let breadcrumbLink = document.createElement("a");
+        breadcrumbLink.href = dict.url;
+        breadcrumbLink.textContent = dict.label;
+        breadcrumbLink.classList.add("breadcrumb-link");
+        breadcrumbSpan.appendChild(breadcrumbLink);
+
+        // Add a separator between breadcrumb links (e.g., '>')
+        let separator = document.createTextNode(" > ");
+        breadcrumbSpan.appendChild(separator);
+      } else {
+        // If it's the last breadcrumb, create a non-clickable span
+        breadcrumbSpan.textContent = dict.label;
+        breadcrumbSpan.classList.add("breadcrumb-last");
+      }
+
+      breadcrumbContainer.appendChild(breadcrumbSpan);
+    }
+    ContainerHeading.insertAdjacentElement(
+      "afterbegin",
+      breadcrumbContainer
+    );
+  }
+}
+
+
+function isMatch(element) {
+  return (
+    element &&
+    element.nodeName === "DIV" &&
+    element.classList &&
+    element.classList.contains("result-title-container") &&
+    element.classList.length === 2
+  );
+}
+
+// Function to process added nodes within the shadow DOM
+function processAddedNodes(addedNodes) {
+  addedNodes.forEach((addedNode) => {
+    if (isMatch(addedNode)) {
+      createBreadcrumbs(addedNode);
+    }
+  });
+}
+
+function addBreadcrumbsToResults() {
+  if (!nucliaResult) {
+    console.error("Nuclia-search-result tag not found");
+    return;
+  }
+  let observer = new MutationObserver(callback);
+
+  observer.observe(shadowRoot, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+const callback = function (mutationsList, observer) {
+  for (const mutation of mutationsList) {
+    if (mutation.type === "childList") {
+      processAddedNodes(mutation.addedNodes);
+    }
+  }
+};
+
+const style = document.createElement('style');
+style.textContent = `
+
+/* Breadcrumb container */
+.breadcrumbs {
+  font-size: 16px;
+  margin: 10px 0;
+}
+
+/* Breadcrumb links */
+.breadcrumbs a {
+  text-decoration: none;
+  color: #007bff;
+  transition: color 0.2s;
+}
+
+/* Style for the last breadcrumb */
+.breadcrumbs span:last-child {
+  color: #555; 
+}
+
+/* Separator between breadcrumbs */
+.breadcrumbs .separator {
+  margin: 0 5px;
+  color: #777; 
+}
+
+/* Hover effect for breadcrumb links */
+.breadcrumbs a:hover {
+  color: #0056b3;
+}
+
+`;
+// Append the style element to the shadow DOM
+shadowRoot.appendChild(style);

docs/_templates/components/search-field.html

@@ -16,38 +16,4 @@
            spellcheck="false"/>
     <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
   </div>
-  <div class="d-flex visually-hidden">
-    <label for="training">Filter by training</label>
-  </div>
-  <div class="d-flex">
-    <select class="form-control" name="training" id="training" onchange="this.form.submit()">
-      <option value="all">all trainings</option>
-      {% for id, title in
-        [
-        ['mastering-plone', 'Mastering Plone development'],
-        ['mastering-plone-5', 'Mastering Plone development (Plone 5)'],
-        ['effective-volto','Effective Volto (advanced)'],
-        ['voltoaddons','Volto add-ons'],
-        ['volto','Volto (beginner)'],
-        ['voltohandson','Volto Hands-On (beginner)'],
-        ['react','ReactJS'],
-        ['theming','Classic UI Theming'],
-        ['testing','Testing'],
-        ['deployment','Deployment'],
-        ['javascript','Javascript (Plone 5)'],
-        ['ttw','TTW (Plone 5)'],
-        ['solr','Solr'],
-        ['workflow','Workflow'],
-        ['migrations','Migrating content (best practice)'],
-        ['transmogrifier','Migrating content (Transmogrifier)'],
-        ['wsgi','WSGI'],
-        ['advanced-python','Advanced Python'],
-        ['angular','Angular'],
-        ['gatsby','Gatsby'],
-        ['contributing', 'Contributing'],
-        ] %}
-        <option value="{{id}}">{{ title }}</option>
-      {% endfor %}
-    </select>
-  </div>
 </form>

docs/_templates/search.html

@@ -1,42 +1,82 @@
-{%- extends "page.html" %}
-{# Over-ride the body to be custom search structure we want #}
-{% block docs_body %}
-  <div class="bd-search-container">
-    <h1>{{ _("Search") }}</h1>
-    <noscript>
-      <div class="admonition error">
-        <p class="admonition-title">{% trans %}Error{% endtrans %}</p>
-        <p>{% trans %}Please activate JavaScript to enable the search functionality.{% endtrans %}</p>
-      </div>
-    </noscript>
-    {% block searchtext %}
-      <div>
-        {% trans %}Searching for multiple words only shows matches that contain
-        all words.{% endtrans %}
-      </div>
-    {% endblock %}
-    {% include "components/search-field.html" %}
-    <div id="search-results"></div>
+{%- extends "page.html" %} {# Over-ride the body to be custom search structure
+we want #} {% block docs_body %}
+<div class="bd-search-container">
+  <h1>{{ _("Search") }}</h1>
+  <noscript>
+    <div class="admonition error">
+      <p class="admonition-title">{% trans %}Error{% endtrans %}</p>
+      <p>
+        {% trans %}Please activate JavaScript to enable the search
+        functionality.{% endtrans %}
+      </p>
+    </div>
+  </noscript>
+  {% block searchtext %}
+  <div>
+    {% trans %}Searching for multiple words only shows matches that contain all
+    words.{% endtrans %}
   </div>
-  <script>
-    // Activate the search field on page load
-    let searchInput = document.querySelector("form.bd-search input");
-    if (searchInput) {
-        searchInput.focus();
-        searchInput.select();
-        console.log("[PST]: Set focus on search field.");
-    }
-  </script>
-{% endblock docs_body %}
-{# Below sections just re-create the behavior of Sphinx default search #}
-{# Page metadata #}
-{%- block htmltitle -%}
-  <title>{{ _("Search") }} - {{ title or docstitle }}</title>
-{%- endblock htmltitle -%}
-{# Manually include the search JS that Sphinx includes #}
-{% block scripts -%}
-  {{ super() }}
-  <script src="{{ pathto('_static/searchtools.js', 1) }}"></script>
-  <script src="{{ pathto('_static/language_data.js', 1) }}"></script>
-  <script src="{{ pathto('searchindex.js', 1) }}"></script>
+  {% endblock %}
+</div>
+
+<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>
+<script src="https://unpkg.com/@nuclia/core@latest/umd/index.js"></script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const queryInput = document.getElementById("search-input").value;
+
+    const script = document.createElement("script");
+    script.src = "https://cdn.nuclia.cloud/nuclia-video-widget.umd.js";
+    script.async = true; // adding this to maybe load nuclia widget faster
+
+    // Initialize the Nuclia widget once it's loaded
+    script.onload = () => {
+      const widget = document.getElementsByTagName("nuclia-search-bar")[0]; // get the widget
+      // Pass the query to the Nuclia Search Widget
+      widget.search(queryInput);
+
+      const script2 = document.createElement("script"); // Call searchtester script after we get search results
+      script2.src = "{{ pathto('_static/searchtester.js', 1) }}";
+
+      // On searchtester.js load call function to add breadcrumbs 
+      script2.onload = () => {
+        addBreadcrumbsToResults();
+      };
+      document.head.appendChild(script2);
+    };
+
+    document.head.appendChild(script);
+  });
+</script>
+
+ <!-- Nuclia Widget -->
+<nuclia-search-bar mode="dark"
+  knowledgebox="62407006-2711-4631-9c03-761d156de289"
+  zone="europe-1"
+  features="answers,navigateToLink,displayMetadata" ></nuclia-search-bar>
+
+<!-- Search results -->
+<nuclia-search-results mode="dark"></nuclia-search-results>
+
+<!-- Optional script -->
+<script>
+  // Activate the search field on page load 
+  let searchInput = document.querySelector("form.bd-search input");
+  if (searchInput) {
+    searchInput.focus();
+    searchInput.select();
+    console.log("[PST]: Set focus on search field.");
+  }
+</script>
+<!-- I Dont think below code is required anymore as it is related to sphinx-->
+
+{% endblock docs_body %} {# Below sections just re-create the behavior of Sphinx
+default search #} {# Page metadata #} {%- block htmltitle -%}
+<title>{{ _("Search") }} - {{ title or docstitle }}</title>
+{%- endblock htmltitle -%} {# Manually include the search JS that Sphinx
+includes #} {% block scripts -%} {{ super() }}
+<script src="{{ pathto('_static/searchtools.js', 1) }}"></script>
+<script src="{{ pathto('_static/language_data.js', 1) }}"></script>
+<script src="{{ pathto('searchindex.js', 1) }}"></script>
 {%- endblock scripts %}

requirements.txt

@@ -13,3 +13,5 @@ sphinx-sitemap
 sphinx-togglebutton
 sphinxcontrib-spelling
 sphinxext-opengraph
+nuclia
+nucliadb-sdk