Integrating Nuclia Widget

.github/workflows/nuclia_sync.yml

@@ -0,0 +1,46 @@
+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: Check for changes in nuclia_sync.json
+        id: check_changes
+        run: |
+          CHANGED_FILES=$(git diff --name-only ${{ github.event.before }} ${{ github.sha }})
+          echo "Changed files: $CHANGED_FILES"
+          if echo "$CHANGED_FILES" | grep -q 'nuclia_sync.json'; then
+            echo "::set-output name=changed::true"
+          else
+            echo "::set-output name=changed::false"
+          fi
+
+      - name: Commit changes 
+        if: steps.check_changes.outputs.changed == 'true'
+        run: |
+          git config --global user.name github-actions
+          git config --global user.email [email protected]
+          git add .
+          git commit -m "Nuclia Sync: Updated docs" 
+          git push

docs/_static/searchtester.js

@@ -0,0 +1,206 @@
+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(resultTitleContainer,ContainerHash) {
+
+  let ContainerHeading = resultTitleContainer.querySelector("div:nth-child(2)");
+
+  try {
+    nuclia.db
+      .getKnowledgeBox()
+      .pipe(
+        switchMap((knowledgeBox) =>
+          knowledgeBox.getResource(ContainerHash, [
+            "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 
+        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("sw-result-row") &&
+    element.classList.length === 2
+  );
+}
+
+// Function to process added nodes within the shadow DOM
+function processAddedNodes(addedNodes) {
+  addedNodes.forEach((addedNode) => {
+    if (isMatch(addedNode)) {
+      let resultTitleContainer = addedNode.querySelector('.result-title-container')
+      let ContainerHash = addedNode.getAttribute('data-nuclia-rid');
+      if (ContainerHash.length == 32) { // To be removed when Null result issue get solved
+        createBreadcrumbs(resultTitleContainer,ContainerHash);
+      }
+    }
+  });
+}
+
+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 = `
+:host {
+  --pst-color-primary: #579aca;
+  --color-on-hover: #0056b3;
+  --color-of-separator: #777;
+  --color-of-lastbreadcrumb: #CECECE;
+  --size-of-title-m: 22px;
+}
+
+/* Breadcrumb container */
+.breadcrumbs {
+  margin: 10px 0;
+}
+
+/* Breadcrumb links */
+.breadcrumbs a {
+  font-size: var(--font-size-small);
+  text-decoration: none;
+  color: var(--pst-color-primary);
+  transition: color 0.2s;
+}
+
+/* Style for the last breadcrumb */
+.breadcrumbs span:last-child {
+  font-size: var(--font-size-small);
+  color: var(--color-of-lastbreadcrumb); 
+}
+
+/* Separator between breadcrumbs */
+.breadcrumbs .separator {
+  font-size: var(--font-size-small);
+  margin: 0 5px;
+  color: var(--color-of-separator); 
+}
+
+/* Hover effect for breadcrumb links */
+.breadcrumbs a:hover {
+  color: var(--color-on-hover);
+}
+
+/*Heading of the results*/
+h3.ellipsis.title-m{
+    color: var(--pst-color-primary);
+    font-size: var(--size-of-title-m);
+}
+
+/*Subheading of the results*/
+.sw-paragraph-result {
+  color: var(--pst-color-primary);
+}
+/*Gap between results*/
+.results, .search-results {
+  gap: var(--rhythm-7);
+}
+/*Gap between widget and answer generation*/
+.sw-initial-answer {
+  margin-top: var(--rhythm-3);
+}
+`;
+// Append the style element to the shadow DOM
+shadowRoot.appendChild(style);
+
+function handleThemeChange(mutationsList) {
+  mutationsList.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+          const newMode = htmlSelector.getAttribute('data-theme');
+          const nucliaSearchResults = document.querySelector('nuclia-search-results');
+          const nucliaSearchBar = document.querySelector('nuclia-search-bar');
+          const currentMode = nucliaSearchResults.getAttribute('mode');
+
+          if (newMode === 'dark' && currentMode !== 'dark') {
+              nucliaSearchResults.setAttribute('mode', 'dark');
+            nucliaSearchBar.setAttribute('mode', 'dark');
+          } else if (newMode === 'light' && currentMode !== 'light') {
+              nucliaSearchResults.setAttribute('mode', 'light');
+            nucliaSearchBar.setAttribute('mode', 'light');
+          }
+      }
+  });
+}
+
+// Select the HTML element and configure the observer
+const htmlSelector = document.querySelector('html');
+const observer = new MutationObserver(handleThemeChange);
+
+// Start observing changes in the data-theme attribute
+observer.observe(htmlSelector, { attributes: true, attributeFilter: ['data-theme'] });

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

@@ -15,18 +15,59 @@ <h1>{{ _("Search") }}</h1>
         all words.{% endtrans %}
       </div>
     {% endblock %}
-    {% include "components/search-field.html" %}
-    <div id="search-results"></div>
-  </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>
+</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>
+
+<!-- Adding the widget to search result page -->
+<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,hideThumbnails"
+></nuclia-search-bar>
+
+<!-- Search results -->
+<nuclia-search-results mode = "dark"></nuclia-search-results>
+
+<!-- Optional script below-->
+<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 #}

requirements.txt

@@ -1,9 +1,12 @@
 -c constraints.txt
 
 Sphinx
+jsx-lexer
 lesscpy
 linkify-it-py
 myst-parser
+nuclia
+nucliadb-sdk
 sphinx-autobuild
 sphinx-book-theme
 sphinx-copybutton