/* Rubik Variable Font */
@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900; /* Range of weights available in the variable font */
  font-display: swap;
}

/* Rubik Italic Variable Font */
@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
  font-style: italic;
  font-weight: 300 900; /* Range of weights available in the variable font */
  font-display: swap;
}

:root {
    --primary-gradient-color: #ffffff; 
    --secondary-gradient-color: rgb(138, 193, 149, 0.500); 
    --icon-color: #000000; /* Black */

    /* HPE Brand Colors */

    --color-brand:#8ac195; /*primary color*/
    --color-brand-1:rgba(131, 122, 117, 0.667); /*secondary color*/
    --color-brand-2:#acc18a; /*tertiary color*/
    --color-brand-3:#86a6cf; /*note color*/
    --color-brand-4:#ADD9F4; /*tip color */
    --color-brand-5:#dbd985; /*security color */
    --color-brand-6:#d4ac84; /*warning color */
    --color-brand-7:#F3B3A6; /*danger color */
}

.dark {
    --primary-gradient-color: rgb(138, 193, 149, 0.300); /* Change this to your dark mode color */
    --secondary-gradient-color: #202020; /* Change this to your dark mode color */
    --icon-color: #ffffff; /* Change this to your dark mode color */
}

 #articleContent [id]:target {
    scroll-margin-top: 50px;
}

{{- $cssResources := slice (resources.Get "css/main.css") }}
{{- $cssResources = $cssResources | append (resources.Get "css/fonts.css") }}
{{- $cssResources = $cssResources | append (resources.Get "css/colors.css") }}



{{- if eq hugo.Environment "development" }}
  {{- $cssBundle := $cssResources | resources.Concat "css/bundle.css" }}
  <link rel="stylesheet" href="{{ $cssBundle.RelPermalink }}">
{{- else }}
  {{- $opts := dict "minify" true }}
  {{- $cssBundle := $cssResources | resources.Concat "css/bundle.css" | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $cssBundle.RelPermalink }}" integrity="{{ $cssBundle.Data.Integrity }}" crossorigin="anonymous">
{{- end }}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="title" content="{{with .Parent}}{{.Title}}{{end}}: {{ .Title }}" />
<meta name="description" content="{{with .Description}}{{.}}{{else}}{{.Summary}}{{end}}" />
<meta name="keywords" content="{{ .Keywords }}" />
<meta name="author" content="{{ .Params.author }}" />
{{ if .IsHome }}{{ hugo.Generator }}{{ end }}

<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
{{ partialCached "head/css.html" . }}
{{ partialCached "head/js.html" . }}

brew install hugo

hugo new site <siteName>

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'milodocs'

{{- $jsResources := slice }}
{{- $jsResources = $jsResources | append (resources.Get "js/main.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/chat.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/darkmode.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/search.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/tiles.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/tabs.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/glossary.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/toc.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/sidebar-left.js") }}
{{- $jsResources = $jsResources | append (resources.Get "js/chatTocToggle.js") }}

{{- if eq hugo.Environment "development" }}
  {{- $jsBundle := $jsResources | resources.Concat "js/bundle.js" | js.Build }}
  <script src="{{ $jsBundle.RelPermalink }}"></script>
{{- else }}
  {{- $opts := dict "minify" true }}
  {{- $jsBundle := $jsResources | resources.Concat "js/bundle.js" | js.Build $opts | fingerprint }}
  <script src="{{ $jsBundle.RelPermalink }}" integrity="{{ $jsBundle.Data.Integrity }}" crossorigin="anonymous"></script>
{{- end }}

{
    "id": {{- with .File }}{{- .UniqueID | jsonify }}{{- else}}""{{- end }},
    "title": "{{- if .Title}}{{- .Title }}{{else}}{{- humanize .File.TranslationBaseName -}}{{- end}}",
    "description":{{- with .Description}} {{. | jsonify}}{{- else }}"no description"{{- end}},
    "lastCommit": "{{ .GitInfo.AuthorDate }}",
    "version": "{{- if .Page.Params.version.isLatest}}latest{{else}}{{- .Page.Params.version.major }}.{{- .Page.Params.version.minor }}.{{- .Page.Params.version.patch }}{{- end}}",
    "section": {{- with .Section }}{{. | jsonify}} {{- else }}"no section"{{- end}},
    "parent": "{{with .Parent}}{{- .Title }}{{- else }}no parent{{end}}",
    "isPage": {{- .IsPage | jsonify }},
    "isSection": {{- .IsSection | jsonify }},
    "pageKind": {{- .Kind  | jsonify }},
    "bundleType": {{- .BundleType | jsonify }},
    "uri": "{{- .Permalink }}",
    "relURI": "{{- .RelPermalink }}",
    "body": {{ .Plain | jsonify }},
    {{- if .Page.Params.hidden}}"hidden": "{{- .Params.hidden}}",{{- end}}
    "tags": [{{- range $tindex, $tag := .Params.tags }}{{- if $tindex }}, {{- end }}"{{- $tag| htmlEscape -}}"{{- end }}]
}

<!-- put anything you want here; it's a blank slate -->

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@latest/dist/algoliasearch-lite.umd.js" defer></script>

<!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
  {{ partial "head.html" . }}
</head>
<body class="bg-white">
  <header>
    {{ partial "header.html" . }}
  </header>
  {{partial "navigation/top.html"}}
  <main class="max-w-screen-xl 2xl:max-w-screen-2xl mx-auto flex">
    {{partial "navigation/sidebar-left.html" . }}
    <div id="pageContainer" class="w-full lg:w-3/5">
      {{- if .IsHome}}{{ block "home" . }}{{ end }}{{else}}{{ block "main" . }}{{ end }}{{- end}}
    </div>
    <div id="searchResultsContainer" class="hidden w-full lg:w-3/5 p-4">
      <!-- populated by JS -->
    </div>
    {{partial "navigation/sidebar-right.html" . }}
  </main>
  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>

import os
from dotenv import load_dotenv
import time

from langchain.document_loaders import JSONLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain.vectorstores import Pinecone 
from langchain.embeddings.openai import OpenAIEmbeddings
import pinecone 


load_dotenv()
openai_key = os.environ.get('OPENAI_API_KEY')
pinecone_key = os.environ.get('PINECONE_API_KEY')
pinecone_environment = os.environ.get('PINECONE_ENVIRONMENT')
pinecone_index = os.environ.get('PINECONE_INDEX')

docs_index_path = "./docs.json" 
docs_index_schema = ".[]" # [{"body:..."}] -> .[].body; see JSONLoader docs for more info
embeddings = OpenAIEmbeddings(openai_api_key=openai_key)
text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=0,)

def chunks(lst, n):
    """Yield successive n-sized chunks from lst."""
    for i in range(0, len(lst), n):
        yield lst[i:i + n]

def metadata_func(record: dict, metadata: dict) -> dict:
    metadata["title"] = record.get("title")
    metadata["relURI"] = record.get("relURI")
    return metadata

loader = JSONLoader(docs_index_path, jq_schema=docs_index_schema, metadata_func=metadata_func, content_key="body") 

data = loader.load()
texts = text_splitter.split_documents(data) 

pinecone.init(
    api_key=pinecone_key,
    environment=pinecone_environment,
)

if pinecone_index in pinecone.list_indexes():
    print(f'The {pinecone_index} index already exists! We need to replace it with a new one.')
    print("Erasing existing index...")
    pinecone.delete_index(pinecone_index) 

time.sleep(60)
print("Recreating index...")
# wait a minute for the index to be deleted
pinecone.create_index(pinecone_index, metric="cosine", dimension=1536, pods=1, pod_type="p1") 


if pinecone_index in pinecone.list_indexes():

    print(f"Loading {len(texts)} texts to index {pinecone_index}... \n This may take a while. Here's a preview of the first text: \n {texts[0].metadata} \n {texts[0].page_content}")

    for chunk in chunks(texts, 25):
        for doc in chunk:
            if doc.page_content.strip(): 
                print(f"Indexing: {doc.metadata['title']}")
                print(f"Content: {doc.page_content}")
                Pinecone.from_texts([doc.page_content], embedding=embeddings, index_name=pinecone_index, metadatas=[doc.metadata])
            else:
                print("Ignoring blank document")
    print("Done!")  

import os
import functions_framework

from langchain.llms import OpenAI 
from langchain.chains.question_answering import load_qa_chain
from langchain.embeddings.openai import OpenAIEmbeddings
from langchain.vectorstores import Pinecone 
from langchain.memory import ConversationBufferMemory

openai_key = os.environ.get('OPENAI_API_KEY')
pinecone_key = os.environ.get('PINECONE_API_KEY')
pinecone_environment = os.environ.get('PINECONE_ENVIRONMENT')
pinecone_index = os.environ.get('PINECONE_INDEX')


def convert_to_document(message):
    class Document:
        def __init__(self, page_content, metadata):
            self.page_content = page_content
            self.metadata = metadata
    return Document(page_content=message, metadata={})


def answer_question(question: str, vs, chain, memory):
    relevant_docs = vs.similarity_search(question)
    conversation_history = memory.load_memory_variables(inputs={})["history"]
    context_window = conversation_history.split("\n")[-3:] 
    conversation_document = convert_to_document(context_window)
    input_documents = relevant_docs + [conversation_document]

    answer = chain.run(input_documents=input_documents, question=question)
    memory.save_context(inputs={"question": question}, outputs={"answer": answer})
    docs_metadata = []
    for doc in relevant_docs:
        metadata = doc.metadata
        if metadata is not None:
            doc_metadata = {
                "title": metadata.get('title', None),
                "relURI": metadata.get('relURI', None)
            }
            docs_metadata.append(doc_metadata)

    return {"answer": answer, "docs": docs_metadata}

llm = OpenAI(temperature=1, openai_api_key=openai_key, max_tokens=-1, streaming=True) 
chain = load_qa_chain(llm, chain_type="stuff")
embeddings = OpenAIEmbeddings(openai_api_key=openai_key)
docsearch = Pinecone.from_existing_index(pinecone_index, embeddings)
memory = ConversationBufferMemory()

import functions_framework

@functions_framework.http
def start(request):
    # For more information about CORS and CORS preflight requests, see:
    # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

    # Set CORS headers for the preflight request
    if request.method == 'OPTIONS':
        # Allows GET requests from any origin with the Content-Type
        # header and caches preflight response for an 3600s
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)

    # Set CORS headers for the main request
    headers = {
        'Access-Control-Allow-Origin': '*'
    }

    request_json = request.get_json(silent=True)
    request_args = request.args

    if request_json and 'query' in request_json:
        question = request_json['query']

    elif request_args and 'query' in request_args:
        question = request_args['query']
    else:
        question = 'What is MiloDocs?'


    return (answer_question(question=question, vs=docsearch, chain=chain, memory=memory), 200, headers)

<div id="chatContainer" class="hidden sticky top-16 h-[calc(100vh-5rem)] flex flex-col flex justify-end">
    <div id="chat-messages" class="flex flex-col overflow-y-auto text-base">
    </div>
    <div id="chat-controls" class="flex flex-row text-xs mt-2">
        <form onsubmit="submitQuestion(event)" class="flex flex-row">
            <input id="question" type="text" aria-label="Question Input" placeholder="Ask the docs" class="h-10 border rounded-lg p-1 mr-1 focus:outline-none focus:ring-2 focus:ring-brand" />
            <button id="sendButton" aria-label="Send" class="flex items-center bg-brand my-1  hover:bg-black text-white p-1 mr-1 rounded-lg shadow-lg transition duration-300"><img src="/icons/send.svg" alt="Send" class="w-5 h-5"></button>
        </form>
        <button id="clearAll" aria-label="Delete All" onclick="clearConversation()" class="flex items-center bg-black my-1 hover:bg-red-600 text-white p-1 rounded-lg shadow-lg transition duration-300"><img src="/icons/delete.svg" alt="Delete" class="w-5 h-5"></button>
    </div>
</div>

<script>
    // Define a function to handle form submission
function submitQuestion(event) {
    event.preventDefault();
    const questionInput = document.getElementById('question');
    const questionText = questionInput.value.trim();
    if (!questionText) return;  // Exit if the question is empty
    questionInput.value = '';  // Clear the input field
    addChatBubble(questionText, 'user');
    fetchAnswer(questionText);
}

// Define a function to fetch answer from the API
async function fetchAnswer(question) {
    const response = await fetch(`https://milodocs-lc4762co7a-uc.a.run.app/?query=${encodeURIComponent(question)}`);
    const data = await response.json();
    const answer = data.answer || 'Sorry, I could not fetch the answer.';
    addChatBubble(answer, 'bot');
}

// Define a function to add chat bubble
function addChatBubble(text, sender) {
    const chatMessages = document.getElementById('chat-messages');
    let pair = chatMessages.lastElementChild;
    if (!pair || !pair.classList.contains('chat-pair') || sender === 'user') {
        pair = document.createElement('div');
        pair.className = 'chat-pair bg-zinc-100 flex flex-col  my-2 p-2 rounded-lg';
        chatMessages.appendChild(pair);
    }
    const bubble = document.createElement('div');
    bubble.className = `chat-bubble ${sender} p-2 rounded-lg text-black ${sender === 'user' ? 'font-brand font-semibold' : 'font-brand font-regular'}`;
    bubble.innerText = text;
    pair.appendChild(bubble);
    if (sender === 'user') {
        bubble.classList.add('animate-pulse');  // Add pulsing animation to user bubble
    } else {
        const userBubble = pair.querySelector('.user');
        if (userBubble) userBubble.classList.remove('animate-pulse');  // Remove pulsing animation when bot responds
        const deleteButtonWrapper = document.createElement('div');
        deleteButtonWrapper.className = 'w-full flex justify-end';

        const deleteButton = document.createElement('button');
        deleteButton.className = 'w-fit p-2 rounded bg-zinc-200 text-xs lowercase hover:bg-red-600 hover:text-white transition duration-300 text-black';
        deleteButton.innerText = 'Delete';
        deleteButton.addEventListener('click', () => {
            chatMessages.removeChild(pair);
            saveChatHistory();
        });

        deleteButtonWrapper.appendChild(deleteButton);
        pair.appendChild(deleteButtonWrapper);
    }
    
    // Scroll to the bottom of the chat container
    chatMessages.scrollTop = chatMessages.scrollHeight;

    saveChatHistory();
}

// Define a function to clear conversation
function clearConversation() {
    const chatMessages = document.getElementById('chat-messages');
    chatMessages.innerHTML = '';
    saveChatHistory();
}

// Define a function to save chat history
function saveChatHistory() {
    const chatMessages = Array.from(document.getElementById('chat-messages').children);
    const chatHistory = chatMessages.map(pair => {
        const bubbles = Array.from(pair.children);
        const texts = bubbles.map(bubble => bubble.innerText);
        return {
            user: texts[0],
            bot: texts[1]
        };
    });
    localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
}

// Define a function to load chat history
function loadChatHistory() {
    const chatHistory = JSON.parse(localStorage.getItem('chatHistory'));
    if (chatHistory) {
        const chatMessages = document.getElementById('chat-messages');
        chatMessages.innerHTML = '';  // Clear any existing messages
        for (const pair of chatHistory) {
            addChatBubble(pair.user, 'user');
            addChatBubble(pair.bot, 'bot');
        }
    }
}

// Load chat history on page load
document.addEventListener('DOMContentLoaded', loadChatHistory);

</script>

document.addEventListener("DOMContentLoaded", function (event) {
  const chatTocToggle = document.getElementById("chatTocToggle");
  const chatContainer = document.getElementById("chatContainer");
  const tocContainer = document.getElementById("tocContainer");

  // Check if chatTocSettings in user's local storage is set; if not set or value is 'chat', toggle hidden on chatContainer; if value is 'toc', toggle the tocContainer
  const chatTocSettings = localStorage.getItem("chatTocSettings");
  if (chatTocSettings === null || chatTocSettings === "chat") {
    chatContainer.classList.remove("hidden");
    tocContainer.classList.add("hidden");
  } else if (chatTocSettings === "toc") {
    chatContainer.classList.add("hidden");
    tocContainer.classList.remove("hidden");
  }

  // Update the button content based on the visibility of chatContainer
  updateButtonContent();

  // Add a click event listener to the chatTocToggle button
  chatTocToggle.addEventListener("click", function () {
    // Toggle both the chatContainer and tocContainer visibility
    chatContainer.classList.toggle("hidden");
    tocContainer.classList.toggle("hidden");

    // Update the preference and button content based on the visibility of chatContainer
    if (!chatContainer.classList.contains("hidden")) {
      localStorage.setItem("chatTocSettings", "chat");
    } else {
      localStorage.setItem("chatTocSettings", "toc");
    }

    // Update the button content after toggling
    updateButtonContent();
  });

  // Function to update the button content based on the visibility of chatContainer
  function updateButtonContent() {
    const isChatVisible = !chatContainer.classList.contains("hidden");
    chatTocToggle.innerHTML = isChatVisible
      ? '<img src="/icons/toggle-right.svg" alt="toggle" class="mr-4">'
      : '<img src="/icons/toggle-left.svg" alt="toggle" class="mr-4">';
  }
});

                <div class="flex items-center space-x-4">
                    <button id="chatTocToggle" aria-label="Toggle Chat" class="hidden md:block"><img src="/icons/toggle-left.svg" class="w-5 h-5" alt="left/right toggle"></button>
                    <button id="darkModeToggle" aria-label="Toggle Darkmode" class=""><img src="/icons/light.svg" class="w-5 h-5" alt="sun/moon toggle"></button>
                </div>
            </div>
        </div>
    </div>
</nav>

document.addEventListener("DOMContentLoaded", function (event) {
  const darkModeToggle = document.getElementById("darkModeToggle");

  // Load saved theme preference
  const savedTheme = localStorage.getItem("theme-mode");
  if (savedTheme) {
    document.documentElement.classList.toggle("dark", savedTheme === "dark");
    updateButtonText();
    updateSectionIcons();
  }

  darkModeToggle.addEventListener("click", () => {
    const isDarkMode = document.documentElement.classList.contains("dark");
    document.documentElement.classList.toggle("dark", !isDarkMode);

    // Update the theme mode and button text
    localStorage.setItem(
      "theme-mode",
      document.documentElement.classList.contains("dark") ? "dark" : "light"
    );
    updateButtonText();

    // Update the section icons
    updateSectionIcons();
  });

  function updateButtonText() {
    const isDarkMode = document.documentElement.classList.contains("dark");

    darkModeToggle.innerHTML = isDarkMode
      ? '<img src="/icons/dark.svg" aria-label="activate lightmode" class="w-5" alt="moon">'
      : '<img src="/icons/light.svg" aria-label="activate darkmode" class="w-5" alt="sun">';
  }

  function updateSectionIcons() {
    const isDarkMode = document.documentElement.classList.contains("dark");
    const sectionIcons = document.querySelectorAll(".icon");

    sectionIcons.forEach((icon) => {
      const src = icon.getAttribute("src");
      const newSrc = isDarkMode
        ? src.replace("/icons/light/", "/icons/dark/")
        : src.replace("/icons/dark/", "/icons/light/");
      icon.setAttribute("src", newSrc);
    });
  }
});

{{ define "main" }}
<div class="flex">
{{ partial "navigation/glossary.html" . }}
  <article id="article-container" class="flex flex-col w-full hide-scrollbar mx-2">
    {{ partial "glossary/entries.html" . }}
  </article>
</div>
{{ end }}

document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.glossary-entry');
    const positions = { x: 50, y: 50 }; // Default to center

    function animate() {
        cards.forEach(card => {
            const rect = card.getBoundingClientRect();
            const mouseX = (positions.x - rect.left) / rect.width * 100;
            const mouseY = (positions.y - rect.top) / rect.height * 100;
            card.style.background = `radial-gradient(circle at ${mouseX}% ${mouseY}%, var(--primary-gradient-color), var(--secondary-gradient-color))`;
        });
        requestAnimationFrame(animate);
    }

    cards.forEach(card => {
        card.addEventListener('mousemove', (e) => {
            // Update gradient position
            positions.x = e.clientX;
            positions.y = e.clientY;
        });
        
        card.addEventListener('mouseover', () => {
            card.style.transform = 'translateY(-10px) scale(1.05)';
            card.style.boxShadow = '0 20px 30px #00000033';
        });
        
        card.addEventListener('mouseout', () => {
            card.style.transform = 'translateY(0) scale(1.0)';
            card.style.boxShadow = '';
        });
    });

    animate();
});

{{ define "home" }}
    <div id="articleContent" class="text-black p-4">
      {{ .Content }}
    </div>
    <div class="p-4">
      {{partial "article/tiles.html" . }}
    </div>
    
{{ end }}

[
    {{- range $index, $page := .Pages }}
    {{- if ne $page.Type "json" }}
    {{- if and $index (gt $index 0) }},{{- end }}
    {{- partial "json.json" . }}
    {{- end }}
    {{- if eq .Kind "section" }}
        {{- template "section" . }}
    {{- end }}
    {{-  end }}
]
{{- define "section" }}
{{- range .Pages }}
    {{- if ne .Type "json" }}
    ,{{- partial "json.json" . }}
    {{- end }}
    {{- if eq .Kind "section"}}
        {{- template "section" . }}
    {{- end }}
{{- end }}
{{- end }}

---
title: include.html
description: learn how to use the literal shortcode
---
<!--start -->
Inline code samples are great --- but code samples that are pulled from source files can be even better! This `{{%/*include*/%}}` shortcode is inspired by Sphinx's `.. literalinclude::` functionality. 

{{<notice snack>}}
This document is going to be a bit meta. 
{{</notice>}}

## How it Works

The `{{%/*include*/%}}` shortcode accepts 3 **positional** args: `lang`, `start`, and `stop`. All are optional.

{{<notice warning "Don't forget to use %">}}
This shortcode relies on Hugo's markdown rendering to automatically handle code syntax highlighting. If you surround this shortcode with `<` `>` instead, it will break.
{{</notice>}}

### Examples 

### This File

{{%include "reference/layouts/shortcodes/include.md" "md" %}}

### Python File With Comments

{{%include "static/demo-package.py" "python" "# Start 1" "# End 1" %}}

## Source Code 

{{%include "layouts/shortcodes/include.html" "go" %}}

def demo_function(arg1, arg2):
    """Demo Function

    This function takes two arguments and returns their sum.

    Args:
        arg1 (int): The first argument.
        arg2 (int): The second argument.

    Returns:
        int: The sum of arg1 and arg2.
    """
    return arg1 + arg2

{{ $path := .Get 0 }}
{{ $lang := .Get 1 | default "s" }}
{{ $start := .Get 2 | default nil }}
{{ $stop := .Get 3 | default nil}}
{{ $content := readFile $path }}
{{ $chunked := split $content "\n" }}
{{ $snippet := "" }}
{{ $capture := false }}
{{if eq $start nil }}
{{ $capture = true }}
{{end}}
{{- range $chunked }}
    {{ if and (not $capture) (in . $start) }}
        {{ $capture = true }}
    {{ else if and $capture (in . $stop) }}
        {{ $capture = false }}
    {{ else if $capture }}
        {{ $snippet = print $snippet . "\n" }}
    {{ end }}
{{- end }}

{{ printf "```%s\n%s\n```" $lang $snippet | safeHTML }}

{{ define "main" }}
  <h1 class="">{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ .Summary }}
  {{ end }}
{{ end }}

console.log('This site was generated by Hugo.');

{{- if .Site.Params.article.nextPrev.display -}}
{{$trunc := .Site.Params.article.nextPrev.trunc}}
<div class="mt-8 flex justify-between items-center">
    {{with .NextInSection }}
        <a href="{{.RelPermalink}}" class="tile text-black py-2 px-4 rounded-r-md transition duration-300"> {{.Title | truncate $trunc}} </a>
    {{else}}
    <span class="py-2 px-4"> <!-- Placeholder for alignment -->
    </span>
    {{ end }}

    {{with .PrevInSection }}
        <a href="{{.RelPermalink}}" class="tile text-black py-2 px-4 rounded-l-md transition duration-300"> {{.Title | truncate $trunc}} </a>
    {{else}}
        {{- range first 1 .Pages}}
        <a href="{{.RelPermalink}}" class="tile text-black py-2 px-4 rounded-l-md transition duration-300"> {{.Title | truncate $trunc}} </a>
        {{- end}}
    {{ end }}
</div>
{{- end -}}

{{< notice "" "without type" >}}
This is a **default** notice.
{{< /notice >}}

{{< notice snack "want a cookie?" >}}
This is a **snack** notice.
{{< /notice >}}

{{< notice tip "you don't have to add a title">}}
This is a **tip** notice.
{{< /notice >}}

{{< notice note "there's a lot of options" >}}
This is a **note** notice.
{{< /notice >}}

{{< notice info "probably redundant with note" >}}
This is a **info** notice.
{{< /notice >}}

{{< notice security "hugo is safe" >}}
This is a **security** notice.
{{< /notice >}}

{{< notice warning "don't use lightmode at night" >}}
This is a **warning** notice.
{{< /notice >}}

{{< notice danger "cats may destroy furniture" >}}
This is a **danger** notice.
{{< /notice >}}

{{ $type := .Get 0 | default "info" }}
{{ $title := .Get 1 }}
<div class="notice p-4 mt-2 mb-2 rounded-md shadow-md 
    {{- with $type }}
        {{if eq . "danger" }} bg-brand-7
        {{else if eq . "warning" }} bg-brand-6
        {{else if eq . "security" }} bg-brand-5
        {{else if eq . "tip" }} bg-brand-4
        {{else if eq . "note" }} bg-brand-3 
        {{else if eq . "info" }} bg-brand-2 
        {{else if eq . "snack" }} bg-brand-1 
        {{ end }}
    {{- end }}
">
    <div class="flex">
        <div class="flex-shrink-0">
           <img src="/icons/light/
            {{- with $type}}
                {{- if eq . "danger" -}} danger
                {{- else if eq . "warning" -}} warning
                {{- else if eq . "security" -}} security
                {{- else if eq . "info" -}} info
                {{- else if eq . "note" -}} note
                {{- else if eq . "tip" -}} tip 
                {{- else if eq . "snack" -}} snack 
                {{- end -}}
            {{- end -}}
           .svg" class="icon w-5 h-5">
        </div>
        <div class="ml-3 w-full text-black text-sm">
            {{- if $title -}}
            <div class="font-brand font-bold mb-2">{{ $title }}</div>
            {{- end -}}
            {{ $.Page.RenderString .Inner }}
        </div>
    </div>
</div>

- {{< pdoc-2 "function" "~demo-package.demo_function" >}}
- {{< pdoc-2 "class" "~demo-package.DemoClass" >}}
- {{< pdoc-2 "method" "~demo-package.DemoClass.demo_method" >}}

<!-- layouts/shortcodes/det.html -->
{{ $type := index (.Params) 0 }}
{{ $path := index (.Params) 1 }} 
{{ $title := index (.Params) 2}}

{{ $baseurl := "/references/" }}
{{ $anchor := "" }}
{{ $linkText := "" }}

{{ $trimmed_path := strings.TrimPrefix "~" $path }}
{{ $path_parts := split $trimmed_path "." }}  

{{ if eq $type "supermodule" }}
  {{/*  url pattern for supermodule: {baseurl}/directory/supermodule/  */}}
  {{ $baseurl = printf "%s%s/%s/" $baseurl (index $path_parts 0) (index $path_parts 1) }}
  {{ $linkText = (index $path_parts 1) }}
{{ else if eq $type "submodule" }}
  {{/*  url pattern for submodule: {baseurl}/directory/supermodule/submodule.html */}}
  {{ $baseurl = printf "%s%s/%s/%s.html" $baseurl (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) }}
  {{ $linkText = printf "%s.%s" (index $path_parts 2) (index $path_parts 1) }}
{{ else if eq $type "class" }}
  {{/*  url pattern for class: {baseurl}/directory/supermodule/submodule.html#directory.supermodule.submodule.class */}}
  {{ $baseurl = printf "%s%s/%s/%s.html" $baseurl (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) }}
  {{ $anchor = printf "#%s.%s.%s.%s" (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) (index $path_parts 3) }}
  {{ $linkText = printf "%s.%s()" (index $path_parts 2) (index $path_parts 3) }}
{{ else if eq $type "function" }}
  {{/*  url pattern for function: {baseurl}/directory/supermodule/submodule.html#directory.supermodule.submodule.function */}}
  {{ $baseurl = printf "%s%s/%s/%s.html" $baseurl (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) }}
  {{ $anchor = printf "#%s.%s.%s.%s" (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) (index $path_parts 3) }}
  {{ $linkText = printf "%s.%s()" (index $path_parts 2) (index $path_parts 3) }}
{{ else if eq $type "method" }}
  {{/*  url pattern for method: {baseurl}/directory/supermodule/submodule.html#directory.supermodule.submodule.class.method */}}
  {{ $baseurl = printf "%s%s/%s/%s.html" $baseurl (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) }}
  {{ $anchor = printf "#%s.%s.%s.%s.%s" (index $path_parts 0) (index $path_parts 1) (index $path_parts 2) (index $path_parts 3) (index $path_parts 4) }}
  {{ $linkText = printf "%s.%s.%s()" (index $path_parts 2) (index $path_parts 3) (index $path_parts 4) }}
  {{else}}
    {{ errorf "The %q shortcode requires a type parameter as arg 0 (module, submodule, class, function, method). See %s" .Name .Position }}
{{ end }}


<a href="{{ $baseurl }}{{ $anchor }}" class="font-bold underline">{{with $title}}{{.}}{{else}}{{ $linkText }}{{end}}</a>

This is the {{<prod>}} theme.

{{- with .Site.Params.names.product}}{{.}}{{end}}

document.addEventListener("DOMContentLoaded", function () {
  const searchInput = document.getElementById("searchInput");
  const pageContainer = document.getElementById("pageContainer");
  const searchResultsContainer = document.getElementById(
    "searchResultsContainer"
  );

  // Algolia configuration
  const searchClient = algoliasearch(
    "4TYL7GJO66", // APP ID 
    "4b6a7e6e3a2cf663b3e4f8a372e8453a" // Search Only API Key
  );
  const searchIndex = searchClient.initIndex("default"); // Replace 'default' with your Algolia index name

  // Function to group search results by parent
  function groupResultsByParent(hits) {
    const groupedResults = {};

    hits.forEach((hit) => {
      const parent = hit.parent;
      if (!groupedResults[parent]) {
        groupedResults[parent] = [];
      }
      groupedResults[parent].push(hit);
    });

    return groupedResults;
  }

  // Function to perform Algolia search and update results with more details
  function performAlgoliaSearch(query) {
    searchIndex
      .search(query)
      .then(({ hits }) => {
        // Group search results by parent
        const groupedResults = groupResultsByParent(hits);

        // Display grouped search results in the search results container
        const resultsHTML = Object.keys(groupedResults).map((parent) => {
          const parentResults = groupedResults[parent];

          const parentHTML = parentResults
            .map((hit) => {
              return `
                <a href="${hit.relURI}">
                <div class="mb-4 text-black hover:bg-brand hover:text-white rounded-lg p-4 my-2 bg-zinc-100 transition duration-300 shadow-md">
                  <h3 class="text-lg font-bold">${hit.title}</h3>
                  <p class="text-sm text-zinc-200">${hit.description}</p>
                </div>
                </a>
              `;
            })
            .join("");

          return `
            <div class="mb-8">
              <h2 class="text-xl font-bold text-black">${parent}</h2>
              ${parentHTML}
            </div>
          `;
        });

        searchResultsContainer.innerHTML = resultsHTML.join("");
      })
      .catch((err) => {
        console.error(err);
      });
  }

  // Event listener for typing in the search input
  searchInput.addEventListener("input", () => {
    const inputValue = searchInput.value.trim();

    // Toggle "hidden" class based on whether there is input in the search field
    if (inputValue !== "") {
      // Show search results container and hide page container
      searchResultsContainer.classList.remove("hidden");
      pageContainer.classList.add("hidden");

      // Trigger Algolia search with the input value
      performAlgoliaSearch(inputValue);
    } else {
      // Show page container and hide search results container
      searchResultsContainer.classList.add("hidden");
      pageContainer.classList.remove("hidden");
    }
  });

});

{{ define "main" }}
  <div class="my-4">
    {{partial "navigation/breadcrumbs.html" . }}
  </div>
  <h1 class="text-black p-4">{{ .Title }}</h1>
  {{if .Content}}
  <div id="articleContent" class="p-4 text-black">
    {{ .Content }}
  </div>
  {{end}}
  <div class="p-4">
    {{ partial "article/tiles.html" . }}
    {{partial "article/next-prev.html" . }}
  </div>
{{ end }}

[
    {{- range $index, $page := .Pages }}
    {{- if ne $page.Type "json" }}
    {{- if and $index (gt $index 0) }},{{ end }}
    {{- partial "json.json" . }}
    {{- end }}
    {{- if eq .Kind "section"}}
        {{- template "section" . }}
    {{- end }}
    {{- end }}
]

{{- define "section" }}
{{- range .Pages }}
    {{- if ne .Type "json" }}
    ,{{- partial "json.json" . }}
    {{- end }}
    {{- if eq .Kind "section"}}
        {{- template "section" . }}
    {{- end }}
{{- end }}
{{- end }}

document.addEventListener("DOMContentLoaded", function () {
  var activeLink = document.querySelector('[data-current="true"]');

  // Function to scroll to the link with a delay
  function scrollToLink(link) {
    if (link) {
      setTimeout(function () {
        link.scrollIntoView({
          behavior: "smooth",
          block: "nearest",
          inline: "start",
        });
      }, 300);
    }
  }

  scrollToLink(activeLink);

  var links = document.querySelectorAll("a[data-level]");
  var currentUrl = window.location.href;

  // Function to handle the visibility of nested lists
  function handleVisibility() {
    // Initially hide all levels greater than 2
    links.forEach(function (link) {
      var level = parseInt(link.getAttribute("data-level"));
      if (level > 1) {
        link.closest("li").classList.add("hidden");
      }
    });

    links.forEach(function (link) {
      if (link.href === currentUrl) {
        link.classList.add("text-brand");

        // Unhide all ancestor li elements
        var ancestor = link.closest("li");
        while (ancestor) {
          if (ancestor.tagName.toLowerCase() === "li") {
            ancestor.classList.remove("hidden");
          }
          ancestor = ancestor.parentElement;
        }

        // Unhide direct siblings at the same level
        var parentLi = link.closest("li");
        var siblingLis = Array.from(parentLi.parentElement.children).filter(
          function (child) {
            return child !== parentLi;
          }
        );
        siblingLis.forEach(function (siblingLi) {
          siblingLi.classList.remove("hidden");
        });
      }
    });
  }

  // Call the handleVisibility function
  handleVisibility();
});

{{ define "main" }}
  <div class="my-4">
    {{partial "navigation/breadcrumbs.html" . }}
  </div>
  <h1 class="text-black p-4">{{ .Title }}</h1>
  <div id="articleContent" class="p-4">
    {{ .Content }}
  </div>
  <div class="p-4">
    {{partial "article/next-prev.html" . }}
  </div>
{{ end }}

{{- partial "json.json" .}}

{{<tabs/container>}}
{{<tabs/tabButtons id="launch-method">}}
{{<tabs/tab option="Console" state="active">}}
{{<tabs/tab option="CLI">}}
{{</tabs/tabButtons>}}
{{<tabs/tabContentsContainer>}}
{{<tabs/tabContent val1="launch-method/console">}}

1. Ensure your DemoTool server is running and connected.
2. Navigate to Console.

{{< /tabs/tabContent >}}
{{< tabs/tabContent val1="launch-method/cli" >}}

1. Run `demoCLI connect`.

{{</tabs/tabContent>}}
{{</tabs/tabContentsContainer>}}
{{</tabs/container>}}

document.addEventListener("DOMContentLoaded", function(event) {
    if (document.querySelectorAll('[data-component="tabs"]')) {
        var tabs = document.querySelectorAll('[data-component="tabs"]');

        console.log("tabs ", tabs)

        tabs.forEach(function(tab) {
            // get each child step element with the data-wizard-id attribute
            let options = tab.querySelectorAll('[data-tab-id]');
            let optionContent = tab.querySelectorAll('[data-tabcontent]');  // Changed to lowercase 'c'
            getAnswers({tab, optionContent}) 
            // listen for click on button elements within each step
            options.forEach((option) => {
                // get all of the buttons within the step
                let buttons = option.querySelectorAll('button')

                // listen for click on each button
                buttons.forEach((button) => {
                    button.addEventListener('click', (e) => {
                        // add green class to the clicked button
                        e.target.classList.remove('bg-white', 'text-black')
                        e.target.classList.add('bg-brand', 'text-white')
                        // remove green class from the other buttons
                        buttons.forEach((button) => {
                            if (button !== e.target) {
                                button.classList.remove('bg-brand', 'text-white')
                                button.classList.add('bg-white', 'text-black')
                            }
                        })

                        getAnswers({tab, optionContent})
                    })
                }) 
            })
        });

        function getAnswers({tab, optionContent}){
            // get all buttons with the green class
            let activeButtons = tab.querySelectorAll('button.bg-brand')

            // get the data-tab-option attribute of all the buttons with the green class
            let activeButtonOptions = [] 

            console.log("activeButtonOptions ", activeButtonOptions)

            activeButtons.forEach((button) => {
                console.log("activeButton ", button)
                activeButtonOptions.push(button.getAttribute('data-tab-option'))  // Changed to data-tab-option
            })

            console.log("activeButtonOptions ", activeButtonOptions)

            let convertedText = activeButtonOptions.join('/').toLowerCase()

            // hide all other answers
            optionContent.forEach((content) => {
                let value = content.getAttribute('data-tabcontent')  
                console.log(`value: ` + value)
                console.log(`convertedText: ` + convertedText)
                if (value !== convertedText) {
                    content.classList.add('hidden')
                } else {
                    content.classList.remove('hidden')
                }
            })
        }
    }
});

{{if and (.Pages) (.Site.Params.article.childArticles.display)}}
{{$titleTrunc := .Site.Params.article.childArticles.titleTrunc }}
{{$descTrunc := .Site.Params.article.childArticles.descTrunc }}
{{$count := .Site.Params.article.childArticles.count }}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    {{ range .Pages }}
        {{ if  .Params.hidden }}
            {{/* Do not show the hidden child page or its descendants */}}
        {{else}}
        <div class="rounded-lg shadow-md p-4 tile transition duration-300 space-y-2">
            <a href="{{ with .Params.externalRedirect}}{{.}}{{else}}{{.RelPermalink}}{{end}}" class="space-y-2">
                {{with .Params.icon}}<img src="/icons/light/{{.}}" alt="" class="w-5 h-5 icon">{{end}}
                <div class="text-xl text-black font-brand font-semibold">{{if .Params.linkTitle}} {{.Params.linkTitle}} {{else}}{{ .Title | truncate $titleTrunc}}{{end}}</div>
                {{ with .Description | truncate $descTrunc}}
                <p class="text-zinc-900 text-sm font-brand font-thin">{{ . }}</p>
                {{ end }}
            </a>
            {{if eq .BundleType "branch"}}

            <ul class="flex flex-wrap list-none p-0">
                {{ range first $count .Pages }}
                    {{ if  .Params.hidden }}
                        {{/* Do not show the hidden child page or its descendants */}}
                    {{else}}
                            <li class="my-2 mr-2">
                                <a href="{{ with .Params.externalRedirect}}{{.}}{{else}}{{.RelPermalink}}{{end}}" class="text-xs p-2 text-black font-brand font-thin hover:text-white bg-white hover:bg-brand hover:transition hover:duration-300 rounded">
                                    {{if eq .Parent.Title "Run Commands"}}{{ with replace .Title "pachctl " "" }}{{ . }}{{ end }}{{else}}{{if .Params.linkTitle}}{{.Params.linkTitle}}{{else}}{{ .Title | truncate 22 }}{{end}}{{end}}
                                </a>
                            </li>
                    {{end}}
                {{ end }}
            </ul>
            {{end}}
        </div>
        {{end}}
    {{ end }}
</div>

{{end}}