Add Lotusdocs theme
This commit is contained in:
Abner Coimbre
18
themes/lotusdocs/layouts/partials/docs/footer/docsearch.html
Normal file
18
themes/lotusdocs/layouts/partials/docs/footer/docsearch.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
// DocSearch Config
|
||||
docsearch({
|
||||
container: '#docsearch',
|
||||
appId: '{{ .Site.Params.docsearch.appID }}',
|
||||
apiKey: '{{ .Site.Params.docsearch.apiKey }}',
|
||||
indexName: '{{ .Site.Params.docsearch.indexName }}',
|
||||
placeholder: 'Search Documentation',
|
||||
translations: {
|
||||
button: {
|
||||
buttonText: '{{ i18n "search_title" }}',
|
||||
buttonAriaLabel: 'Search',
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
319
themes/lotusdocs/layouts/partials/docs/footer/feedback.html
Normal file
319
themes/lotusdocs/layouts/partials/docs/footer/feedback.html
Normal file
@@ -0,0 +1,319 @@
|
||||
{{ if eq .Site.Params.feedback.emoticonTpl true -}}
|
||||
{{ $emoticons := slice "very_satisfied" "satisfied" "dissatisfied" "very_dissatisfied" }}
|
||||
<div class="container d-flex align-items-center justify-content-center">
|
||||
<div id="feedback-widget-emoticon" class="mt-4">
|
||||
<div id="feedback-cta" class="d-flex justify-content-center py-1">
|
||||
<span class="fs-6 align-self-center align-middle ms-2 me-0">
|
||||
{{ i18n "feedback_helpful" | default "Was this page helpful?" }}
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<div class="form-emoji d-flex ps-2">
|
||||
{{ range $index, $value := $emoticons }}
|
||||
<div class="radio-emoji">
|
||||
<input type="radio" name="feedback-emoticon" autocomplete="off" value="{{ $value | humanize | title }}" id="radio_{{ $index }}" required>
|
||||
<label class="d-flex justify-content-center align-items-center" for="radio_{{ $index }}">
|
||||
{{ $emoticon := resources.Get ( printf "%s%s.svg" "images/icons/feedback/" $value ) }}
|
||||
{{ $emoticon.Content | safeHTML }}
|
||||
<!-- <i class="feedback-emoji material-icons">
|
||||
sentiment_{{ $value }}
|
||||
</i> -->
|
||||
</label>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="feedback-emoji-end" class="d-flex justify-content-md-start justify-content-sm-center">
|
||||
</div>
|
||||
|
||||
<div id="feedback-send">
|
||||
<div id="text-wrapper">
|
||||
<textarea id="textarea-emoji" cols="55" maxlength="500" rows="3" placeholder="(Optional) Try to be as specific and detailed as possible!" type="text" class="feedback-textarea-emoji p-2 mb-2"></textarea>
|
||||
</div>
|
||||
<div id="feedback-emoji-submit-container" class="d-flex justify-content-end">
|
||||
<button type="button" id="feedback-emoji-submit-button" class="feedback-submit-emoji-btn btn btn-sm btn-primary mt-1 mb-2" role="button" type="submit" disabled>
|
||||
{{ i18n "feedback_submit" | default "Submit" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const emojiTextWrapper = document.getElementById("text-wrapper");
|
||||
const emojiRadios = document.querySelectorAll('input[name="feedback-emoticon"]');
|
||||
const emojiContainer = document.getElementById("feedback-widget-emoticon");
|
||||
const feedbackEmojiCta = document.getElementById("feedback-cta");
|
||||
const feedbackEmojiSubmitContainer = document.getElementById("feedback-emoji-submit-container");
|
||||
const feedbackEmojiSubmitBtn = document.getElementById("feedback-emoji-submit-button");
|
||||
|
||||
// Show emoji text area
|
||||
emojiRadios.forEach(emojiRadio => {
|
||||
emojiRadio.addEventListener('change', function(event) {
|
||||
const emojiRadioID = event.target.id;
|
||||
emojiContainer.style.borderRadius = '8px'
|
||||
feedbackEmojiCta.classList.add("px-4");
|
||||
emojiTextWrapper.classList.add("is-visible");
|
||||
feedbackEmojiSubmitBtn.removeAttribute("disabled");
|
||||
feedbackEmojiSubmitContainer.classList.add("is-visible");
|
||||
// emojiTextWrapper.addEventListener('transitionend', function () {
|
||||
// // do something!!!
|
||||
// }
|
||||
// );
|
||||
})
|
||||
});
|
||||
|
||||
// Submit emoticon feedback to Google or Plausible analytics
|
||||
feedbackEmojiSubmitBtn.addEventListener('click', event => {
|
||||
const result = document.getElementById("feedback-emoji-end");
|
||||
const sendArea = document.getElementById("feedback-send");
|
||||
const rating = document.querySelector('input[name="feedback-emoticon"]:checked').value;
|
||||
const message = document.getElementById('textarea-emoji').value;
|
||||
function success(e) {
|
||||
feedbackEmojiCta.remove();
|
||||
sendArea.remove();
|
||||
result.innerHTML = '{{ .Site.Params.feedback.successMsg | default "Thank you for helping to improve our documentation!" }}';
|
||||
result.classList.add("is-visible");
|
||||
}
|
||||
try {
|
||||
{{ if .Site.Config.Services.GoogleAnalytics.ID -}}
|
||||
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "google") -}}
|
||||
gtag('event', '{{ replaceRE `( {1,})` "_" (.Site.Params.feedback.emoticonEventName | default "feedback" | lower) }}',
|
||||
{
|
||||
'rating': rating.replace(/\s+/g, '_').toLowerCase(),
|
||||
'message': message,
|
||||
'event_callback': success
|
||||
}
|
||||
),
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
{{ if .Site.Params.plausible.dataDomain -}}
|
||||
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "plausible") -}}
|
||||
plausible('{{ .Site.Params.feedback.emoticonEventName | default "Feedback" }}',
|
||||
{
|
||||
callback: success,
|
||||
props:
|
||||
{
|
||||
rating: rating,
|
||||
message: message
|
||||
}
|
||||
}
|
||||
)
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
feedbackEmojiCta.remove();
|
||||
sendArea.remove();
|
||||
result.innerHTML = '{{ .Site.Params.feedback.errorMsg | default "Sorry! There was an error while attempting to submit your feedback!" }}';
|
||||
result.classList.add("is-visible");
|
||||
}
|
||||
// console.log("feedback submitted")
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ else }}
|
||||
<div id="feedback-widget" class="feedback-container pt-4">
|
||||
<div id="feedback-init" class="d-flex justify-content-md-start justify-content-sm-center">
|
||||
<span class="fs-5 fw-bold me-2 align-self-center">{{ i18n "feedback_helpful" | default "Was this page helpful?" }}</span>
|
||||
<div class="d-flex">
|
||||
<button id="posBtn" class="feedback-btn btn btn-primary btn-sm me-2" type="submit">
|
||||
<span class="fs-6">
|
||||
<i class="material-icons me-1 align-middle">thumb_up</i>
|
||||
{{ i18n "feedback_yes" | default "Yes" }}
|
||||
</span>
|
||||
</button>
|
||||
<button id="negBtn" class="feedback-btn btn btn-primary btn-sm me-2" type="submit">
|
||||
<span class="fs-6">
|
||||
<i class="material-icons me-1 align-middle">thumb_down</i>
|
||||
{{ i18n "feedback_no" | default "No" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="feedback-end" class="d-flex justify-content-md-start justify-content-sm-center fs-4 fw-bold me-2">
|
||||
</div>
|
||||
|
||||
<div id="feedback-form-pos" data-type="positive" class="feedback-form justify-content-md-start justify-content-sm-center">
|
||||
<p class="fw-bold fs-5">{{ .Site.Params.feedback.positiveFormTitle | default "What did you like?" }}</p>
|
||||
|
||||
{{ range $index, $value := .Site.Params.feedback.positiveForm }}
|
||||
{{ $rating := (index . 0) }}
|
||||
{{ $description := (index . 1) }}
|
||||
<div class="form-check pb-1">
|
||||
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="{{ $rating | lower }}" id="radio{{ $index }}Pos" required>
|
||||
<label class="form-check-label" for="radio{{ $index }}Pos">
|
||||
{{ $rating }}
|
||||
{{ if $description }}
|
||||
<p class="feedback-radio-desc fw-normal mb-0">{{ $description }}</p>
|
||||
{{ end }}
|
||||
</label>
|
||||
</div>
|
||||
<div id="radio{{ $index }}PosTextContainer" class="feedback-textarea-container"></div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
<div id="feedback-form-neg" data-type="negative" class="feedback-form justify-content-sm-center">
|
||||
<p class="fw-bold fs-5">{{ .Site.Params.feedback.negativeFormTitle | default "What went wrong?" }}</p>
|
||||
|
||||
{{ range $index, $value := .Site.Params.feedback.negativeForm }}
|
||||
{{ $rating := (index . 0) }}
|
||||
{{ $description := (index . 1) }}
|
||||
<div class="form-check pb-1">
|
||||
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="{{ $rating | lower }}" id="radio{{ $index }}Neg" required>
|
||||
<label class="form-check-label" for="radio{{ $index }}Neg">
|
||||
{{ $rating }}
|
||||
{{ if $description }}
|
||||
<p class="feedback-radio-desc fw-normal mb-0">{{ $description }}</p>
|
||||
{{ end }}
|
||||
</label>
|
||||
</div>
|
||||
<div id="radio{{ $index }}NegTextContainer" class="feedback-textarea-container"></div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
<div id="feedback-submit-container">
|
||||
<button id="feedback-submit-button" class="feedback-submit-btn btn btn-primary mt-3" role="button" type="submit" disabled>
|
||||
<span class="fs-6">
|
||||
{{ i18n "feedback_submit" | default "Submit" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// https://stackoverflow.com/a/29017547
|
||||
const feedbackInit = document.getElementById("feedback-init");
|
||||
const posBtn = document.getElementById("posBtn");
|
||||
const negBtn = document.getElementById("negBtn");
|
||||
const feedbackBtn = document.querySelectorAll('.feedback-btn');
|
||||
const feedbackFormPos = document.getElementById("feedback-form-pos");
|
||||
const feedbackFormNeg = document.getElementById("feedback-form-neg");
|
||||
const feedbackSubmitBtn = document.getElementById("feedback-submit-button");
|
||||
const feedbackSubmitContainer = document.getElementById("feedback-submit-container");
|
||||
|
||||
// Show feedback form
|
||||
feedbackBtn.forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const btnID = btn.id
|
||||
feedbackInit.style.opacity = '0'
|
||||
feedbackInit.addEventListener('transitionend', function () {
|
||||
feedbackInit.remove();
|
||||
if (btnID == 'posBtn') {
|
||||
feedbackFormPos.classList.add("is-visible");
|
||||
feedbackFormNeg.remove();
|
||||
feedbackSubmitContainer.classList.add("is-visible");
|
||||
} else if (btnID == 'negBtn') {
|
||||
feedbackFormNeg.classList.add("is-visible");
|
||||
feedbackFormPos.remove();
|
||||
feedbackSubmitContainer.classList.add("is-visible");
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
});
|
||||
|
||||
// Add text area box to the selected feedback radio
|
||||
const Radios = document.querySelectorAll('input[name="feedback"]');
|
||||
const textareas = document.querySelectorAll('.feedback-textarea-container');
|
||||
|
||||
Radios.forEach(radio => {
|
||||
radio.addEventListener('change', function(event) {
|
||||
const radioID = event.target.id;
|
||||
const addOn = document.getElementById(radioID+"TextContainer");
|
||||
// First, remove 'activeBox' class and <textarea> from all textarea containers
|
||||
for (const textarea of textareas) {
|
||||
while (textarea.firstChild) {
|
||||
textarea.removeChild(textarea.firstChild);
|
||||
}
|
||||
}
|
||||
addOn.innerHTML +='<textarea id="textarea" cols="55" maxlength="500" rows="3" placeholder="(Optional) Try to be as specific and detailed as possible!" type="text" class="feedback-textarea p-2 mb-2"></textarea>';
|
||||
feedbackSubmitBtn.removeAttribute("disabled");
|
||||
// console.log(radioID);
|
||||
});
|
||||
});
|
||||
|
||||
// Submit feedback to Google or Plausible analytics
|
||||
feedbackSubmitBtn.addEventListener('click', event => {
|
||||
const form = document.querySelector('.feedback-form');
|
||||
const formType = form.getAttribute("data-type");
|
||||
const result = document.getElementById("feedback-end");
|
||||
const rating = document.querySelector('input[name="feedback"]:checked').value;
|
||||
const message = document.getElementById('textarea').value;
|
||||
function success(e) {
|
||||
form.remove();
|
||||
feedbackSubmitContainer.remove();
|
||||
result.innerHTML = '{{ .Site.Params.feedback.successMsg | default "Thank you for helping to improve our documentation!" }}';
|
||||
result.classList.add("is-visible");
|
||||
}
|
||||
try {
|
||||
if (formType == "positive") {
|
||||
{{ if .Site.Config.Services.GoogleAnalytics.ID -}}
|
||||
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "google") -}}
|
||||
gtag('event', '{{ replaceRE `( {1,})` "_" (.Site.Params.feedback.positiveEventName | default "Positive Feedback" | lower) }}',
|
||||
{
|
||||
'rating': rating,
|
||||
'message': message,
|
||||
'event_callback': success
|
||||
}
|
||||
),
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
{{ if .Site.Params.plausible.dataDomain -}}
|
||||
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "plausible") -}}
|
||||
plausible('{{ .Site.Params.feedback.positiveEventName | default "Positive Feedback" }}',
|
||||
{
|
||||
callback: success,
|
||||
props:
|
||||
{
|
||||
rating: rating,
|
||||
message: message
|
||||
}
|
||||
}
|
||||
)
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
} else if (formType == "negative") {
|
||||
{{ if .Site.Config.Services.GoogleAnalytics.ID -}}
|
||||
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "google") -}}
|
||||
gtag('event', '{{ replaceRE `( {1,})` "_" (.Site.Params.feedback.negativeEventName | default "Positive Feedback" | lower) }}',
|
||||
{
|
||||
'rating': rating,
|
||||
'message': message,
|
||||
'event_callback': success
|
||||
}
|
||||
),
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
{{ if .Site.Params.plausible.dataDomain -}}
|
||||
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "plausible") -}}
|
||||
plausible('{{ .Site.Params.feedback.negativeEventName | default "Negative Feedback" }}',
|
||||
{
|
||||
callback: success,
|
||||
props:
|
||||
{
|
||||
rating: rating,
|
||||
message: message
|
||||
}
|
||||
}
|
||||
)
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
form.remove();
|
||||
feedbackSubmitContainer.remove();
|
||||
result.innerHTML = '{{ .Site.Params.feedback.errorMsg | default "Sorry! There was an error while attempting to submit your feedback!" }}';
|
||||
result.classList.add("is-visible");
|
||||
}
|
||||
// console.log("feedback submitted")
|
||||
});
|
||||
|
||||
</script>
|
||||
{{ end }}
|
||||
215
themes/lotusdocs/layouts/partials/docs/footer/flexsearch.html
Normal file
215
themes/lotusdocs/layouts/partials/docs/footer/flexsearch.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<script type="module">
|
||||
var suggestions = document.getElementById('suggestions');
|
||||
var search = document.getElementById('flexsearch');
|
||||
|
||||
const flexsearchContainer = document.getElementById('FlexSearchCollapse');
|
||||
|
||||
const hideFlexsearchBtn = document.getElementById('hideFlexsearch');
|
||||
|
||||
const configObject = { toggle: false }
|
||||
const flexsearchContainerCollapse = new Collapse(flexsearchContainer, configObject) // initialized with no keyboard
|
||||
|
||||
if (search !== null) {
|
||||
document.addEventListener('keydown', inputFocus);
|
||||
flexsearchContainer.addEventListener('shown.bs.collapse', function () {
|
||||
search.focus();
|
||||
});
|
||||
// hide search collapse containder by clicking outside (except top header)
|
||||
var topHeader = document.getElementById("top-header");
|
||||
document.addEventListener('click', function(elem) {
|
||||
if (!flexsearchContainer.contains(elem.target) && !topHeader.contains(elem.target))
|
||||
flexsearchContainerCollapse.hide();
|
||||
});
|
||||
}
|
||||
|
||||
hideFlexsearchBtn.addEventListener('click', () =>{
|
||||
flexsearchContainerCollapse.hide()
|
||||
})
|
||||
|
||||
function inputFocus(e) {
|
||||
if (e.ctrlKey && e.key === '/') {
|
||||
e.preventDefault();
|
||||
flexsearchContainerCollapse.toggle();
|
||||
}
|
||||
if (e.key === 'Escape' ) {
|
||||
search.blur();
|
||||
// suggestions.classList.add('d-none');
|
||||
flexsearchContainerCollapse.hide();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
|
||||
var isClickInsideElement = suggestions.contains(event.target);
|
||||
|
||||
if (!isClickInsideElement) {
|
||||
suggestions.classList.add('d-none');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
Source:
|
||||
- https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
|
||||
*/
|
||||
|
||||
document.addEventListener('keydown',suggestionFocus);
|
||||
|
||||
function suggestionFocus(e) {
|
||||
const suggestionsHidden = suggestions.classList.contains('d-none');
|
||||
if (suggestionsHidden) return;
|
||||
|
||||
const focusableSuggestions= [...suggestions.querySelectorAll('a')];
|
||||
if (focusableSuggestions.length === 0) return;
|
||||
|
||||
const index = focusableSuggestions.indexOf(document.activeElement);
|
||||
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
const nextIndex = index > 0 ? index - 1 : 0;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
else if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
Source:
|
||||
- https://github.com/nextapps-de/flexsearch#index-documents-field-search
|
||||
- https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
|
||||
*/
|
||||
|
||||
(function(){
|
||||
|
||||
var index = new FlexSearch.Document({
|
||||
// charset: "latin:default",
|
||||
tokenize: {{ .Site.Params.flexsearch.tokenize | default "forward" }},
|
||||
minlength: {{ .Site.Params.flexsearch.minQueryChar | default 0}},
|
||||
cache: {{ .Site.Params.flexsearch.cache | default 100 }},
|
||||
optimize: {{ .Site.Params.flexsearch.optimize | default true }},
|
||||
document: {
|
||||
id: 'id',
|
||||
store: [
|
||||
"href", "title", "description"
|
||||
],
|
||||
index: ["title", "description", "content"]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents
|
||||
|
||||
|
||||
// var docs = [
|
||||
// {{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
|
||||
// {
|
||||
// id: {{ $index }},
|
||||
// href: {{ .Permalink }},
|
||||
// title: {{ .Title }},
|
||||
// description: {{ .Params.description }},
|
||||
// content: {{ .Content }}
|
||||
// },
|
||||
// {{ end -}}
|
||||
// ];
|
||||
|
||||
|
||||
// https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
|
||||
|
||||
{{ $list := slice }}
|
||||
{{- if and (isset .Site.Params.flexsearch "searchsectionsindex") (not (eq (len .Site.Params.flexsearch.searchSectionsIndex) 0)) }}
|
||||
{{- if eq .Site.Params.flexsearch.searchSectionsIndex "ALL" }}
|
||||
{{- $list = .Site.Pages }}
|
||||
{{- else }}
|
||||
{{- $list = (where .Site.Pages "Type" "in" .Site.Params.flexsearch.searchSectionsIndex) }}
|
||||
{{- if (in .Site.Params.flexsearch.searchSectionsIndex "HomePage") }}
|
||||
{{ $list = $list | append .Site.Home }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
{{- $list = (where .Site.Pages "Section" ($.Scratch.Get "pathName")) }}
|
||||
{{- end }}
|
||||
|
||||
{{ $len := (len $list) -}}
|
||||
|
||||
{{ range $index, $element := $list -}}
|
||||
index.add(
|
||||
{
|
||||
id: {{ $index }},
|
||||
href: "{{ .RelPermalink }}",
|
||||
title: {{ .Title }},
|
||||
{{ with .Description -}}
|
||||
description: {{ . }},
|
||||
{{ else -}}
|
||||
description: {{ .Summary | htmlUnescape | plainify }},
|
||||
{{ end -}}
|
||||
content: {{ .Content | htmlUnescape | plainify }}
|
||||
}
|
||||
);
|
||||
{{ end -}}
|
||||
|
||||
search.addEventListener('input', show_results, true);
|
||||
|
||||
function show_results(){
|
||||
const maxResult = {{ .Site.Params.flexsearch.maxResult | default 5}};
|
||||
const minlength = {{ .Site.Params.flexsearch.minQueryChar | default 0}};
|
||||
var searchQuery = sanitizeHTML(this.value);
|
||||
var results = index.search(searchQuery, {limit: maxResult, enrich: true});
|
||||
|
||||
// flatten results since index.search() returns results for each indexed field
|
||||
const flatResults = new Map(); // keyed by href to dedupe results
|
||||
for (const result of results.flatMap(r => r.result)) {
|
||||
if (flatResults.has(result.doc.href)) continue;
|
||||
flatResults.set(result.doc.href, result.doc);
|
||||
}
|
||||
|
||||
suggestions.innerHTML = "";
|
||||
suggestions.classList.remove('d-none');
|
||||
|
||||
// inform user of search query minimum character requirement
|
||||
if (searchQuery.length < minlength) {
|
||||
const minCharMessage = document.createElement('div')
|
||||
minCharMessage.innerHTML = `Please type at least <strong>${minlength}</strong> characters`
|
||||
minCharMessage.classList.add("suggestion__no-results");
|
||||
suggestions.appendChild(minCharMessage);
|
||||
return;
|
||||
} else {
|
||||
// inform user that no results were found
|
||||
if (flatResults.size === 0 && searchQuery) {
|
||||
const noResultsMessage = document.createElement('div')
|
||||
noResultsMessage.innerHTML = {{ i18n "search_no_results" | default "No results for" }} + ` "<strong>${searchQuery}</strong>"`
|
||||
noResultsMessage.classList.add("suggestion__no-results");
|
||||
suggestions.appendChild(noResultsMessage);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// construct a list of suggestions
|
||||
for(const [href, doc] of flatResults) {
|
||||
const entry = document.createElement('div');
|
||||
suggestions.appendChild(entry);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = href;
|
||||
entry.appendChild(a);
|
||||
|
||||
const title = document.createElement('span');
|
||||
title.textContent = doc.title;
|
||||
title.classList.add("suggestion__title");
|
||||
a.appendChild(title);
|
||||
|
||||
const description = document.createElement('span');
|
||||
description.textContent = doc.description;
|
||||
description.classList.add("suggestion__description");
|
||||
a.appendChild(description);
|
||||
|
||||
suggestions.appendChild(entry);
|
||||
|
||||
if(suggestions.childElementCount == maxResult) break;
|
||||
}
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
@@ -0,0 +1,57 @@
|
||||
{{ $dayjs := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/dayjs.min.js") }}
|
||||
{{ $relativeTime := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/relativeTime.min.js") }}
|
||||
{{ $app := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/app.js") -}}
|
||||
|
||||
{{ $slice := slice $dayjs $relativeTime $app -}}
|
||||
|
||||
{{ if and (.Site.Params.docsearch.appID) (.Site.Params.docsearch.apiKey) -}}
|
||||
{{ $docsearch := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/docsearch.min.js") }}
|
||||
{{ $slice = $slice | append $docsearch -}}
|
||||
{{ end }}
|
||||
|
||||
{{ if site.Params.docs.toc | default true }}
|
||||
{{ if eq .Site.Params.docs.scrollSpy true -}}
|
||||
{{ $simplescrollspy := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/simple-scrollspy.min.js") }}
|
||||
{{ $slice = $slice | append $simplescrollspy -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if eq .Site.Params.docs.scrollSpy true -}}
|
||||
{{ $scrollspyScript := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/scrollspy-script.js") }}
|
||||
{{ $scrollspyScript := $scrollspyScript | js.Build -}}
|
||||
{{ $slice = $slice | append $scrollspyScript -}}
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if site.Params.docs.tocMobile | default true }}
|
||||
{{ $tocmobilescrollspy := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/toc-mobile-scrollspy.js") }}
|
||||
{{ $slice = $slice | append $tocmobilescrollspy -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ if eq .Site.Params.docs.prism true -}}
|
||||
{{ $prism := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/prism.js") }}
|
||||
{{- $opts := dict
|
||||
"params" (dict "langPath" (urls.JoinPath .Site.BaseURL "docs/js/components/"))
|
||||
-}}
|
||||
{{ $prism := $prism | js.Build $opts -}}
|
||||
{{ $slice = $slice | append $prism -}}
|
||||
{{ end -}}
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
{{ $js := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/bootstrap.js") }}
|
||||
{{ $params := dict }}
|
||||
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
|
||||
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
|
||||
{{ $js = $js | js.Build $opts }}
|
||||
{{ if hugo.IsProduction }}
|
||||
{{ $js = $js | fingerprint "sha384" }}
|
||||
{{ end }}
|
||||
<script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end -}} defer></script>
|
||||
|
||||
{{ $js := $slice | resources.Concat (printf "/%s/%s" ($.Scratch.Get "pathName") "js/bundle.js") -}}
|
||||
|
||||
{{- if not hugo.IsServer }}
|
||||
{{- $js := $js | minify | fingerprint "sha384" }}
|
||||
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
{{- else }}
|
||||
<script type="text/javascript" src="{{ $js.Permalink }}" defer></script>
|
||||
{{- end }}
|
||||
16
themes/lotusdocs/layouts/partials/docs/footer/katex.html
Normal file
16
themes/lotusdocs/layouts/partials/docs/footer/katex.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
renderMathInElement(document.getElementById("content"), {
|
||||
// customised options
|
||||
// • auto-render specific keys, e.g.:
|
||||
delimiters: [
|
||||
{left: '$$', right: '$$', display: true},
|
||||
{left: '$', right: '$', display: false},
|
||||
{left: '\\(', right: '\\)', display: false},
|
||||
{left: '\\[', right: '\\]', display: true}
|
||||
],
|
||||
// • rendering keys, e.g.:
|
||||
throwOnError : false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user