tag, first let's do the opening tag
+ let postProcessedOpeningTag = '';
+ if (item.tag === 'pre' || item.tag === 'textarea') {
+ postProcessedOpeningTag = '';
+ postProcessedCode = makeCodeStringShorter(item._highlightResult.content.value);
+ } else { // Otherwise, wrap the content in a tag
+ postProcessedOpeningTag = '
'
+ postProcessedCode = item._highlightResult.content.value;
+ }
+
+ // If the tag is pre or textarea, wrap the content in a
tag, now let's do the closing tag
+ let postProcessedClosingTag = '';
+ if (item.tag === 'pre' || item.tag === 'textarea') {
+ postProcessedClosingTag = '';
+ } else { // Otherwise, wrap the content in a tag
+ postProcessedClosingTag = '
'
+ }
+ // END "Postprocess" the content
+
+ // Only if curated is true, show a sticky label
+ let itemCurated = item.curated === true ? `Sticky
` : '';
+
+ // Only if siteName is not empty, show it
+ let itemSiteNameTemplateString = item.siteName !== '' ? `${item._highlightResult.siteName.value}` : '';
+
+ // Only if title is not empty, show it
+ // mb-4
+ let itemTitleTemplateString = item.pageTitle !== '' ? `${item._highlightResult.pageTitle.value}
` : '';
+
+ // Only if author is not empty, show it
+ let itemAuthorTemplateString = item.author !== '' ? `• ${item._highlightResult.author.value}` : '';
+
+ // Add class to img based on imgWidth (img that are under 301 are assumed to be logos etc, above 301 are assumed to be explanations, flowcharts, etc)
+ let imgClass = '';
+ item.imgWidth < 301 ? imgClass = "inline-thumb-start" : imgClass = "";
+
+ // Only if imgUrl is not empty, show it
+ let itemImgUrlTemplateString = item.imgUrl !== '' ? `
` : '';
+
+ // Only if imgMeta is not empty, show it
+ let itemImgMetaTemplateString = item.imgMeta !== '' ? `${item._highlightResult.imgMeta.value}
` : '';
+
+ // Only if creationDate is not empty, show it
+ let itemCreationDateTemplateString = item.creationDate !== '' ? `• ${item.creationDate}` : '';
+
+ // Only if knowledgeLevel is not empty, show it
+ let itemKnowledgeLevelTemplateString = item.knowledgeLevel !== '' ? `• Level: ${item.knowledgeLevel}` : '';
+
+ // Only if type is not empty, show it
+ let itemTypeTemplateString = item.type !== '' ? `• ${item.type}` : '';
+
+ // Only if hierarchy.lvl1 is not empty, show it
+ let itemHierarchyLvl1TemplateString = item['hierarchy.lvl1'] !== '' ? `• ${item['hierarchy.lvl1']}` : '';
+
+ // Only if firstHeadingBeforeElement is not empty, show it
+ let itemFirstHeadingBeforeElementTemplateString = item.firstHeadingBeforeElement !== '' ? `${item.firstHeadingBeforeElement}
` : '';
+
+ let siteBrandingClass = '';
+ if (item.siteName === "Gleif website") {
+ siteBrandingClass = "gleif";
+ }
+ if (item.siteName === "eSSIF-Lab") {
+ siteBrandingClass = "essif-lab";
+ }
+ if (item.siteName === "KERISSE (this site)") {
+ siteBrandingClass = "kerisse";
+ }
+ return `
+
+
+ ${itemCurated} Found on: ${itemSiteNameTemplateString}
+
+
+
+ ${item._highlightResult.url.value}
+ ${itemAuthorTemplateString}
+ ${itemCreationDateTemplateString}
+ ${itemKnowledgeLevelTemplateString}
+ ${itemTypeTemplateString}
+ ${itemHierarchyLvl1TemplateString}
+
+
+ ${itemTitleTemplateString}
+ ${itemFirstHeadingBeforeElementTemplateString}
+
+ ${postProcessedOpeningTag}
+ ${postProcessedCode}
+ ${postProcessedClosingTag}
+
+ ${itemImgUrlTemplateString}
+ ${itemImgMetaTemplateString}
+
+
+
+ `;
+ },
+ },
+ }),
+
+ pagination({
+ container: '#pagination',
+ }),
+ clearRefinements({
+ container: '#clear-refinements',
+ templates: {
+ resetLabel: 'Clear filters'
+ },
+ cssClasses: {
+ button: 'btn btn-secondary btn-sm align-content-center mb-5 mt-3'
+ }
+ }),
+ currentRefinements({
+ container: '#current-refinements-list',
+ cssClasses: {
+ list: 'list-unstyled',
+ item: '',
+ delete: 'btn btn-sm btn-link text-decoration-none p-0 px-2',
+ },
+ transformItems: (items) => {
+ // hide the heading if there are no current refinements
+ document.querySelector("#current-refinements-list-container").classList.add("d-none");
+ const labelLookup = {
+ content: 'Content',
+ author: 'Author',
+ category: 'Category',
+ source: 'Source',
+ mediaType: 'File type',
+ };
+ const modifiedItems = items.map((item) => {
+ // show the heading if there are current refinements
+ document.querySelector("#current-refinements-list-container").classList.remove("d-none");
+ return {
+ ...item,
+ label: labelLookup[item.attribute] || '',
+ };
+ });
+ return modifiedItems;
+ },
+ }),
+ // Currently not useful
+ // sortBy({
+ // container: '#sort-by',
+ // items: [
+ // { label: 'Default Sort', value: 'Wot-terms' },
+ // { label: 'Content Length: Low to High', value: 'Wot-terms/sort/contentLength:asc' },
+ // { label: 'Content Length: High to Low', value: 'Wot-terms/sort/contentLength:desc' },
+ // ],
+ // cssClasses: {
+ // select: 'form-select form-select-sm mb-2 border-light-2',
+ // },
+ // }),
+
+ // // KNOWLEDGELEVEL
+ // refinementList({
+ // container: '#knowledgelevel-refinement-list',
+ // attribute: 'knowledgeLevel',
+ // searchable: false,
+ // searchablePlaceholder: 'Search knowledge level',
+ // showMore: false,
+ // cssClasses: {
+ // searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ // searchableSubmit: 'hidden',
+ // searchableReset: 'hidden',
+ // showMore: 'btn btn-secondary btn-sm align-content-center',
+ // list: 'list-unstyled',
+ // count: '',
+ // label: '',
+ // checkbox: 'me-2',
+ // },
+
+ // sortBy: ['name:asc', 'count:desc'],
+ // }),
+ // // TYPE
+ // refinementList({
+ // container: '#type-refinement-list',
+ // attribute: 'type',
+ // searchable: false,
+ // searchablePlaceholder: 'Search type',
+ // showMore: false,
+ // cssClasses: {
+ // searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ // searchableSubmit: 'hidden',
+ // searchableReset: 'hidden',
+ // showMore: 'btn btn-secondary btn-sm align-content-center',
+ // list: 'list-unstyled',
+ // count: '',
+ // label: '',
+ // checkbox: 'me-2',
+ // },
+
+ // sortBy: ['name:asc', 'count:desc'],
+ // }),
+ // // SUBJECT
+ // refinementList({
+ // container: '#subject-refinement-list',
+ // attribute: 'hierarchy.lvl1',
+ // searchable: false,
+ // searchablePlaceholder: 'Subject',
+ // showMore: false,
+ // cssClasses: {
+ // searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ // searchableSubmit: 'hidden',
+ // searchableReset: 'hidden',
+ // showMore: 'btn btn-secondary btn-sm align-content-center',
+ // list: 'list-unstyled',
+ // count: '',
+ // label: '',
+ // checkbox: 'me-2',
+ // },
+ // sortBy: ['name:asc', 'count:desc'],
+ // }),
+ // TAG
+
+ refinementListImageToggle({
+ container: '#tag-refinement-list',
+ attribute: 'tag',
+ // Include other necessary widget options here
+ transformItems: items => items.filter(item => ['img'].includes(item.label)),
+ limit: 1000
+ }),
+
+ // CATEGORY
+ refinementList({
+ container: '#category-refinement-list',
+ attribute: 'category',
+ searchable: true,
+ searchablePlaceholder: 'Category',
+ showMore: false,
+ // max_facet_values: 100, TODO: does this work?
+ cssClasses: {
+ searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ searchableSubmit: 'hidden',
+ searchableReset: 'hidden',
+ showMore: 'btn btn-secondary btn-sm align-content-center',
+ list: 'list-unstyled',
+ count: '',
+ label: '',
+ checkbox: 'me-2',
+ },
+ sortBy: ['name:asc', 'count:desc'],
+ }),
+ // SOURCE
+ refinementList({
+ container: '#source-refinement-list',
+ attribute: 'source',
+ searchable: true,
+ searchablePlaceholder: 'Source',
+ showMore: true,
+ // max_facet_values: 100, TODO: does this work?
+ cssClasses: {
+ searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ searchableSubmit: 'hidden',
+ searchableReset: 'hidden',
+ showMore: 'btn btn-secondary btn-sm align-content-center',
+ list: 'list-unstyled',
+ count: '',
+ label: '',
+ checkbox: 'me-2',
+ },
+ sortBy: ['name:asc', 'count:desc'],
+ }),
+
+ refinementList({
+ container: '#author-refinement-list',
+ attribute: 'author',
+ searchable: true,
+ searchablePlaceholder: 'Author',
+ showMore: true,
+ // max_facet_values: 100,TODO: does this work?
+ cssClasses: {
+ searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ searchableSubmit: 'hidden',
+ searchableReset: 'hidden',
+ showMore: 'btn btn-secondary btn-sm align-content-center',
+ list: 'list-unstyled',
+ count: '',
+ label: '',
+ checkbox: 'me-2',
+ },
+ sortBy: ['name:asc', 'count:desc'],
+ }),
+ // MEDIATYPE
+ refinementList({
+ container: '#media-type-refinement-list',
+ attribute: 'mediaType',
+ searchable: true,
+ searchablePlaceholder: 'File type',
+ showMore: true,
+ // max_facet_values: 100,TODO: does this work?
+ cssClasses: {
+ searchableInput: 'form-control form-control-sm mb-2 border-light-2',
+ searchableSubmit: 'hidden',
+ searchableReset: 'hidden',
+ showMore: 'btn btn-secondary btn-sm align-content-center',
+ list: 'list-unstyled',
+ count: '',
+ label: '',
+ checkbox: 'me-2',
+ },
+ sortBy: ['name:asc', 'count:desc'],
+ }),
+ ]);
+
+ // function handleSearchTermClick(event) {
+ // const searchBox = document.querySelector('#search-box input[type=search]');
+ // search.helper.clearRefinements();
+ // searchBox.val(event.currentTarget.textContent);
+ // search.helper.setQuery(searchBox.val()).search();
+ // }
+
+ // search.on('render', function () {
+ // // Make artist names clickable
+ // // $('#hits .clickable-search-term').on('click', handleSearchTermClick);
+ // document.querySelectorAll('.hit-url a').forEach((el) => {
+ // el.addEventListener('click', handleSearchTermClick);
+ // });
+ // });
+
+ search.start();
+};
+
+export function onRouteDidUpdate({ location, previousLocation }) {
+ // Don't execute if we are still on the same page; the lifecycle may be fired
+ // because the hash changes (e.g. when navigating between headings)
+ if (location.pathname === previousLocation?.pathname) return;
+ typeSenseInstantSearch();
+}
+```
+
+' + + text + + '
Visit link to see more.
', + }); + } + }); +}; + +export function onRouteDidUpdate({ location, previousLocation }) { + // Don't execute if we are still on the same page; the lifecycle may be fired + // because the hash changes (e.g. when navigating between headings) + if (location.pathname === previousLocation?.pathname) return; + showDefinitionsPopUpOnClick(); +} +``` + + elements on the page
+ const preElements = document.querySelectorAll('pre');
+
+ // For each element
+ preElements.forEach(pre => {
+ // Find the first element
+ const mark = pre.querySelector('mark');
+
+ if (mark) {
+ // Get the position of the relative to its parent
+ const startPosition = mark.getBoundingClientRect().left;
+ const parentStart = pre.getBoundingClientRect().left;
+
+ // Calculate the offset
+ const scrollOffset = startPosition - parentStart;
+
+ // Scroll the parent horizontally
+ pre.scrollLeft = scrollOffset;
+ }
+
+ });
+}
+
+function addRandomArrowClassToMarkElement() {
+ const markElements = document.querySelectorAll('mark');
+
+ markElements.forEach(item => {
+ // Add a random arrow to the element. A little bit of fun. Check the css file for the arrow variants.
+ const variant = Math.floor(Math.random() * 19) + 1;
+ item.className = '';
+ item.classList.add('variation' + variant);
+ });
+}
+
+const makeKeywordsStandOut = () => {
+ // Select the node that you want to observe
+ const targetNode = document.getElementById('hits'); // Works, presumable because it's harcoded in the html
+ // const targetNode = document.querySelector('.ais-Hits-list');// Does not work
+
+ // Create an observer instance with a callback function
+ var observer = new MutationObserver(function (mutationsList) {
+ for (var mutation of mutationsList) {
+ if (mutation.type == 'childList') {
+ // console.log('Content of the target node has changed.');
+ scrollToMarkElementInPre();
+ addRandomArrowClassToMarkElement();
+ }
+ }
+ });
+
+ // Configuration of the observer:
+ var config = {
+ childList: true, // observe direct children addition/removal
+ attributes: false, // don't observe attribute changes
+ characterData: true, // don't observe text changes
+ subtree: true // observe any descendant changes
+ };
+
+ // Start observing the target node with the configured parameters
+ observer.observe(targetNode, config);
+
+ // Later, you can stop observing
+ // observer.disconnect();
+};
+
+export function onRouteDidUpdate({ location, previousLocation }) {
+ // Don't execute if we are still on the same page; the lifecycle may be fired
+ // because the hash changes (e.g. when navigating between headings)
+ // if (location.pathname === previousLocation?.pathname) return;
+ makeKeywordsStandOut();
+}
+```
+
+
Commit ${index + 1}
+| ${commit.commit.committer.name} (${commit.commit.committer.email}) | +|
| on | +` + date.toDateString() + ` | +
| sha: | +` + commit.sha + ` | +
| verification | ++ |
More about ${textFragment.keyword}:
+```
+```
+
+```
+```
+
+```
+```
+
+```
+You can insert images using Markdown but you cannot style these images using classes (CSS). So that is not very usable. That is why we use html syntax.
+
+Images are styled via CSS.
+
+The following classes are available for styling (there is a copy button available at the right):
+```
+inline-thumb-start
+```
+```
+inline-thumb-end
+```
+```
+inline-small-start
+```
+```
+inline-small-end
+```
+```
+inline-medium-start
+```
+```
+inline-medium-end
+```
+Start means “to the left” (in left-to-right languages).
+
+When no class is added the image will be 100% width.
+
+TBW
+
+More info: [https://docusaurus.io/docs/markdown-features/assets#images](https://docusaurus.io/docs/markdown-features/assets#images)
+
+Use
+
+- [kebab-case](https://en.wikipedia.org/wiki/Naming_convention_\(programming\)#Delimiter-separated_words)
+- all lower case (except… in the glossary, where you will find files like `ACDC.md` etc. These abbreviations need to be uppercase)
+
+This is how it is done in a default Docusaurus install.
+
+Examples:
+
+Directory: `tutorial-basics`
+
+File: `create-a-page.md`
+
+Combined: `tutorial-basics/create-a-page.md`
+
+No conventions (yet), except two:
+
+- remove spaces and replace with dash, underscore or nothing.
+- put all media files in `/static` (and not in an image dir somewhere in `/doc`).
+
+The sidebar menu is autogenerated and sorted alphanumerically.
+```
+├── concepts
+│ ├── concepts.md
+│ └── keri-dev-env.md
+├── education
+│ ├── intro.md
+```
+The directories “concepts” and “education” are called “categories” in Docusaurus. To give them a custom order, do as follows:
+```
+├── 02_concepts
+│ ├── concepts.md
+│ └── keri-dev-env.md
+├── 01_education
+│ ├── intro.md
+```
+As a bonus effect, the Visual Studio File Explorer will rearrange the directories, so will other systems like MacOS Finder etc. It is simple, effective (and intuitive for most people).
+
+The `01_` and `02_` are removed and not visible in the browser. Renumbering will change paths in internal links but Visual Studio Code will fix these paths for you if you [have configured it to do so](#strongly-recommended).
+
+Thank you for going all the way down the cheat sheet. Have a great time writing!
+
+