adoralaura/compose-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add fork

Browse source
This commit is contained in:
Adora Laura Kalb 2024-07-26 17:08:59 +02:00
commit 263ba0d329
Signed by: adoralaura
SSH key fingerprint: SHA256:3XrkbR8ikAZJVtYfaUliX1MhmJYVAe/ocIb/MiDHBJ8
228 changed files with 9742 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.gitignore vendored Normal file
View file

@ -0,0 +1,7 @@
public/
node_modules/
.DS_Store
package-lock.json
yarn.lock
__generated__
.hugo_build.lock

24
CODE_OF_CONDUCT.md Normal file
View file

@ -0,0 +1,24 @@
# Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Will be civil
* Focusing on what is best for the community
Examples of unacceptable behavior by participants include:
* Trolling, insulting/derogatory comments, and personal or political attacks
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior. They also have the right to proceed as they wish. Usually on a __good-faith__ basis.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at . All
complaints will be neither be reviewed nor investigated. Instigators will simply be ignored or blocked.

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Weru
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

50
README.md Normal file
View file

@ -0,0 +1,50 @@
# Compose
Compose is a [Hugo](https://gohugo.io/) theme for documentation websites. The theme provides a simple navigation & structure.
![Hugo Compose Theme](https://raw.githubusercontent.com/onweru/compose/master/images/tn.png)
## Features
1. Documentation
2. Gallery Support
3. Native lazy loading of images
4. Live search
5. Flowcharts, Piecharts, doughnut & bar charts support
6. Searchable & Sortable tables
7. Syntax highlighting
8. Mermaid Support
## Documentation
- [Install Compose theme](https://composedocs.netlify.app/docs/compose/install-theme/)
- [Use Tina CMS](https://composedocs.netlify.app/docs/compose/use-tina-cms/)
- [Customize your site](https://composedocs.netlify.app/docs/compose/customize/)
- [Configure search](https://composedocs.netlify.app/docs/compose/search/)
- [Shortcodes](https://composedocs.netlify.app/docs/compose/shortcodes/)
- [Mermaid](https://composedocs.netlify.app/docs/compose/mermaid/)
## ExampleSite
The [exampleSite](https://github.com/onweru/compose/tree/master/exampleSite) serves as this theme's [user guide](https://composedocs.netlify.app/docs/compose/install-theme/) .
This guide covers the necessary bits. As the project evolves, the user-guide will get more comprehensive
You can use Hugo to generate and serve a local copy of the guide (also useful for testing local theme changes).
```
git clone --recurse-submodules --depth 1 https://github.com/onweru/compose.git
cd compose/exampleSite/
hugo server --themesDir ../..
```
### Also built by Weru
1. [Clarity Theme](https://github.com/chipzoller/hugo-clarity)
2. [Newsroom Theme](https://github.com/onweru/newsroom)
3. [Swift Theme](https://github.com/onweru/hugo-swift-theme)
4. [Browse Theme](https://github.com/onweru/browse)
## License
This theme is available under the [MIT license](https://github.com/onweru/compose/blob/master/LICENSE).

301
assets/js/code.js Normal file
View file

@ -0,0 +1,301 @@
const snippet_actions = [
{
icon: 'copy',
id: 'copy',
title: copy_text,
show: true
},
{
icon: 'order',
id: 'lines',
title: toggle_line_numbers_text,
show: true
},
{
icon: 'carly',
id: 'wrap',
title: toggle_line_wrap_text,
show: false
},
{
icon: 'expand',
id: 'expand',
title: resize_snippet,
show: false
}
];
function addLines(block) {
let text = block.textContent;
const snippet_fragment = [];
if (text.includes('\n') && block.closest('pre') && !block.children.length) {
text = text.split('\n');
text.forEach((text_node, index) => {
if(text_node.trim().length) {
const new_node = `
<span class="line line-flex">
<span class="ln">${index + 1}</span>
<span class="cl">${text_node.trim()}</span>
</span>`.trim();
// snippet_fragment.push(':;:');
snippet_fragment.push(new_node);
block.closest('pre').className = 'chroma';
pushClass(block, 'language-unknown');
block.dataset.lang = not_set;
}
});
block.innerHTML = snippet_fragment.join('').trim(' ');
}
}
function wrapOrphanedPreElements() {
const pres = elems('pre');
Array.from(pres).forEach(function(pre){
const parent = pre.parentNode;
const is_orpaned = !containsClass(parent, highlight);
if(is_orpaned) {
const pre_wrapper = createEl();
pre_wrapper.className = highlight;
const outer_wrapper = createEl();
outer_wrapper.className = highlight_wrap;
wrapEl(pre, pre_wrapper);
wrapEl(pre_wrapper, outer_wrapper);
}
})
/*
@Todo
1. Add UI control to orphaned blocks
*/
}
wrapOrphanedPreElements();
function codeBlocks() {
const marked_code_blocks = elems('code');
const blocks = Array.from(marked_code_blocks).filter(function(block){
addLines(block);
return block.closest("pre") && !Array.from(block.classList).includes('noClass');
}).map(function(block){
return block
});
return blocks;
}
function codeBlockFits(block) {
// return false if codeblock overflows
const block_width = block.offsetWidth;
const highlight_block_width = block.closest(`.${highlight}`).offsetWidth;
return block_width <= highlight_block_width ? true : false;
}
function maxHeightIsSet(elem) {
let max_height = elem.style.maxHeight;
return max_height.includes('px')
}
function restrainCodeBlockHeight(lines) {
const last_line = lines[max_lines-1];
let max_code_block_height = full_height;
if(last_line) {
const last_line_pos = last_line.offsetTop;
if(last_line_pos !== 0) {
max_code_block_height = `${last_line_pos}px`;
const codeBlock = lines[0].parentNode;
const outer_block = codeBlock.closest(`.${highlight}`);
const is_expanded = containsClass(outer_block, panel_expanded);
if(!is_expanded) {
codeBlock.dataset.height = max_code_block_height;
codeBlock.style.maxHeight = max_code_block_height;
}
}
}
}
const blocks = codeBlocks();
function collapseCodeBlock(block) {
const lines = elems(line_class, block);
const code_lines = lines.length;
if (code_lines > max_lines) {
const expand_dot = createEl()
pushClass(expand_dot, panel_expand);
pushClass(expand_dot, panel_from);
expand_dot.title = "Toggle snippet";
expand_dot.textContent = "...";
const outer_block = block.closest('.highlight');
window.setTimeout(function(){
const expand_icon = outer_block.nextElementSibling.lastElementChild;
deleteClass(expand_icon, panel_hide);
}, 150)
restrainCodeBlockHeight(lines);
const highlight_element = block.parentNode.parentNode;
highlight_element.appendChild(expand_dot);
}
}
blocks.forEach(function(block){
collapseCodeBlock(block);
})
function actionPanel() {
const panel = createEl();
panel.className = panel_box;
snippet_actions.forEach(function(button) {
// create button
const btn = createEl('a');
btn.href = '#';
btn.title = button.title;
btn.className = `icon panel_icon panel_${button.id}`;
button.show ? false : pushClass(btn, panel_hide);
// load icon inside button
loadSvg(button.icon, btn);
// append button on panel
panel.appendChild(btn);
});
return panel;
}
function toggleLineNumbers(elems) {
if(elems) {
// mark the code element when there are no lines
elems.forEach(elem => modifyClass(elem, 'pre_nolines'));
restrainCodeBlockHeight(elems);
}
}
function toggleLineWrap(elem) {
modifyClass(elem, 'pre_wrap');
// retain max number of code lines on line wrap
const lines = elems('.ln', elem);
restrainCodeBlockHeight(lines);
}
function copyCode(code_element) {
const copy_btn = code_element.parentNode.parentNode.querySelector(`.${copy_id}`);
const original_title = copy_btn.title;
loadSvg('check', copy_btn);
copy_btn.title = copied_text;
// remove line numbers before copying
code_element = code_element.cloneNode(true);
const line_numbers = elems('.ln', code_element);
line_numbers.length ? line_numbers.forEach(line => line.remove()) : false;
// remove leading '$' from all shell snippets
let lines = elems('span', code_element);
lines.forEach(line => {
const text = line.textContent.trim(' ');
if(text.indexOf('$') === 0) {
line.textContent = line.textContent.replace('$ ', '');
}
})
const snippet = code_element.textContent.trim(' ');
// copy code
copyToClipboard(snippet);
setTimeout(function() {
copy_btn.title = original_title;
loadSvg('copy', copy_btn);
}, 2250);
}
(function codeActions(){
const highlight_wrap_id = highlight_wrap;
blocks.forEach(function(block){
// disable line numbers if disabled globally
show_lines === false ? toggleLineNumbers(elems('.ln', block)) : false;
const highlight_element = block.parentNode.parentNode;
// wrap code block in a div
const highlight_wrapper = createEl();
highlight_wrapper.className = highlight_wrap_id;
wrapEl(highlight_element, highlight_wrapper);
const panel = actionPanel();
// show wrap icon only if the code block needs wrapping
const wrap_icon = elem(`.${wrap_id}`, panel);
codeBlockFits(block) ? false : deleteClass(wrap_icon, panel_hide);
// append buttons
highlight_wrapper.appendChild(panel);
});
function isItem(target, id) {
// if is item or within item
return target.matches(`.${id}`) || target.closest(`.${id}`);
}
function showActive(target, targetClass) {
const target_element = target.matches(`.${targetClass}`) ? target : target.closest(`.${targetClass}`);
deleteClass(target_element, active);
setTimeout(function() {
modifyClass(target_element, active)
}, 50)
}
doc.addEventListener('click', function(event){
// copy code block
const target = event.target;
const is_copy_icon = isItem(target, copy_id);
const is_wrap_icon = isItem(target, wrap_id);
const is_lines_icon = isItem(target, lines_id);
const is_expand_icon = isItem(target, panel_expand);
const is_actionable = is_copy_icon || is_wrap_icon || is_lines_icon || is_expand_icon;
if(is_actionable) {
event.preventDefault();
showActive(target, 'icon');
const code_element = target.closest(`.${highlight_wrap_id}`).firstElementChild.firstElementChild;
let lineNumbers = elems('.ln', code_element);
is_wrap_icon ? toggleLineWrap(code_element) : false;
is_lines_icon ? toggleLineNumbers(lineNumbers) : false;
if (is_expand_icon) {
let this_code_block = code_element.firstElementChild;
const outer_block = this_code_block.closest('.highlight');
if(maxHeightIsSet(this_code_block)) {
this_code_block.style.maxHeight = full_height;
// mark code block as expanded
pushClass(outer_block, panel_expanded)
} else {
this_code_block.style.maxHeight = this_code_block.dataset.height;
// unmark code block as expanded
deleteClass(outer_block, panel_expanded)
}
}
is_copy_icon ? copyCode(code_element) : false;
}
});
(function addLangLabel() {
blocks.forEach(block => {
let label = block.dataset.lang;
const is_shell_based = shell_based.includes(label);
if(is_shell_based) {
const lines = elems(line_class, block);
Array.from(lines).forEach(line => {
line = line.lastElementChild;
let line_contents = line.textContent.trim(' ');
line_contents.indexOf('$') !== 0 && line_contents.trim(' ').length ? pushClass(line, 'shell') : false;
});
}
label = label === 'sh' ? 'shell' : label;
if(label !== "fallback") {
const label_el = createEl();
label_el.textContent = label;
pushClass(label_el, 'lang');
block.closest(`.${highlight_wrap}`).appendChild(label_el);
}
});
})();
})();

1
assets/js/custom.js Normal file
View file

@ -0,0 +1 @@
// add custom js in this file

200
assets/js/functions.js Normal file
View file

@ -0,0 +1,200 @@
function isObj(obj) {
return (obj && typeof obj === 'object' && obj !== null) ? true : false;
}
function createEl(element = 'div') {
return document.createElement(element);
}
function emptyEl(el) {
while(el.firstChild)
el.removeChild(el.firstChild);
}
function elem(selector, parent = document){
let elem = isObj(parent) ? parent.querySelector(selector) : false;
return elem ? elem : false;
}
function elems(selector, parent = document) {
return isObj(parent) ? parent.querySelectorAll(selector) : [];
}
function pushClass(el, targetClass) {
if (isObj(el) && targetClass) {
let elClass = el.classList;
elClass.contains(targetClass) ? false : elClass.add(targetClass);
}
}
function deleteClass(el, targetClass) {
if (isObj(el) && targetClass) {
let elClass = el.classList;
elClass.contains(targetClass) ? elClass.remove(targetClass) : false;
}
}
function modifyClass(el, targetClass) {
if (isObj(el) && targetClass) {
const elClass = el.classList;
elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
}
}
function containsClass(el, targetClass) {
if (isObj(el) && targetClass && el !== document ) {
return el.classList.contains(targetClass) ? true : false;
}
}
function isChild(node, parentClass) {
let objectsAreValid = isObj(node) && parentClass && typeof parentClass == 'string';
return (objectsAreValid && node.closest(parentClass)) ? true : false;
}
function elemAttribute(elem, attr, value = null) {
if (value) {
elem.setAttribute(attr, value);
} else {
value = elem.getAttribute(attr);
return value ? value : false;
}
}
function deleteChars(str, subs) {
let newStr = str;
if (Array.isArray(subs)) {
for (let i = 0; i < subs.length; i++) {
newStr = newStr.replace(subs[i], '');
}
} else {
newStr = newStr.replace(subs, '');
}
return newStr;
}
function isBlank(str) {
return (!str || str.trim().length === 0);
}
function isMatch(element, selectors) {
if(isObj(element)) {
if(selectors.isArray) {
let matching = selectors.map(function(selector){
return element.matches(selector)
})
return matching.includes(true);
}
return element.matches(selectors)
}
}
function closestInt(goal, collection) {
return collection.reduce(function (prev, curr) {
return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
});
}
function hasClasses(el) {
if(isObj(el)) {
const classes = el.classList;
return classes.length
}
}
function wrapEl(el, wrapper) {
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
}
function wrapText(text, context, wrapper = 'mark') {
let open = `<${wrapper}>`;
let close = `</${wrapper}>`;
let escapedOpen = `%3C${wrapper}%3E`;
let escapedClose = `%3C/${wrapper}%3E`;
function wrap(context) {
let c = context.innerHTML;
let pattern = new RegExp(text, "gi");
let matches = text.length ? c.match(pattern) : null;
if(matches) {
matches.forEach(function(matchStr){
c = c.replaceAll(matchStr, `${open}${matchStr}${close}`);
context.innerHTML = c;
});
const images = elems('img', context);
if(images) {
images.forEach(image => {
image.src = image.src.replaceAll(open, '').replaceAll(close, '').replaceAll(escapedOpen, '').replaceAll(escapedClose, '');
});
}
}
}
const contents = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "code", "td"];
contents.forEach(function(c){
const cs = elems(c, context);
if(cs.length) {
cs.forEach(function(cx, index){
if(cx.children.length >= 1) {
Array.from(cx.children).forEach(function(child){
wrap(child);
})
wrap(cx);
} else {
wrap(cx);
}
// sanitize urls and ids
});
}
});
const hyperLinks = elems('a');
if(hyperLinks) {
hyperLinks.forEach(function(link){
link.href = link.href.replaceAll(encodeURI(open), "").replaceAll(encodeURI(close), "");
});
}
}
function parseBoolean(string = "") {
string = string.trim().toLowerCase();
switch (string) {
case 'true':
return true;
case 'false':
return false;
default:
return undefined;
}
}
function loadSvg(icon, parent) {
parent.innerHTML = `
<svg class="icon_${icon}">
<use xlink:href="#${icon}"></use>
</svg>`;
}
function copyToClipboard(str) {
let copy, selection, selected;
copy = createEl('textarea');
copy.value = str;
copy.setAttribute('readonly', '');
copy.style.position = 'absolute';
copy.style.left = '-9999px';
selection = document.getSelection();
doc.appendChild(copy);
// check if there is any selected content
selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
copy.select();
document.execCommand('copy');
doc.removeChild(copy);
if (selected) { // if a selection existed before copying
selection.removeAllRanges(); // unselect existing selection
selection.addRange(selected); // restore the original selection
}
}

263
assets/js/index.js Normal file
View file

@ -0,0 +1,263 @@
(function calcNavHeight(){
return (elem('.nav_header').offsetHeight + 25);
})();
function toggleMenu(event) {
const target = event.target;
const is_toggle_control = target.matches(`.${toggle_id}`);
const is_with_toggle_control = target.closest(`.${toggle_id}`);
const show_instances = elems(`.${show_id}`) ? Array.from(elems(`.${show_id}`)) : [];
const menu_instance = target.closest(`.${menu}`);
function showOff(target, self = false) {
show_instances.forEach(function(show_instance){
!self ? deleteClass(show_instance, show_id) : false;
show_instance !== target.closest(`.${menu}`) ? deleteClass(show_instance, show_id) : false;
});
}
if(is_toggle_control || is_with_toggle_control) {
const menu = is_with_toggle_control ? is_with_toggle_control.parentNode.parentNode : target.parentNode.parentNode;
event.preventDefault();
modifyClass(menu, show_id);
} else {
!menu_instance ? showOff(target) : showOff(target, true);
}
}
(function markInlineCodeTags(){
const code_blocks = elems('code');
if(code_blocks) {
code_blocks.forEach(function(code_block){
if(!hasClasses(code_block)) {
code_block.children.length ? false : pushClass(code_block, 'noClass');
}
});
}
})();
function featureHeading(){
// show active heading at top.
const link_class = "section_link";
const title_class = "section_title";
const parent = elem(".aside");
if(parent) {
let active_heading = elem(`.${link_class}.${active}`);
active_heading = active_heading ? active_heading : elem(`.${title_class}.${active}`);
parent.scroll({
top: active_heading.offsetTop,
left: 0,
// behavior: 'smooth'
});
}
}
function activeHeading(position, list_links) {
let links_to_modify = Object.create(null);
links_to_modify.active = list_links.filter(function(link) {
return containsClass(link, active);
})[0];
// activeTocLink ? deleteClass
links_to_modify.new = list_links.filter(function(link){
return parseInt(link.dataset.position) === position
})[0];
if (links_to_modify.active != links_to_modify.new) {
links_to_modify.active ? deleteClass(links_to_modify.active, active): false;
pushClass(links_to_modify.new, active);
}
};
setTimeout(() => {
featureHeading();
}, 50);
function updateDate() {
const date = new Date();
const year = date.getFullYear().toString;
const year_el = elem('.year');
year_el ? year.textContent = year : false;
}
function customizeSidebar() {
const tocActive = 'toc_active';
const aside = elem('aside');
const tocs = elems('nav', aside);
if(tocs) {
tocs.forEach(function(toc){
toc.id = "";
pushClass(toc, 'toc');
if(toc.children.length >= 1) {
const toc_items = Array.from(toc.children[0].children);
const previous_heading = toc.previousElementSibling;
previous_heading.matches(`.${active}`) ? pushClass(toc, tocActive) : false;
toc_items.forEach(function(item){
pushClass(item, 'toc_item');
pushClass(item.firstElementChild, 'toc_link');
});
}
});
const current_toc = elem(`.${tocActive}`);
if(current_toc) {
const page_internal_links = Array.from(elems('a', current_toc));
const page_ids = page_internal_links.map(function(link){
return link.hash;
});
const link_positions = page_ids.map(function(id){
const heading = document.getElementById(decodeURIComponent(id.replace('#','')));
const position = heading.offsetTop;
return position;
});
page_internal_links.forEach(function(link, index){
link.dataset.position = link_positions[index]
});
window.addEventListener('scroll', function(e) {
// this.setTimeout(function(){
let position = window.scrollY;
let active = closestInt(position, link_positions);
activeHeading(active, page_internal_links);
// }, 1500)
});
}
}
elems('p').forEach(function(p){
const buttons = elems('.button', p);
buttons.length > 1 ? pushClass(p, 'button_grid') : false;
});
}
function markExternalLinks() {
let links = elems('a');
if(links) {
Array.from(links).forEach(function(link){
let target, rel, blank, noopener, attr1, attr2, url, is_external;
url = new URL(link.href);
// definition of same origin: RFC 6454, section 4 (https://tools.ietf.org/html/rfc6454#section-4)
is_external = url.host !== location.host || url.protocol !== location.protocol || url.port !== location.port;
if(is_external) {
target = 'target';
rel = 'rel';
blank = '_blank';
noopener = 'noopener';
attr1 = elemAttribute(link, target);
attr2 = elemAttribute(link, noopener);
attr1 ? false : elemAttribute(link, target, blank);
attr2 ? false : elemAttribute(link, rel, noopener);
}
});
}
}
function sanitizeURL(url) {
// removes any existing id on url
const position_of_hash = url.indexOf(hash);
if(position_of_hash > -1 ) {
const id = url.substr(position_of_hash, url.length - 1);
url = url.replace(id, '');
}
return url
}
function copyFeedback(parent) {
const copy_txt = document.createElement('div');
const yanked = 'link_yanked';
copy_txt.classList.add(yanked);
copy_txt.innerText = copied_text;
if(!elem(`.${yanked}`, parent)) {
const icon = parent.getElementsByTagName('svg')[0];
const original_src = icon.src;
icon.src = '{{ absURL "icons/check.svg" }}';
parent.appendChild(copy_txt);
setTimeout(function() {
parent.removeChild(copy_txt)
icon.src = original_src;
}, 2250);
}
}
function copyHeadingLink() {
let deeplink, deeplinks, new_link, parent, target;
deeplink = 'link';
deeplinks = elems(`.${deeplink}`);
if(deeplinks) {
document.addEventListener('click', function(event)
{
target = event.target;
parent = target.parentNode;
if (target && containsClass(target, deeplink) || containsClass(parent, deeplink)) {
event.preventDefault();
new_link = target.href != undefined ? target.href : target.parentNode.href;
copyToClipboard(new_link);
target.href != undefined ? copyFeedback(target) : copyFeedback(target.parentNode);
}
});
}
}
function makeTablesResponsive() {
const tables = elems('table');
if (tables) {
tables.forEach(function(table){
const table_wrapper = createEl();
pushClass(table_wrapper, 'scrollable');
wrapEl(table, table_wrapper);
});
}
}
function backToTop(){
const toTop = elem("#toTop");
window.addEventListener("scroll", () => {
const last_known_scroll_pos = window.scrollY;
if(last_known_scroll_pos >= 200) {
toTop.style.display = "flex";
pushClass(toTop, active);
} else {
deleteClass(toTop, active);
}
});
}
function lazyLoadMedia(elements = []) {
elements.forEach(element => {
let media_items = elems(element);
if(media_items) {
Array.from(media_items).forEach(function(item) {
item.loading = "lazy";
});
}
})
}
function loadActions() {
updateDate();
customizeSidebar();
markExternalLinks();
copyHeadingLink();
makeTablesResponsive();
backToTop();
lazyLoadMedia(['iframe', 'img']);
doc.addEventListener('click', event => {
let target = event.target;
let mode_class = 'color_choice';
let is_mode_toggle = containsClass(target, mode_class);
is_mode_toggle ? setUserColorMode(true) : false;
toggleMenu(event);
});
}
window.addEventListener('load', loadActions());

64
assets/js/mode.js Normal file
View file

@ -0,0 +1,64 @@
function prefersColor(mode){
return `(prefers-color-scheme: ${mode})`;
}
function systemMode() {
if (window.matchMedia) {
return window.matchMedia(prefersColor(dark)).matches ? dark : light;
}
return light;
}
function currentMode() {
let acceptable_chars = light + dark;
acceptable_chars = [...acceptable_chars];
let mode = getComputedStyle(doc).getPropertyValue(key).replace(/\"/g, '').trim();
return [...mode]
.filter(letter => acceptable_chars.includes(letter))
.join('');
}
function changeMode(is_dark_mode) {
if(is_dark_mode) {
bank.setItem(storageKey, light)
elemAttribute(doc, mode_data, light);
} else {
bank.setItem(storageKey, dark);
elemAttribute(doc, mode_data, dark);
}
}
function pickModePicture(mode) {
elems('picture').forEach(function(picture){
let source = picture.firstElementChild;
const picture_data = picture.dataset;
const images = [picture_data.lit, picture_data.dark];
source.src = mode == 'dark' ? images[1] : images[0];
});
}
function setMermaidTheme(mode) {
bank.setItem(mermaidThemeKey, mode);
let theme_input = elem('.color_choice');
theme_input.value = mode;
}
function setUserColorMode(mode = false) {
const is_dark_mode = currentMode() == dark;
const stored_mode = bank.getItem(storageKey);
const sys_mode = systemMode();
if(stored_mode) {
mode ? changeMode(is_dark_mode) : elemAttribute(doc, mode_data, stored_mode);
} else {
mode === true ? changeMode(is_dark_mode) : changeMode(sys_mode!==dark);
}
const user_mode = doc.dataset.mode;
doc.dataset.systemmode = sys_mode;
user_mode ? pickModePicture(user_mode) : false;
setMermaidTheme(user_mode);
}
setUserColorMode();

2
assets/js/search/algolia.js Normal file
View file

File diff suppressed because one or more lines are too long

9
assets/js/search/fuse.js Normal file
View file

File diff suppressed because one or more lines are too long

255
assets/js/search/index.js Normal file
View file

@ -0,0 +1,255 @@
function minQueryLen(query) {
query = query.trim();
const query_is_float = parseFloat(query);
const min_query_length = query_is_float ? 1 : 2;
return min_query_length;
}
function findQuery(query = 'query') {
const url_params = new URLSearchParams(window.location.search);
return url_params.has(query) ? url_params.get(query) : empty_string;
}
function search(index, scope = null, passive = false) {
scope = search_scope_global ? null : scope;
if(search_term.length) {
let raw_results = index;
if(!algolia_config.on) {
raw_results = index.search(search_term);
raw_results = raw_results.map(function(result){
const score = result.score;
const result_item = result.item;
result_item.score = (parseFloat(score) * 50).toFixed(0);
return result_item;
})
}
if(scope) {
raw_results = raw_results.filter(result_item => {
return result_item.section == scope;
});
}
passive ? searchResults(raw_results, search_term, true) : searchResults(raw_results, search_term);
} else {
passive ? searchResults([], empty_string, true) : searchResults();
}
}
function liveSearch(index) {
if (search_field) {
let search_scope = search_field.dataset.scope;
search(index, search_scope);
search_scope = search_scope_global ? null : search_scope;
if(!search_page_element) {
search_field.addEventListener('keyup', function(event){
search_term = search_field.value.trim().toLowerCase();
if(search_term.length && event.keyCode === 13) {
const scope_parameter = search_scope ? `&scope=${search_scope}` : empty_string;
window.location.href = new URL(`search/?query=${search_term}${ scope_parameter }`, root_url).href;
}
});
}
}
}
function searchResults(results=[], query=empty_string, passive = false) {
let results_fragment = new DocumentFragment();
let show_results = elem('.search_results');
if(passive || search_page_element) {
show_results = search_page_element;
}
emptyEl(show_results);
const query_len = query.length;
const required_query_len = minQueryLen(query);
if(results.length && query_len >= required_query_len) {
let results_title = createEl('h3');
results_title.className = 'search_title';
results_title.innerText = quick_links;
let go_back_button = createEl('button');
go_back_button.textContent = 'Go Back';
go_back_button.className = go_back_class;
if(passive) {
results_title.innerText = search_results_label;
}
if(!search_page_element) {
results = results.slice(0,8);
} else {
// results_fragment.appendChild(go_back_button);
results = results.slice(0,12);
}
results_fragment.appendChild(results_title);
results.forEach(function(result){
let item = createEl('a');
item.href = `${result.link}?query=${query}`;
item.className = search_result_class;
item.style.order = result.score;
if (passive) {
pushClass(item, 'passive');
let item_title = createEl('h3');
item_title.textContent = result.title;
item.appendChild(item_title);
let item_description = createEl('p');
// position of first search term instance
let query_instance = result.body.indexOf(query);
item_description.textContent = `${result.body.substring(query_instance, query_instance + 200)}`;
item.appendChild(item_description);
} else {
item.textContent = result.title;
}
results_fragment.appendChild(item);
});
}
if(show_results) {
let results_title_contents = empty_string;
if(query_len >= required_query_len) {
results_title_contents = !results.length ?
`<span class='${search_result_class}'>${no_matches_found}</span>` : empty_string;
} else {
results_title_contents = `<label for="find" class='${search_result_class}'>${ query_len > 1 ? short_search_query : type_to_search }</label>`
}
show_results.innerHTML = results_title_contents;
show_results.appendChild(results_fragment);
}
}
function passiveSearch(index) {
if(search_page_element) {
search_term = findQuery();
const search_scope = findQuery('scope');
search(index, search_scope, true);
}
}
function hasSearchResults() {
const results = elem('.results');
return results ? [results, results.innerHTML.length] : false;
}
function clearSearchResults() {
let results = hasSearchResults();
if(results) {
results = results[0];
results.innerHTML = empty_string;
elem(search_field_class).value = empty_string;
}
}
function onEscape(fn){
window.addEventListener('keydown', event => event.code === "Escape" ? fn() : false);
}
function initFuseSearch(manual = true) {
const page_language = document.documentElement.lang;
const search_index = `${ page_language === 'en' ? empty_string : page_language}/index.json`;
fetch(new URL(search_index, root_url).href)
.then(response => response.json())
.then(function(search_data) {
search_data = search_data.length ? search_data : [];
const fuse_index = new Fuse(search_data, search_options);
manual ? liveSearch(fuse_index) : passiveSearch(fuse_index);
})
.catch((error) => console.error(error));
}
function initAlgoliaSearch(manual = true) {
const algolia_client = algoliasearch(algolia_config.id, algolia_config.key);
const algolia_index = algolia_client.initIndex(algolia_config.index);
algolia_index.search(search_term, {
attributesToRetrieve: search_keys.slice(0,5),
hitsPerPage: 12,
}).then(({ hits }) => {
manual ? liveSearch(hits) : passiveSearch(hits);
});
}
function tabOverSearchResults() {
search_field.addEventListener('keydown', function (e) {
// Prevent curet from moving when up or down is pressed
if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
e.preventDefault();
return;
}
});
search_field.addEventListener('keyup', function (e) {
if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 13) {
return
}
e.preventDefault();
var results = e.target.parentNode.getElementsByClassName('search_result');
if (results.length === 0) {
return;
}
// Find the currently selected result and select the next or previous one
var selected = -1;
for (var i = 0; i < results.length; i++) {
if (results[i].classList.contains('active')) {
selected = i;
results[i].classList.remove('active');
break;
}
}
if (e.keyCode === 38) {
// For up arrow select the previous result
selected = selected === -1 ? results.length - 1 : selected - 1;
if (selected < 0) {
selected = results.length - 1;
}
results[selected].classList.add('active');
return;
} else if (e.keyCode === 40) {
// For down arrow select the next result
selected = selected === -1 ? 0 : selected + 1;
if (selected === results.length) {
selected = 0;
}
results[selected].classList.add('active');
return;
}
window.location.href = results[selected === -1 ? 0 : selected].href;
return;
});
}
function initializeSearch() {
let main = elem('main');
main = main ? main : elem('.main');
search_field.addEventListener('input', function() {
search_term = search_field.value.trim().toLowerCase();
algolia_config.on ? initAlgoliaSearch() : initFuseSearch();
});
if (search_page_element) {
algolia_config.on ? initAlgoliaSearch(false) : initFuseSearch(false);
}
wrapText(findQuery(), main);
onEscape(clearSearchResults);
window.addEventListener('click', function(event){
const target = event.target;
const is_search = target.closest(search_class) || target.matches(search_class);
!is_search && !search_page_element ? clearSearchResults() : false;
});
tabOverSearchResults();
}
window.addEventListener('load', () => initializeSearch());

37
assets/js/search/variables.js Normal file
View file

@ -0,0 +1,37 @@
const search_result_class = 'search_result';
const empty_string = '';
const search_field_class = '.search_field';
const search_class = '.search';
let search_term = empty_string;
const search_field = elem(search_field_class);
// values defined under config/_default/params.toml
let other_searchable_fields = '{{ delimit (default slice site.Params.otherSearchableFields) ", " }}'
if(other_searchable_fields.length > 2) {
other_searchable_fields = other_searchable_fields
.split(",")
.map(search_value => search_value.toLowerCase().trim());
} else {
other_searchable_fields = [];
}
const search_page_element = elem('#searchpage');
let search_scope_global = `{{ trim site.Params.search.global " " }}`;
search_scope_global = search_scope_global == 'true' ? true : false;
// Fuse specific
let search_keys = ['body', 'title', 'link', 'section', 'id',];
search_keys = search_keys.concat(other_searchable_fields);
const search_options = {
ignoreLocation: true,
findAllMatches: true,
includeScore: true,
shouldSort: true,
keys: search_keys,
threshold: 0.1
};
// Algolia specific
const algolia_config = JSON.parse(`{{ partialCached "functions/getAlgoliaConfig" . }}`);

43
assets/js/variables.js Normal file
View file

@ -0,0 +1,43 @@
'use strict';
const doc = document.documentElement;
const toggle_id = 'toggle';
const show_id = 'show';
const menu = 'menu';
const active = 'active';
let site_title = `{{ replace (lower site.Title) " " "-" }}`;
let root_url = '{{ strings.TrimSuffix "/" .Site.BaseURL }}/';
root_url = root_url.startsWith('http') ? root_url : window.location.origin;
const go_back_class = 'button_back';
const line_class = '.line';
// config defined values
const code_block_config = JSON.parse('{{ partial "functions/getCodeConfig" . }}');
const iconsPath = `{{ partialCached "functions/getIconPath" . }}`;
const shell_based = ['sh', 'shell', 'zsh', 'bash'];
const body = elem('body');
const max_lines = code_block_config.maximum;
const show_lines = code_block_config.show;
const copy_id = 'panel_copy';
const wrap_id = 'panel_wrap';
const lines_id = 'panel_lines';
const panel_expand = 'panel_expand';
const panel_expanded = 'panel_expanded';
const panel_box = 'panel_box';
const panel_hide = 'panel_hide';
const panel_from = 'panel_from';
const full_height = 'initial';
const highlight = 'highlight';
const highlight_wrap = 'highlight_wrap'
const hash = '#';
const light = 'light';
const dark = 'dark';
const storageKey = `${site_title}-color-mode`;
const mermaidThemeKey = `${site_title}-mermaid`;
const key = '--color-mode';
const mode_data = 'data-mode';
const bank = window.localStorage;

277
assets/sass/_base.sass Normal file
View file

@ -0,0 +1,277 @@
*
box-sizing: border-box
margin: 0
padding: 0
scrollbar-color: var(--scroll-thumb) transparent
scrollbar-width: thin
::-webkit-scrollbar
width: .5rem
::-webkit-scrollbar-thumb
background: var(--scroll-thumb)
border-radius: .25rem
body, html
scroll-behavior: smooth
scroll-padding-top: 1rem
font-kerning: normal
-webkit-text-size-adjust: 100%
font-size: 18px
@keyframes flash
0%
opacity: 0
75%
opacity: 0
100%
opacity: 1
body
font-family: var(--font)
background-color: var(--bg)
color: var(--text)
line-height: 1.5
margin: 0 auto
position: relative
font-kerning: normal
display: flex
min-width: 0
flex-direction: column
justify-content: space-between
min-height: 100vh
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-overflow-scrolling: touch
max-width: 1440px
animation: 0.67s flash ease-in
@media screen and (min-width: 1640px)
max-width: 1600px
a
text-decoration: none
color: inherit
p
padding: 0.75rem 0
// opacity: 0.9
&:empty
display: none
li
&, p
padding: 0.25rem 0
blockquote
opacity: 0.8
padding: 1rem
position: relative
quotes: '\201C''\201D''\2018''\2019'
margin: 0.75rem 0
display: flex
flex-flow: row wrap
background-repeat: no-repeat
background-size: 5rem
background-position: 50% 50%
position: relative
background-color: var(--accent)
border-radius: 0.25rem
overflow: hidden
&::before
content: ""
padding: 2px
position: absolute
top: 0
bottom: 0
left: 0
background: var(--theme)
p
padding-left: 0.5rem !important
font-size: 1.1rem !important
width: 100%
font-style: italic
h1,h2,h3,h4,h5
font-family: inherit
font-weight: 500
padding: 0.33rem 0
color: inherit
line-height: 1.35
h1
font-size: 200%
h2
font-size: 175%
h3
font-size: 150%
h4
font-size: 125%
h5
font-size: 120%
h6
font-size: 100%
img, svg, figure
max-width: 100%
vertical-align: middle
img
height: auto
margin: 1rem auto
padding: 0
main
flex: 1
@media screen and (min-width: 42rem)
padding-bottom: 45px
ol, ul
list-style: none
b, strong
font-weight: 500
hr
border: none
padding: 1px
background: var(--border-color)
margin: 1rem 0
.aside
overflow-y: auto
background: var(--bg)
border-radius: 0.25rem
align-self: start
max-height: 80vh
position: sticky
z-index: 9999
top: 0
padding: 1rem 0
@media screen and (min-width: 42rem)
padding: 1rem 1.5rem
top: 2.5rem
margin-top: 1rem
padding-top: 0
&_inner
height: 0
overflow: hidden
@media screen and (min-width: 42rem)
height: initial
&.show &_inner
height: initial
overflow: visible
&_toggle
padding: 0.5rem 1.5rem
border-radius: 0.5rem
background: var(--accent)
transform: translateY(-1rem)
display: flex
justify-content: space-between
@media screen and (min-width: 42rem)
display: none
h3
position: relative
ul
padding: 0
list-style: none
th, td
padding: 0.5rem
font-weight: 400 !important
&:not(:first-child)
padding-left: 1.5rem
thead
background: var(--theme)
color: var(--light)
font-weight: 400
text-align: left
tbody
tr
&:nth-child(even)
background-color: var(--accent) !important
box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.07)
table
margin: 1.5rem 0
width: 100%
.main
flex: 1
> .grid-auto
@media screen and (max-width: 667px)
grid-gap: 0
.page
&-home
h1
font-weight: 300
.content
ul, ol
padding-left: 1.1rem
ul
list-style: initial
ol
list-style: decimal
a:not(.button)
color: var(--theme)
::placeholder
font-size: 1rem
svg
&.icon_sort
fill: var(--light)
height: 0.7rem
width: 0.7rem
display: inline-block
margin-left: auto
vertical-align: middle
canvas
margin: 2.5rem auto 0 auto
max-width: 450px !important
max-height: 450px !important
footer
min-height: 150px
del
opacity: 0.5
#toTop
background: transparent
outline: 0.5rem solid transparent
height: 2rem
width: 2rem
cursor: pointer
padding: 0.5rem
display: flex
align-items: center
justify-content: center
position: fixed
right: 0
bottom: 2.25rem
transform: rotate(45deg) translate(5rem)
opacity: 0
transition: opacity 0.5s var(--ease), transform 0.25s var(--ease)
z-index: 5
&.active
right: 1.5rem
opacity: 1
transform: rotate(45deg) translate(0)
&::after, &::before
position: absolute
display: block
width: 1rem
height: 1rem
content: ""
border-left: 1px solid var(--text)
border-top: 1px solid var(--text)
&::after
width: 0.67rem
height: 0.67rem
transform: translate(0.1rem, 0.1rem)
#searchpage
padding-top: 5rem

306
assets/sass/_blog.sass Normal file
View file

@ -0,0 +1,306 @@
@mixin shadow($opacity: 0.17)
box-shadow: 0 0 3rem rgba(0,0,0,$opacity)
&:hover
box-shadow: 0 0 5rem rgba(0,0,0, (1.5 * $opacity))
.post
margin: 0 auto
width: 100%
p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, .highlight_wrap, hr
max-width: 840px !important
margin-left: auto
margin-right: auto
img:not(.icon)
@media screen and (min-width: 1025px)
display: block
width: 100vw
max-width: 1024px
margin-left: auto
margin-right: auto
h2,h3,h4
margin: 0.5rem auto
text-align: left
padding: 5px 0 0 0
p
padding-bottom: 0.5rem
padding-top: 0.5rem
font-size: 1.05rem
&s
display: flex
justify-content: space-between
flex-flow: row wrap
width: 100%
align-items: stretch
&s:not(.aside)
padding: 0 30px
ol
padding: 1rem 1.25rem
&_body
img
width: 100%
max-width: 100%
&_inner
a
color: var(--theme)
transition: all 0.3s
&:hover
opacity: 0.8
text-decoration: underline
img:not(.icon)
margin-bottom: 2rem
box-shadow: 0 1.5rem 1rem -1rem rgba(0,0,0,0.25)
~ h1, ~ h2, ~ h3, ~ h4
margin-top: 0
padding-top: 0
.icon
margin-top: 0
margin-bottom: 0
&_date
color: var(--theme)
&_copy
opacity: 0
transition: opacity 0.3s ease-out
&_item
@include shadow
margin: 1.25rem 0
border-radius: 10px
overflow: hidden
width: 100%
@media screen and (min-width:667px)
width: 47%
&_item:hover &_copy
opacity: 1
&_link
padding: 2.5px 0
font-size: 1.25em
margin: 2.5px 0
text-align: left
&_meta
overflow: hidden
opacity: 0.8
font-size: 0.84rem
font-weight: 500
display: inline-grid
grid-template-columns: auto 1fr
background-color: var(--light)
padding: 0
align-items: center
border-radius: 0.3rem
color: var(--dark)
text-transform: capitalize
a
&:hover
color: var(--theme)
text-decoration: underline
opacity: 0.9
&_extra
display: flex
justify-content: flex-end
&_tag
font-size: 0.75rem !important
font-weight: 500
background: var(--theme)
color: var(--light)
padding: 0.25rem 0.67rem !important
text-transform: uppercase
display: inline-flex
border-radius: 5px
&_title
margin: 1.75rem 0 1rem
&_time
background: var(--theme)
display: inline-grid
padding: 0.2rem 0.75rem
color: var(--light)
&_thumbnail
width: 100%
margin: 0
&_nav
padding: 3rem 1.5rem
display: grid
margin: 2.25rem auto 1rem
text-align: center
color: var(--theme)
// box-shadow: 0 1rem 3rem -1rem rgba(0,0,0,0.15)
text-transform: uppercase
&, span
position: relative
z-index: 3
&::before
content: ""
position: absolute
background: var(--accent)
top: 0
left: 0
bottom: 0
right: 0
z-index: 1
border-radius: 1rem
&_next
display: inline-grid
margin: 0 auto
width: 10rem
grid-template-columns: 1fr 1.33rem
&::after
content: ""
background-image: var(--next-icon-path)
background-repeat: repeat no-repeat
background-size: 0.8rem
background-position: center right
// .pager
// display: grid
// grid-template-columns: 2.5rem 1fr 2.5rem
// margin: 2rem auto 0
// max-width: 12.5rem
// &, &_item
// justify-content: center
// align-items: center
// &_item
// height: 2.5rem
// width: 2.5rem
// display: inline-flex
// margin-left: 5px
// margin-right: 5px
// background-color: var(--accent)
// color: var(--light)
// border-radius: 50%
// &:hover
// opacity: 0.5
// span
// text-align: center
.excerpt
padding: 0 10px 1.5rem 10px
position: relative
z-index: 1
&_meta
display: flex
justify-content: space-between
align-items: center
transform: translateY(-2.5rem)
position: relative
z-index: 5
.archive
&_item
display: grid
padding: 1.5rem 0
&_title
margin: 0
.article
box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.12)
overflow: hidden
border-radius: 0.5rem
&_title
margin: 0
&_excerpt
&:not(.visible)
height: 0
opacity: 0
transition: height 0.5s, opacity 0.5s
&_excerpt,
&_meta
transform-origin: bottom
&_meta
padding: 10px 1.25rem 1.25rem
color: var(--text)
position: relative
z-index: 2
transition: margin-top 0.5s
background: var(--bg)
&.center_y
transform-origin: center
transition: transform 0.5s
display: flex
flex-direction: column
justify-content: center
@media screen and (min-width: 42rem)
left: -2rem
&_thumb
display: grid
position: relative
z-index: 0
overflow: hidden
height: 15rem
background-size: cover
background-position: 50% 50%
@media screen and (min-width: 35rem)
height: 22.5rem
img
transition: transform 0.5s, opacity 0.5s
&::after
content: ''
position: absolute
top: 0
left: 0
width: 100%
bottom: 0
z-index: 1
background: var(--bg)
opacity: 0
transition: opacity 0.1s ease-out
&_showcase &_thumb
height: 15rem
&_showcase &_meta
padding-top: 1.5rem
&:hover &_thumb
img
transform: scale(1.1)
&::after
transition: opacity 0.1s ease-out
opacity: 0.5
&:hover &_excerpt:not(.visible)
height: 75px
opacity: 1
&:hover &_meta
&:not(.center_y)
margin-top: -75px
@media screen and (min-width: 769px)
&.center_y
transform: translateX(-3rem)
&:hover
box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.17)
a
color: initial !important
&_hidden
display: none

38
assets/sass/_chart.sass Normal file
View file

@ -0,0 +1,38 @@
@keyframes chartjs-render-animation
0%
opacity: .99
100%
opacity: 1
.chartjs
&-render-monitor
animation: chartjs-render-animation 1ms
&-size-monitor
&, &-expand, &-shrink
position: absolute
direction: ltr
left: 0
top: 0
right: 0
bottom: 0
overflow: hidden
pointer-events: none
visibility: hidden
z-index: -1
&-expand
> div
position: absolute
width: 1000000px
height: 1000000px
left: 0
top: 0
&-shrink
> div
position: absolute
width: 200%
height: 200%
left: 0
top: 0

374
assets/sass/_components.sass Normal file
View file

@ -0,0 +1,374 @@
.section
&_title
font-size: 1.25rem
&_link
font-size: 1rem
font-weight: 400
.sidebar
&-link
display: grid
padding: 0.2rem 0
.toc
border-left: 2px solid var(--theme)
padding: 0 1rem
height: 0
overflow: hidden
filter: opacity(0.87)
&_item
font-size: 0.9rem
&_active
height: initial
.search
flex: 1
display: flex
justify-content: flex-end
position: relative
&_field
padding: 0.5rem 1.5rem 0.5rem 2.5rem
border-radius: 1.5rem
width: 13.5rem
outline: none
border: 1px solid var(--search-border-color)
background: transparent
color: var(--text)
box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
font-size: 1rem
&:hover, &:focus
background: var(--search-bg)
&_label
width: 1rem
height: 1rem
position: absolute
left: 0.33rem
top: 0.25rem
opacity: 0.33
svg
width: 100%
height: 100%
fill: var(--text)
&_result
padding: 0.5rem 1rem
display: block
&:not(.passive):hover
background-color: var(--theme)
color: var(--light)
&.passive
display: grid
&s
width: 13.5rem
background-color: var(--overlay)
border-radius: 0 0 0.25rem 0.25rem
box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
position: absolute
top: 125%
display: grid
overflow: hidden
z-index: 5
&:empty
display: none
&_title
padding: 0.5rem 1rem 0.5rem 1rem
background: var(--theme)
color: var(--light)
font-size: 0.9rem
opacity: 0.87
text-transform: uppercase
.button
background-color: var(--theme)
color: var(--light)
border-radius: 0.25rem
display: inline-block
padding: 0.75rem 1.25rem
text-align: center
&:hover
opacity: 0.84
& + &
background-color: var(--haze)
color: var(--dark)
&_grid
display: grid
max-width: 15rem
grid-gap: 1rem
grid-template-columns: repeat( auto-fit, minmax(12rem, 1fr) )
@media screen and (min-width: 557px)
max-width: 25rem
.video
overflow: hidden
padding-bottom: 56.25%
position: relative
height: 0
margin: 1.5rem 0
border-radius: 0.6rem
background-color: var(--bg)
box-shadow: 0 1rem 2rem rgba(0,0,0,0.17)
iframe
left: 0
top: 0
height: 100%
width: 100%
border: none
position: absolute
transform: scale(1.02)
.icon
width: 1.1rem
height: 1.1rem
display: inline-flex
justify-content: center
align-items: center
margin: 0 0.5rem
.link
opacity: 0
position: relative
&_owner:hover &
opacity: 1
&_yank
opacity: 1
&ed
position: absolute
right: -2.2rem
top: -2rem
background-color: var(--theme)
color: var(--light)
width: 7rem
padding: 0.25rem 0.5rem
font-size: 0.9rem
border-radius: 1rem
text-align: center
&::after
position: absolute
top: 1rem
content: ""
border-color: var(--theme) transparent
border-style: solid
border-width: 1rem 1rem 0 1rem
height: 0
width: 0
transform-origin: 50% 50%
transform: rotate(145deg)
right: 0.45rem
.gallery
width: 100%
column-count: 3
column-gap: 1rem
@media screen and (max-width: 667px)
column-count: 2
&_item
background-color: transparent
margin: 0 0 1rem
&_image
margin: 0 auto
.pager
display: flex
justify-content: space-between
align-items: center
padding-top: 2rem
margin: 2rem 0
max-width: 100vw
overflow: hidden
svg
filter: opacity(0.75)
width: 1.25rem
height: 1rem
transform-origin: 50% 50%
&_lean
justify-content: flex-end
&_label
max-width: 100%
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
&_link
padding: 0.5rem 1rem
border-radius: 0.25rem
width: 12.5rem
max-width: 40vw
position: relative
display: flex
align-items: center
text-align: center
justify-content: center
&::before, &::after
background-image: var(--next-icon)
height: 0.8rem
width: 0.8rem
background-size: 100%
background-repeat: no-repeat
transform-origin: 50% 50%
&_item
display: flex
flex-direction: column
flex: 1
max-width: 48%
// filter: opacity(0.87)
&.prev
align-items: flex-start
// margin-right: 0.5rem
&.next
align-items: flex-end
// margin-left: 0.5rem
&::after
content: ""
&_item.prev &_link
&::before
content: ""
transform: rotate(180deg)
margin-right: 0.67rem
&_item.next &_link
&::after
content: ""
margin-left: 0.67rem
&_item.next &_link
grid-template-columns: 1fr 1.5rem
&_meta
margin: 0.5rem 0
.color
&_mode
margin-left: 1rem
&_choice
outline: none
border: none
-webkit-appearance: none
height: 1rem
position: relative
width: 1rem
border-radius: 1rem
cursor: pointer
z-index: 2
right: 0
filter: contrast(0.8)
&::after
content: ""
top: 0.1rem
bottom: 0
left: 0
position: absolute
height: 1.3rem
background: var(--accent)
width: 1.3rem
border-radius: 0.4rem
z-index: 3
background-image: var(--sun-icon)
background-size: 60%
background-repeat: no-repeat
background-position: center
&_icon
height: 1rem
width: 1rem
margin: 0
z-index: 4
position: absolute
transform: translateY(-50%)
transition: transform 0.5s cubic-bezier(.19,1,.22,1)
right: 3.5rem
.tip
padding: 1.5rem 1rem 1.5rem 1.5rem
margin: 1.5rem 0
border-left: 0.2rem solid var(--theme)
position: relative
background: var(--accent)
blockquote
padding: 0
margin: 0
border: none
&::before
display: none
p
&:first-child, ~ p
padding-top: 0
&:last-child
padding-bottom: 0
&_warning
--theme: var(--inline-color)
&_warning::before
transform: rotate(180deg)
&::before
content: ""
position: absolute
left: -0.85rem
top: 1.5rem
z-index: 3
padding: 0.75rem
transform-origin: 50% 50%
border-radius: 50%
background-color: var(--theme)
background-image: var(--info-icon)
background-size: 12%
background-position: 50% 50%
background-repeat: no-repeat
.tabs
display: flex
flex-wrap: wrap
margin: 2rem 0 2rem 0
position: relative
&.tabs-left
justify-content: flex-start
label.tab-label
margin-right: 0.5rem
.tab-content
border-radius: 0px 6px 6px 6px
&.tabs-right
justify-content: flex-end
label.tab-label
margin-left: 0.5rem
.tab-content
border-radius: 6px 6px 6px 6px
input.tab-input
display: none
label.tab-label
background-color: var(--accent) transparent
border-color: var(--theme)
border-radius: 6px 6px 0px 0px
border-style: solid
border-bottom-style: hidden
border-width: 2px
cursor: pointer
display: inline-block
order: 1
padding: 0.3rem 0.6rem
position: relative
top: 2px
user-select: none
input.tab-input:checked + label.tab-label
background-color: var(--accent)
border-color: var(--theme)
.tab-content
background-color: var(--accent)
border-color: var(--theme)
border-style: solid
border-width: 2px
display: none
order: 2
padding: 1rem
width: 100%

4
assets/sass/_custom.sass Normal file
View file

@ -0,0 +1,4 @@
// add customs styles and general overrides here
// due to the cascading nature of css, if you try to override theme css variables in this file, those changes will not apply. Instead, override css variables in the `override.sass` file
// we recommend not editing this file directly. Instead, create an `assets/sass/_custom.sass` file at the root level of your site.
// if you edit this file directly, you will have to resolve git conflicts when and if you decide to pull changes we make on the theme

42
assets/sass/_fonts.sass Normal file
View file

@ -0,0 +1,42 @@
$font-path: "../fonts"
@font-face
font-family: 'Metropolis'
font-style: normal
font-weight: 400
src: local('Metropolis Regular'), local('Metropolis-Regular'), url('#{$font-path}/Metropolis-Regular.woff2') format('woff2'), url('#{$font-path}/Metropolis-Regular.woff') format('woff')
font-display: swap
@font-face
font-family: 'Metropolis'
font-style: normal
font-weight: 300
src: local('Metropolis Light'), local('Metropolis-Light'), url('#{$font-path}/Metropolis-Light.woff2') format('woff2'), url('#{$font-path}/Metropolis-Light.woff') format('woff')
font-display: swap
@font-face
font-family: 'Metropolis'
font-style: italic
font-weight: 300
src: local('Metropolis Light Italic'), local('Metropolis-LightItalic'), url('#{$font-path}/Metropolis-LightItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-LightItalic.woff') format('woff')
font-display: swap
@font-face
font-family: 'Metropolis'
font-style: normal
font-weight: 500
src: local('Metropolis Medium'), local('Metropolis-Medium'), url('#{$font-path}/Metropolis-Medium.woff2') format('woff2'), url('#{$font-path}/Metropolis-Medium.woff') format('woff')
font-display: swap
@font-face
font-family: 'Metropolis'
font-style: italic
font-weight: 500
src: local('Metropolis Medium Italic'), local('Metropolis-MediumItalic'), url('#{$font-path}/Metropolis-MediumItalic.woff2') format('woff2'), url('#{$font-path}/Metropolis-MediumItalic.woff') format('woff')
font-display: swap
@font-face
font-family: 'Cookie'
font-style: normal
font-weight: 400
src: local('Cookie-Regular'), url('#{$font-path}/cookie-v10-latin-regular.woff2') format('woff2'), url('#{$font-path}/cookie-v10-latin-regular.woff') format('woff')
font-display: swap

7
assets/sass/_mermaid.sass Normal file
View file

@ -0,0 +1,7 @@
html[data-mode="dark"] .mermaid
--theme: darkgoldenrod
background-color: transparent !important
margin-bottom: 2.5rem
svg
margin: 0 auto
display: block

71
assets/sass/_nav.sass Normal file
View file

@ -0,0 +1,71 @@
.nav
display: grid
grid-gap: 1rem
padding: 0 1.5rem !important
align-items: center
background-color: var(--bg)
@media screen and (min-width: 992px)
grid-template-columns: 10rem 1fr
&_brand
position: relative
picture, img
max-width: 10rem
&_header
position: absolute
top: 0
left: 0
width: 100%
background-color: var(--bg)
z-index: 999999
&_toggle
position: absolute
top: 0
bottom: 0
width: 3rem
display: flex
align-items: center
justify-content: flex-end
text-align: center
right: 0
color: var(--text)
@media screen and (min-width: 992px)
display: none
&_body
display: flex
flex-direction: column
background: var(--accent)
position: fixed
left: 0
top: 0
bottom: 0
height: 100vh
transition: transform 0.25s var(--ease)
transform: translateX(-101vw)
@media screen and (min-width: 992px)
transform: translateX(0)
position: relative
height: initial
justify-content: flex-end
background: transparent
flex-direction: row
&.show &_body
transform: translateX(0)
box-shadow: 0 1rem 4rem rgba(0,0,0,0.1)
background: var(--bg)
li:first-child
margin: 1.5rem 1rem 0.5rem 1rem
overflow-y: auto
// input
// background: var(--accent)
&-link
display: inline-flex
padding: 0.5rem 1rem
&-item
display: grid
align-items: center
.search
@media screen and (min-width: 992px)
margin-right: 1.5rem
&_repo
picture, img
max-width: 1.25rem

250
assets/sass/_syntax.sass Normal file
View file

@ -0,0 +1,250 @@
@keyframes pulse
0%
opacity: 1
75%
opacity: 0.1
100%
opacity: 1
code
font-size: 15px
font-weight: 400
overflow-y: hidden
display: block
font-family: 'Monaco', monospace
word-break: break-all
&.noClass
color: var(--inline-color)
display: inline
line-break: anywhere
.windows .highlight
overflow-x: hidden
&:hover
overflow-x: auto
.highlight
display: grid
width: 100%
border-radius: 0 0.2rem 0.2rem 0
overflow-x: auto
position: relative
&_wrap
display: grid
background: var(--code-bg) !important
border-radius: 0.5rem
position: relative
padding: 0 1rem
margin: 1.5rem auto 1rem auto
& &
margin: 0
padding: 0
& + &
margin-top: 2.25rem
&:hover > div
opacity: 1
.lang
position: absolute
top: 0
right: 0
text-align: right
width: 7.5rem
padding: 0.5rem 1rem
font-style: italic
text-transform: uppercase
font-size: 67%
opacity: 0.5
color: var(--text)
&:hover .lang
opacity: 0.1
& &
margin: 0
pre
color: var(--text) !important
border-radius: 4px
font-family: 'Monaco', monospace
padding-top: 1.5rem
padding-bottom: 2rem
table
display: grid
max-width: 100%
margin-bottom: 0
background: transparent
td, th
padding: 0
.lntd
width: 100%
border: none
&:first-child
&, pre
width: 2.5rem !important
padding-left: 0
padding-right: 0
color: rgba(255,255,255,0.5)
user-select: none
pre
width: 100%
display: flex
min-width: 0
align-items: center
flex-direction: column
.err
color: #a61717
.hl
width: 100%
background: var(--inline-color)
.ln, .lnt
margin-right: 0.75rem
padding: 0
transition: opacity 0.3s var(--ease)
&, span
color: var(--text)
opacity: 0.5
user-select: none
.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
color: #6ab825
font-weight: 500
.kn, .kp
font-weight: 400
.nb, .no, .nv
color: #24909d
.nc, .nf, .nn
color: #447fcf
.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss
color: #ed9d13
.m, .mb, .mf, .mh, .mi, .il, .mo
color: #3677a9
.ow
color: #6ab825
font-weight: 500
.c, .ch, .cm, .c1
color: #999
font-style: italic
.cs
color: #e50808
background-color: #520000
font-weight: 500
.cp, .cpf
color: #cd2828
font-weight: 500
.gd, .gr
color: #d22323
.ge
font-style: italic
.gh, .gu, .nd, .na, .ne
color: #ffa500
font-weight: 500
.gi
color: #589819
.go
color: #ccc
.gp
color: #aaa
.gs
font-weight: 500
.gt
color: #d22323
.w
color: #666
.hljs
&-string
color: #6ab825
&-attr
color: #ed9d13
.p &-attr
color: var(--light)
.pre
&_wrap
white-space: pre-wrap
white-space: -moz-pre-wrap
white-space: -pre-wrap
white-space: -o-pre-wrap
word-wrap: break-word
&_nolines.ln
display: none
// crayon-like widget styles
.panel
&_box
display: inline-flex
perspective: 300px
grid-gap: 1rem
transition: opacity 0.3s var(--easing)
background: var(--code-bg)
padding: 0.5rem 1.5rem
border-radius: 2rem
align-items: center
position: absolute
right: 0rem
top: -2.1rem
opacity: 0
min-width: 0
&_icon
display: inline-flex
align-items: center
justify-content: center
cursor: pointer
padding: 0.1rem
transform-origin: 50% 50%
margin: 0
min-width: 0
&.active
animation: pulse 0.1s linear
svg
fill: var(--text)
width: 1.5rem
height: 1.5rem
&_hide
// hide icon if not needed
display: none
&_from
position: absolute
color: var(--theme)
bottom: 0
font-size: 1.5rem
font-weight: 500
padding: 0.5rem 0
cursor: pointer
letter-spacing: 0.1px
z-index: 19
&_expanded &_from
display: none
.shell
position: relative
// display: flex
// align-items: center
// gap: 0.5rem
&::before
content: "$"
position: relative
margin-right: 0.36rem
.line
&-flex
display: flex
min-width: 0

105
assets/sass/_utils.sass Normal file
View file

@ -0,0 +1,105 @@
.wrap
max-width: 1240px
@media screen and (min-width: 1640px)
max-width: 1600px
&, &
width: 100%
padding: 0 25px
margin: 0 auto
@for $i from 1 through 8
$size: $i * 1.5rem
$x-size: $size * 0.5
.pt-#{$i}
padding-top: $size
.pb-#{$i}
padding-bottom: $size
.mt-#{$i}
margin-top: $size
.mb-#{$i}
margin-bottom: $size
%grid
display: grid
grid-template-columns: 1fr
[class*='grid-']
grid-gap: 2rem
.grid-2, .grid-3, .grid-4, .grid-auto, .grid-reverse
@extend %grid
@media screen and (min-width: 42rem)
.grid-auto
grid-template-columns: 2fr 5fr
.grid-reverse
grid-template-columns: 3fr 1fr
.grid-2
grid-template-columns: repeat(2, 1fr)
.grid-3
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))
.grid-4
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
.active
color: var(--theme)
.is
background: var(--theme)
color: var(--light)
.toggle
svg
fill: var(--text)
display: inline-block
transform-origin: 50% 50%
transform: scale(1.2)
cursor: pointer
margin: 0
.scrollable
width: 100%
overflow-x: hidden
max-width: calc(100vw - 48px)
@media screen and (min-width: 768px)
max-width: 100%
&:hover
overflow-x: auto
.chart
display: grid
grid-gap: 1.5rem
min-width: 0
max-width: 98vw !important
max-height: 98vw !important
.link
display: inline-flex
align-items: center
width: 2.5rem
margin: 0 0.25rem 0 0
padding: 0 0.25rem
opacity: 0
transform: translate(-0.33rem, 0.33rem)
transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
svg, img
width: 1.5rem
height: 1.5rem
fill: var(--theme)
&_owner:hover &
opacity: 1
.copy
cursor: pointer
.standardize-input
appearance: none
-webkit-appearance: none

56
assets/sass/_variables.sass Normal file
View file

@ -0,0 +1,56 @@
html
--color-mode: "light"
--light: #fff
--dark: rgb(28,28,30)
--haze: #f2f5f7
--bubble: rgb(36,36,38)
--accent: var(--haze)
--bg: var(--light)
--code-bg: var(--accent)
--overlay: var(--light)
//--text: #111
--text: #141010
--font: 'Metropolis', sans-serif
--border-color: #eee
--inline-color: darkgoldenrod
--theme: rgb(52,199,89)
--ease: ease
--scroll-thumb: rgba(0,0,0,.06)
--search-border-color: transparent
--next-icon-path: url(../images/icons/double-arrow.svg)
--never-icon-path: url(../images/sitting.svg)
@mixin darkmode
--color-mode: "dark"
--theme: rgb(48,209,88)
--bg: var(--dark)
--text: #eee
--text-light: #fff
--accent: var(--bubble)
--overlay: var(--bubble)
--border-color: transparent
--scroll-thumb: rgba(255,255,255,.06)
--search-bg: var(--accent)
--search-border-color: var(--accent)
*
box-shadow: none !important
&[data-mode="dark"]
@include darkmode
.color
&_choice
&::after
background-image: var(--moon-icon)
&[data-mode="auto"]
@media (prefers-color-scheme: dark)
@include darkmode
%narrow
max-width: 750px
margin: 0 auto
blockquote
+ .highlight_wrap
margin-top: 2.25rem

18
assets/sass/main.sass Normal file
View file

@ -0,0 +1,18 @@
{{ $iconsPath := partialCached "functions/getIconPath" . }}
html
--info-icon: url('{{ absURL $iconsPath }}info.svg')
--sun-icon: url('{{ absURL $iconsPath }}sun.svg')
--moon-icon: url('{{ absURL $iconsPath }}moon.svg')
--next-icon: url('{{ absURL $iconsPath }}next.svg')
@import "variables"
@import "base"
@import "nav"
@import "components"
@import "mermaid"
@import "blog"
@import "utils"
@import "syntax"
@import "fonts"
@import "chart"
@import "custom"
@import "mermaid"

0
dist/.gitkeep vendored Normal file
View file

101
exampleSite/.github/workflows/agolia-update.yaml vendored Normal file
View file

@ -0,0 +1,101 @@
name: Update Algolia Search Index
off: # change to `on:` to turn on
workflow_dispatch:
branches:
- production
push:
paths:
- content/**/*
- hugo.toml
env:
# Name of the branch in your repository which will store your generated site.
SITE-BRANCH: master
jobs:
build:
# In this phase, the code is pulled from main and the site rendered in Hugo. The built site is stored as an artifact for other stages. # deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true
- name: Build
run: hugo -e "production" -d "dist" --minify
# If build succeeds, store the dist/ dir as an artifact to be used in subsequent phases.
- name: Upload output dist dir as artifact
uses: actions/upload-artifact@v1
with:
name: dist
path: dist/
publish:
# In the publish phase, the site is pushed up to a different branch which only stores the dist/ folder ("site" branch) and is also delta synchronized to the S3 bucket. CloudFront invalidation happens last.
runs-on: ubuntu-20.04
needs: build
steps:
# Check out the site branch this time since we have to ultimately commit those changes there.
- name: Checkout site branch
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
ref: ${{ env.SITE-BRANCH }}
# Download the artifact containing the newly built site. This overwrites the dist/ dir from the check out above.
- name: Download artifact from build stage
uses: actions/download-artifact@v1
with:
name: dist
# Add all the files/changes in dist/ that were pulled down from the build stage and then commit them.
# The final line sets a GitHub Action output value that can be read by other steps.
# This function cannot store mult-line values so newline chars must be stripped.
- name: Commit files
id: can_commit
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
cp dist/index.json index.json
git add -A index.json
commit_message=$(git commit -m "Build search index." -a | tr -d '\n' || true)
echo "commit_message=$commxit_message >> $GITHUB_OUTPUT"
# Checks if previous stage had any valid commit.
- name: Nothing to commit
id: nothing_committed
if: contains(steps.can_commit.outputs.commit_message, 'nothing to commit')
run: echo "Saw that no changes were made to Hugo site."
# Push those changes back to the site branch.
- name: Push to site branch
if: steps.nothing_committed.conclusion == 'skipped'
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: ${{ env.SITE-BRANCH }}
index:
runs-on: ubuntu-latest
needs: publish
name: Upload Algolia Index
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- uses: wangchucheng/algolia-uploader@master
with:
# Such as `Z0U0ACGBN8`
app_id: ${{ secrets.AGOLIA_INDEX_ID }}
# Go to https://github.com/dimi365/website/settings/secrets/actions and set an AGOLIA_ADMIN_KEY secret key
admin_key: ${{ secrets.AGOLIA_ADMIN_KEY }}
# The algolia search index name.
index_name: compose # edit appropriately
# The index file path relative to repo root. no leading forward slash
index_file_path: index.json

118
exampleSite/.github/workflows/aws-deploy.yaml vendored Normal file
View file

@ -0,0 +1,118 @@
# PREREQUISITES:
# The following secrets must be stored in your repository where this Action runs:
# AWS_ACCESS_KEY_ID
# AWS_CLOUDFRONT_DISTRO_ID
# AWS_S3_BUCKET_NAME
# AWS_SECRET_ACCESS_KEY
name: AWS DEPLOY CI
off: # change to `on:` to turn on
workflow_dispatch:
branches:
- main
push:
paths:
- content/**/*
- hugo.toml
# pull_request:
# branches:
# - production
env:
# Default AWS region where S3 pushes and CloudFront invalidations will occur.
AWS-DEFAULT-REGION: us-east-2
# Name of the branch in your repository which will store your generated site.
SITE-BRANCH: site
jobs:
build:
# In this phase, the code is pulled from main and the site rendered in Hugo. The built site is stored as an artifact for other stages. # deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true
- name: Build
run: hugo -e "production" -d "dist" --minify
# If build succeeds, store the dist/ dir as an artifact to be used in subsequent phases.
- name: Upload output public dir as artifact
uses: actions/upload-artifact@v1
with:
name: dist
path: dist/
publish:
# In the publish phase, the site is pushed up to a different branch which only stores the dist/ folder ("site" branch) and is also delta synchronized to the S3 bucket. CloudFront invalidation happens last.
runs-on: ubuntu-20.04
needs: build
steps:
# Check out the site branch this time since we have to ultimately commit those changes there.
- name: Checkout site branch
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
ref: ${{ env.SITE-BRANCH }}
# Download the artifact containing the newly built site. This overwrites the dist/ dir from the check out above.
- name: Download artifact from build stage
uses: actions/download-artifact@v1
with:
name: public
# Add all the files/changes in dist/ that were pulled down from the build stage and then commit them.
# The final line sets a GitHub Action output value that can be read by other steps.
# This function cannot store mult-line values so newline chars must be stripped.
- name: Commit files
id: can_commit
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add -A dist/
commit_message=$(git commit -m "Publish generated Hugo site." -a | tr -d '\n' || true)
echo "commit_message=$commit_message >> $GITHUB_OUTPUT"
# Checks if previous stage had any valid commit.
- name: Nothing to commit
id: nothing_committed
if: contains(steps.can_commit.outputs.commit_message, 'nothing to commit')
run: echo "Saw that no changes were made to Hugo site."
# Push those changes back to the site branch.
- name: Push to site branch
if: steps.nothing_committed.conclusion == 'skipped'
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: ${{ env.SITE-BRANCH }}
# Store the AWS credentials on the runner.
- name: Configure AWS credentials
if: steps.nothing_committed.conclusion == 'skipped'
uses: aws-actions/configure-aws-credentials@v1-node16
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ env.AWS-DEFAULT-REGION }}
- name: Delta sync site to S3 with aws cli
if: steps.nothing_committed.conclusion == 'skipped'
run: aws s3 sync --size-only --delete --exclude "/authors/*/page/*" --cache-control max-age=2592000 dist/ s3://${{ secrets.AWS_S3_BUCKET_NAME }}
# Use s5cmd to perform only a delta sync to the destination S3 bucket. This minimizes transfer traffic since it only uploads changed files.
# - name: Delta sync site to S3 bucket
# if: steps.nothing_committed.conclusion == 'skipped'
# run: |
# curl -sLO https://github.com/peak/s5cmd/releases/download/v1.0.0/s5cmd_1.0.0_Linux-64bit.tar.gz
# tar -xzf s5cmd_1.0.0_Linux-64bit.tar.gz
# chmod +x s5cmd
# sudo mv s5cmd /usr/local/bin/
# echo "****Showing working dir and listing files.****"
# pwd && ls -lah
# echo "****Running delta sync against S3.****"
# s5cmd cp -s -n -u dist/ s3://${{ secrets.AWS_S3_BUCKET_NAME }}
# Use the aws cli tool to perform a glob invalidation of the entire site against CloudFront.
- name: Invalidate cache on CloudFront
if: steps.nothing_committed.conclusion == 'skipped'
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRO_ID }} --paths "/*"

201
exampleSite/LICENSE Normal file
View file

@ -0,0 +1,201 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

3
exampleSite/README.md Normal file
View file

@ -0,0 +1,3 @@
## Guide
This guide covers the necessary bits. As the project evolves, it will only become more comprehensive

0
exampleSite/config/.gitkeep Normal file
View file

6
exampleSite/config/_default/languages.toml Normal file
View file

@ -0,0 +1,6 @@
[en]
LanguageName = "English"
weight = 2
# [tr]
# LanguageName = "Turkish"
# weight = 1

19
exampleSite/config/_default/markup.toml Normal file
View file

@ -0,0 +1,19 @@
[goldmark]
[goldmark.renderer]
unsafe = true
[goldmark.extensions]
typographer = false
[highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
lineNos = true
lineNumbersInTable = false
noClasses = false
style = "monokai"
tabWidth = 2
[tableOfContents]
endLevel = 4
ordered = false
startLevel = 2

25
exampleSite/config/_default/menus/menu.en.toml Normal file
View file

@ -0,0 +1,25 @@
# menu items
[[main]]
name = "Blog"
weight = 5
url = "blog/"
[[main]]
name = "Docs"
weight = 2
url = "docs/"
[[main]]
name = "Tutorials"
weight = 2
url = "tutorials/"
[[main]]
name = "Example"
weight = 3
url = "https://docs.neuralvibes.com"
# [[main]]
# name = "Blog"
# weight = 4
# url = "blog/"

55
exampleSite/config/_default/params.toml Normal file
View file

@ -0,0 +1,55 @@
# use the setting below to set multiple docs directories.
# docSections = ["docs", "tutorials"]
uniqueHomePage = true # change to false to add sidebar to homepage
blogDir = "blog" # can be posts, blog e.t.c
repo = "https://github.com/onweru/compose"
time_format_blog = "Monday, January 02, 2006"
time_format_default = "January 2, 2006"
enableDarkMode = false # set to false to disable darkmode by default # user will still have the option to use dark mode
defaultLightingMode = "auto" # other possible values: "dark", "light"
# sets the maximum number of lines per codeblock. The codeblock will however be scrollable and expandable.
codeMaxLines = 10
# show/hide line numbers by default. Switch to `true` if you'd rather have them on.
showLineNumbers = false
# By default the template will look for icons under the icons directory. In some situations you might wanna change that. edit the line below
# iconsPath = 'icons/'
otherSearchableFields = ["Tags", "Categories", "CustomField"] # As they appear in frontmatter
# Defaults to true if not set
# Enable copyRight Footer Stamp. Takes in attribution
enableCopyright = false
# search
[search]
on = true
global = false # turn to `true` to enable global search
[search.algolia]
enable = false # if false search will default to fusejs
id = "Q40WQQX84U" # Application ID
index = "compose" # Index name
key = "da87401a458102ec6bbd6cc5e5cf8d95" # Search-Only API Key
# Site logo
[logo]
lightMode = "images/compose.svg"
darkMode = "images/compose-light.svg"
[source]
name = "GitHub"
iconLight = "images/GitHubMarkLight.svg"
iconDark = "images/GitHubMarkDark.svg"
url = "https://github.com/onweru/compose/"
# optional
# attribution. Feel free to delete this
[author]
name = "Weru"
url = "https://neuralvibes.com/author/"

33
exampleSite/content/_index.md Normal file
View file

@ -0,0 +1,33 @@
+++
title = "Compose"
[data]
baseChartOn = 3
colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"]
columnTitles = ["Section", "Status", "Author"]
fileLink = "content/projects.csv"
title = "Projects"
+++
{{< block "grid-2" >}}
{{< column >}}
# Compose your Docs with **Ease**.
Compose is a lean `Hugo` documentation theme, inspired by [forestry.io](https://forestry.io/docs/welcome/).
{{< tip "warning" >}}
Feel free to open a [PR](https://github.com/onweru/compose/pulls), raise an [issue](https://github.com/onweru/compose/issues/new/choose "Open a Github Issue")(s) or request new feature(s). {{< /tip >}}
{{< tip >}}
You can generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown using [mermaid](./docs/compose/mermaid/).
Or, [generate graphs, charts](docs/compose/graphs-charts-tables/#show-a-pie-doughnut--bar-chart-at-once) and tables from a csv, ~~or a json~~ file.
{{< /tip >}}
{{< button "docs/compose/" "Read the Docs" >}}{{< button "https://github.com/onweru/compose" "Download Theme" >}}
{{< /column >}}
{{< column >}}
![diy](/images/scribble.jpg)
{{< /column >}}
{{< /block >}}

3
exampleSite/content/blog/_index.md Normal file
View file

@ -0,0 +1,3 @@
+++
title = "Blog"
+++

1097
exampleSite/content/blog/creating-a-new-theme.md Normal file
View file

File diff suppressed because it is too large Load diff

99
exampleSite/content/blog/emoji-support.md Normal file
View file

@ -0,0 +1,99 @@
+++
author = "Hugo Authors"
title = "Emoji Support"
date = "2019-03-05"
description = "Guide to emoji usage in Hugo"
tags = ["emoji"]
image = "/images/artist.jpg"
+++
Emoji can be enabled in a Hugo project in a number of ways.
<!--more-->
The `[emojify](https://gohugo.io/functions/emojify/)` function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
{{< youtube "https://www.youtube.com/watch?v=eW7Twd85m2g" >}}
To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
<br>
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
***
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
### Inline CSS
```html
<style>
.emojify {
font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
font-size: 2rem;
vertical-align: middle;
}
@media screen and (max-width:650px) {
.nowrap {
display: block;
margin: 25px 0;
}
}
</style>
```
### Javascript
```javascript
function createEl(element) {
return document.createElement(element);
}
function elem(selector, parent = document){
let elem = parent.querySelector(selector);
return elem != false ? elem : false;
}
let navBar = elem(`.${bar}`);
let nav = elem('.nav-body');
let open = 'nav-open';
let exit = 'nav-exit';
let drop = 'nav-drop';
let pop = 'nav-pop';
let navDrop = elem(`.${drop}`);
let hidden = 'hidden';
```
### Swift
```swift
class Person {
var residence: Residence?
}
class Residence {
var rooms = [Room]()
var numberOfRooms: Int {
return rooms.count
}
subscript(i: Int) -> Room {
get {
return rooms[i]
}
set {
rooms[i] = newValue
}
}
func printNumberOfRooms() {
print("The number of rooms is \(numberOfRooms)")
}
var address: Address?
}
```

339
exampleSite/content/blog/goisforlovers.md Normal file
View file

@ -0,0 +1,339 @@
+++
title = "(Hu)go Template Primer"
description = ""
tags = [
"go",
"golang",
"templates",
"themes",
"development",
]
date = "2014-04-02"
categories = [
"Development",
"golang",
]
image = "/images/artist.jpg"
+++
Hugo uses the excellent [Go](https://golang.org/) [html/template](https://golang.org/pkg/html/template/) library for
its template engine. It is an extremely lightweight engine that provides a very
small amount of logic. In our experience that it is just the right amount of
logic to be able to create a good static website. If you have used other
template systems from different languages or frameworks you will find a lot of
similarities in Go templates.
This document is a brief primer on using Go templates. The [Go docs](https://golang.org/pkg/html/template/)
provide more details.
## Introduction to Go Templates
Go templates provide an extremely simple template language. It adheres to the
belief that only the most basic of logic belongs in the template or view layer.
One consequence of this simplicity is that Go templates parse very quickly.
A unique characteristic of Go templates is they are content aware. Variables and
content will be sanitized depending on the context of where they are used. More
details can be found in the [Go docs](https://golang.org/pkg/html/template/).
## Basic Syntax
Golang templates are HTML files with the addition of variables and
functions.
**Go variables and functions are accessible within {{ }}**
Accessing a predefined variable "foo":
{{ foo }}
**Parameters are separated using spaces**
Calling the add function with input of 1, 2:
{{ add 1 2 }}
**Methods and fields are accessed via dot notation**
Accessing the Page Parameter "bar"
{{ .Params.bar }}
**Parentheses can be used to group items together**
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
## Variables
Each Go template has a struct (object) made available to it. In hugo each
template is passed either a page or a node struct depending on which type of
page you are rendering. More details are available on the
[variables](/layout/variables) page.
A variable is accessed by referencing the variable name.
<title>{{ .Title }}</title>
Variables can also be defined and referenced.
{{ $address := "123 Main St."}}
{{ $address }}
## Functions
Go template ship with a few functions which provide basic functionality. The Go
template system also provides a mechanism for applications to extend the
available functions with their own. [Hugo template
functions](/layout/functions) provide some additional functionality we believe
are useful for building websites. Functions are called by using their name
followed by the required parameters separated by spaces. Template
functions cannot be added without recompiling hugo.
**Example:**
{{ add 1 2 }}
## Includes
When including another template you will pass to it the data it will be
able to access. To pass along the current context please remember to
include a trailing dot. The templates location will always be starting at
the /layout/ directory within Hugo.
**Example:**
{{ template "chrome/header.html" . }}
## Logic
Go templates provide the most basic iteration and conditional logic.
### Iteration
Just like in Go, the Go templates make heavy use of range to iterate over
a map, array or slice. The following are different examples of how to use
range.
**Example 1: Using Context**
{{ range array }}
{{ . }}
{{ end }}
**Example 2: Declaring value variable name**
{{range $element := array}}
{{ $element }}
{{ end }}
**Example 2: Declaring key and value variable name**
{{range $index, $element := array}}
{{ $index }}
{{ $element }}
{{ end }}
### Conditionals
If, else, with, or, & and provide the framework for handling conditional
logic in Go Templates. Like range, each statement is closed with `end`.
Go Templates treat the following values as false:
* false
* 0
* any array, slice, map, or string of length zero
**Example 1: If**
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
**Example 2: If -> Else**
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{else}}
{{ index .Params "caption" }}
{{ end }}
**Example 3: And & Or**
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
**Example 4: With**
An alternative way of writing "if" and then referencing the same value
is to use "with" instead. With rebinds the context `.` within its scope,
and skips the block if the variable is absent.
The first example above could be simplified as:
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
**Example 5: If -> Else If**
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{ else if isset .Params "caption" }}
{{ index .Params "caption" }}
{{ end }}
## Pipes
One of the most powerful components of Go templates is the ability to
stack actions one after another. This is done by using pipes. Borrowed
from unix pipes, the concept is simple, each pipeline's output becomes the
input of the following pipe.
Because of the very simple syntax of Go templates, the pipe is essential
to being able to chain together function calls. One limitation of the
pipes is that they only can work with a single value and that value
becomes the last parameter of the next pipeline.
A few simple examples should help convey how to use the pipe.
**Example 1 :**
{{ if eq 1 1 }} Same {{ end }}
is the same as
{{ eq 1 1 | if }} Same {{ end }}
It does look odd to place the if at the end, but it does provide a good
illustration of how to use the pipes.
**Example 2 :**
{{ index .Params "disqus_url" | html }}
Access the page parameter called "disqus_url" and escape the HTML.
**Example 3 :**
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
Stuff Here
{{ end }}
Could be rewritten as
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
Stuff Here
{{ end }}
## Context (aka. the dot)
The most easily overlooked concept to understand about Go templates is that {{ . }}
always refers to the current context. In the top level of your template this
will be the data set made available to it. Inside of a iteration it will have
the value of the current item. When inside of a loop the context has changed. .
will no longer refer to the data available to the entire page. If you need to
access this from within the loop you will likely want to set it to a variable
instead of depending on the context.
**Example:**
{{ $title := .Site.Title }}
{{ range .Params.tags }}
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
{{ end }}
Notice how once we have entered the loop the value of {{ . }} has changed. We
have defined a variable outside of the loop so we have access to it from within
the loop.
# Hugo Parameters
Hugo provides the option of passing values to the template language
through the site configuration (for sitewide values), or through the meta
data of each specific piece of content. You can define any values of any
type (supported by your front matter/config format) and use them however
you want to inside of your templates.
## Using Content (page) Parameters
In each piece of content you can provide variables to be used by the
templates. This happens in the [front matter](/content/front-matter).
An example of this is used in this documentation site. Most of the pages
benefit from having the table of contents provided. Sometimes the TOC just
doesn't make a lot of sense. We've defined a variable in our front matter
of some pages to turn off the TOC from being displayed.
Here is the example front matter:
```markdown
---
title: "Permalinks"
date: "2013-11-18"
aliases:
- "/doc/permalinks/"
groups: ["extras"]
groups_weight: 30
notoc: true
---
```
Here is the corresponding code inside of the template:
```html
{{ if not .Params.notoc }}
<div id="toc" class="well col-md-4 col-sm-6">
{{ .TableOfContents }}
</div>
{{ end }}
```
## Using Site (config) Parameters
In your top-level configuration file (eg, `config.yaml`) you can define site
parameters, which are values which will be available to you in chrome.
For instance, you might declare:
```yaml
params:
CopyrightHTML: "Copyright &#xA9; 2013 John Doe. All Rights Reserved."
TwitterUser: "spf13"
SidebarRecentLimit: 5
```
Within a footer layout, you might then declare a `<footer>` which is only
provided if the `CopyrightHTML` parameter is provided, and if it is given,
you would declare it to be HTML-safe, so that the HTML entity is not escaped
again. This would let you easily update just your top-level config file each
January 1st, instead of hunting through your templates.
```html
{{if .Site.Params.CopyrightHTML}}
<footer>
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
</footer>
{{end}}
```
An alternative way of writing the "if" and then referencing the same value
is to use "with" instead. With rebinds the context `.` within its scope,
and skips the block if the variable is absent:
```html
{{with .Site.Params.TwitterUser}}
<span class="twitter">
<a href="https://twitter.com/{{.}}" rel="author">
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
alt="Twitter"></a>
</span>
{{end}}
```
Finally, if you want to pull "magic constants" out of your layouts, you can do
so, such as in this example:
```html
<nav class="recent">
<h1>Recent Posts</h1>
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
{{end}}</ul>
</nav>
```

86
exampleSite/content/blog/hugoisforlovers.md Normal file
View file

@ -0,0 +1,86 @@
+++
title = "Getting Started with Hugo"
description = ""
tags = [ "go", "golang", "hugo", "development" ]
date = 2014-04-02T00:00:00.000Z
categories = [ "Development", "golang" ]
image = "/images/stuck.jpg"
+++
## Step 1. Install Hugo
Go to [Hugo releases](https://github.com/spf13/hugo/releases) and download the
appropriate version for your OS and architecture.
Save it somewhere specific as we will be using it in the next step.
More complete instructions are available at [Install Hugo](https://gohugo.io/getting-started/installing/)
## Step 2. Build the Docs
Hugo has its own example site which happens to also be the documentation site
you are reading right now.
Follow the following steps:
1. Clone the [Hugo repository](http://github.com/spf13/hugo)
2. Go into the repo
3. Run hugo in server mode and build the docs
4. Open your browser to http://localhost:1313
Corresponding pseudo commands:
```shell
git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Press ctrl+c to stop
```
Once you've gotten here, follow along the rest of this page on your local build.
## Step 3. Change the docs site
Stop the Hugo process by hitting Ctrl+C.
Now we are going to run hugo again, but this time with hugo in watch mode.
```shell
/path/to/hugo/from/step/1/hugo server --source=./docs --watch
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Watching for changes in /Users/spf13/Code/hugo/docs/content
> Press ctrl+c to stop
```
Open your [favorite editor](http://vim.spf13.com) and change one of the source
content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*.
Content files are found in `docs/content/`. Unless otherwise specified, files
are located at the same relative location as the url, in our case
`docs/content/overview/quickstart.md`.
Change and save this file.. Notice what happened in your terminal.
```shell
> Change detected, rebuilding site
> 29 pages created
> 0 tags index created
> in 26 ms
```
Refresh the browser and observe that the typo is now fixed.
Notice how quick that was. Try to refresh the site before it's finished building. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.
## Step 4. Have fun
The best way to learn something is to play with it...

159
exampleSite/content/blog/migrate-from-jekyll.md Normal file
View file

@ -0,0 +1,159 @@
+++
date = 2014-03-10
title = "Migrate to Hugo from Jekyll"
image = "/images/speakers.jpg"
+++
## Move static content to `static`
Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output. Hugo keeps all static content under `static`. You should therefore move it all there.
With Jekyll, something that looked like
▾ <root>/
▾ images/
logo.png
should become
▾ <root>/
▾ static/
▾ images/
logo.png
Additionally, you'll want any files that should reside at the root (such as `CNAME`) to be moved to `static`.
## Create your Hugo configuration file
Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the [Hugo configuration documentation](/overview/configuration/) for details.
{{< youtube "https://www.youtube.com/watch?v=eW7Twd85m2g" >}}
## Set your configuration publish folder to `_site`
The default is for Jekyll to publish to `_site` and for Hugo to publish to `public`. If, like me, you have [`_site` mapped to a git submodule on the `gh-pages` branch](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.html), you'll want to do one of two alternatives:
1. Change your submodule to point to map `gh-pages` to public instead of `_site` (recommended).
```shell
git submodule deinit _site
git rm _site
git submodule add -b gh-pages git@github.com:your-username/your-repo.git public
```
2. Or, change the Hugo configuration to use `_site` instead of `public`.
{
..
"publishdir": "_site",
..
}
## Convert Jekyll templates to Hugo templates
That's the bulk of the work right here. The documentation is your friend. You should refer to [Jekyll's template documentation](http://jekyllrb.com/docs/templates/) if you need to refresh your memory on how you built your blog and [Hugo's template](/layout/templates/) to learn Hugo's way.
As a single reference data point, converting my templates for [heyitsalex.net](http://heyitsalex.net/) took me no more than a few hours.
## Convert Jekyll plugins to Hugo shortcodes
Jekyll has [plugins](http://jekyllrb.com/docs/plugins/); Hugo has [shortcodes](/docs/compose/shortcodes/). It's fairly trivial to do a port.
### Implementation
As an example, I was using a custom [`image_tag`](https://github.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc06908ec/_plugins/image_tag.rb) plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing.
#### Jekyll's plugin:
```ruby
module Jekyll
class ImageTag < Liquid::Tag
@url = nil
@caption = nil
@class = nil
@link = nil
// Patterns
IMAGE_URL_WITH_CLASS_AND_CAPTION =
IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->((https?:\/\/|\/)(\S+))(\s*)/i
IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
IMAGE_URL = /((https?:\/\/|\/)(\S+))/i
def initialize(tag_name, markup, tokens)
super
if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK
@class = $1
@url = $3
@caption = $7
@link = $9
elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
@class = $1
@url = $3
@caption = $7
elsif markup =~ IMAGE_URL_WITH_CAPTION
@url = $1
@caption = $5
elsif markup =~ IMAGE_URL_WITH_CLASS
@class = $1
@url = $3
elsif markup =~ IMAGE_URL
@url = $1
end
end
def render(context)
if @class
source = "<figure class='#{@class}'>"
else
source = "<figure>"
end
if @link
source += "<a href=\"#{@link}\">"
end
source += "<img src=\"#{@url}\">"
if @link
source += "</a>"
end
source += "<figcaption>#{@caption}</figcaption>" if @caption
source += "</figure>"
source
end
end
end
Liquid::Template.register_tag('image', Jekyll::ImageTag)
```
is written as this Hugo shortcode:
```html
<!-- image -->
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
{{ if .Get "link"}}</a>{{ end }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>{{ if isset .Params "title" }}
{{ .Get "title" }}{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}<p>
{{ .Get "caption" }}
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
{{ .Get "attr" }}
{{ if .Get "attrlink"}}</a> {{ end }}
</p> {{ end }}
</figcaption>
{{ end }}
</figure>
<!-- image -->
```
### Usage
I simply changed:
{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`):
{{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}}
As a bonus, the shortcode named parameters are, arguably, more readable.
## Finishing touches
### Fix content
Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that `hugo server --watch` is your friend. Test your changes and fix errors as needed.
### Clean up
You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it.
## A practical example in a diff
[Hey, it's Alex](http://heyitsalex.net/) was migrated in less than a _father-with-kids day_ from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this [diff](https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610).

18
exampleSite/content/docs/_index.md Normal file
View file

@ -0,0 +1,18 @@
+++
title = "Themes' Docs"
weight = 1
+++
These docs consists of two parts:
1. Hugo Compose Themes docs
2. Hugo Clarity Theme docs.
Please note that the features listed under each theme are independent of each other. That is to say, some features may only be found in one theme and not in both.
<!-- That content is better than dummy lorem ipsum 2) That content serves a good real-world demo for this theme 3) Publish more structured docs for each theme which are better than long blocky READMEs -->
{{< button "./compose/" "Compose Theme Docs" "mb-1" >}}
{{< button "./clarity/" "Clarity Theme Docs" >}}

8
exampleSite/content/docs/clarity/_index.md Normal file
View file

@ -0,0 +1,8 @@
+++
Title = "Clarity Docs"
weight = 10
+++
__Hugo Clarity__ is a technology-minded theme for Hugo based on VMware's open-source [Clarity Design System](https://clarity.design/) featuring rich code support, dark/light mode, mobile support, and much more. See [a live demo at __neonmirrors.net__](https://neonmirrors.net/).
{{< button "./getting-started/" "Get started with Clarity" >}}

55
exampleSite/content/docs/clarity/blogging.md Normal file
View file

@ -0,0 +1,55 @@
+++
title="Blogging"
weight=16
+++
### Blog directory
Edit the `config.toml` file and change the `blogDir` key. Value will be name of the folder where the blog articles reside.
```yaml
[params]
...
blogDir = "blog"
...
```
For more info, see the [Hugo docs](https://gohugo.io/functions/where/#mainsections).
### Mobile menu positioning
The navigation menu when mobile browsing can be configured in `config.toml` to open right or left depending on preference. The "hamburger" menu icon will always display in the upper right hand corner regardless.
```yaml
[params]
...
mobileNavigation = "left" # Mobile nav menu will open to the left of the screen.
...
```
### Tags and Taxonomies
#### Show number of tags
The number of tags and taxonomies (including categories) that should be shown can be configured so that any more than this value will only be accessible when clicking the All Tags button. This is to ensure a large number of tags or categories can be easily managed without consuming excess screen real estate. Edit the `numberOfTagsShown` parameter and set accordingly.
```yaml
[params]
...
numberOfTagsShown = 14 # Applies for all other default & custom taxonomies. e.g categories, brands see https://gohugo.io/content-management/taxonomies#what-is-a-taxonomy
...
```
#### Number of tags example
![Tags](../../../images/clarity/tags.png)
<!-- mark -->
### Table of contents
Each article can optionally have a table of contents (TOC) generated for it based on top-level links. By configuring the `toc` parameter in the article frontmatter and setting it to `true`, a TOC will be generated only for that article. The TOC will then render under the featured image.
#### Table of contents (TOC) example
![Article table of contents](../../../images/clarity/article-toc.png)

133
exampleSite/content/docs/clarity/customize.md Normal file
View file

@ -0,0 +1,133 @@
+++
title = "Customization"
weight = 14
+++
## Configuration
If set, jump over to the `config.toml` file and start [configuring](#configuration) your site.
This section will mainly cover settings that are unique to this theme. If something is not covered here (or elsewhere in this file), there's a good chance it is covered in [this Hugo docs page](https://gohugo.io/getting-started/configuration/#configuration-file).
### Global Parameters
These options set global values that some pages or all pages in the site use by default.
| Parameter | Value Type | Overidable on Page |
|:---- | ---- | ---- |
| author | string | no |
| twitter | string | no |
| largeTwitterCard | boolean | no |
| ga_analytics | string | no |
| description | string | yes |
| introDescription | string | no |
| numberOfTagsShown | integer | no |
| fallBackOgImage | file path (string) | no |
| codeMaxLines | integer | yes |
| codeLineNumbers | boolean | yes |
| mainSections | array/string | no |
| centerLogo | boolean | no |
| logo | file path (string) | no |
| mobileNavigation | string | no |
| figurePositionShow | boolean | yes |
| figurePositionLabel | string | no |
| customCSS | array of file path (string) | no |
| customJS | array of file path (string) | no |
| enforceLightMode | boolean | N/A |
| enforceDarkMode | boolean | N/A |
| titleSeparator| string | no |
| comment | boolean | no |
### Page Parameters
These options can be set from a page [frontmatter](https://gohugo.io/content-management/front-matter#readout) or via [archetypes](https://gohugo.io/content-management/archetypes/#readout).
| Parameter | Value Type | Overrides Global |
|:---- | ---- | ---- |
| title | string | N/A |
| date | date | N/A |
| description | string | N/A |
| draft | boolean | N/A |
| featured | boolean | N/A |
| tags | array/string | N/A |
| categories | array/string | N/A |
| toc | boolean | N/A |
| thumbnail | file path (string) | N/A |
| featureImage | file path (string) | N/A |
| shareImage | file path (string) | N/A |
| codeMaxLines | integer | yes |
| codeLineNumbers | boolean | yes |
| figurePositionShow | boolean | yes |
| figurePositionLabel | string | no |
| comment | boolean | no |
### Modify links menu
To add, remove, or reorganize top menu items, [edit this YAML file](https://github.com/chipzoller/hugo-clarity/blob/master/exampleSite/data/menu.yaml). These menu items also display any categories (taxonomies) that might be configured for articles.
### Social media
To edit your social media profile links, [edit this YAML file](https://github.com/chipzoller/hugo-clarity/blob/master/exampleSite/data/social.yaml).
If you wish to globally use a [large Twitter summary card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image) when sharing posts, set the global parameter `largeTwitterCard` to `true`.
### Search engine
If using Google Analytics, configure the `ga_analytics` global parameter in your site with your ID.
### Forcing light or dark mode
By default, sites authored using Clarity will load in the browser with the user's system-wide settings. I.e., if the underlying OS is set to dark mode, the site will automatically load in dark mode. Regardless of the default mode, a UI control switch exists to override the theme mode at the user's discretion.
In order to override this behavior and force one mode or another, add either `enforceLightMode` or `enforceDarkMode` to your `config.toml` file. If neither value is present, add it.
To enforce Light Mode by default, turn `enforceLightMode` to `true`.
To enforce Dark Mode by default, turn `enforceDarkMode` to `true`
```yaml
[params]
...
enforceLightMode = true # Force the site to always load in light mode.
...
```
Please note that you cannot enforce both modes at the same time. It wouldn't make sense, would it?
{{< tip "warning" >}}
> Please also note that the mode toggle UI will remain in place. That way, if a user prefers dark mode, they can have their way. The best of both worlds.
{{< /tip >}}
### I18N
This theme supports Multilingual (i18n / internationalization / translations)
The `exampleSite` gives you some examples already.
You may extend the multilingual functionality by following the [official documentation](https://gohugo.io/content-management/multilingual/).
Things to consider in multilingual:
* **supported languages** are configured in [config/_default/languages.toml](./exampleSite/config/_default/languages.toml)
* **add new language support** by creating a new file inside [i18n](./i18n/) directory.
Check for missing translations using `hugo server --i18n-warnings`
* **taxonomy** names (tags, categories, etc...) are translated in [i18n](./i18n/) as well (translate the key)
* **menus** are translated manually in the config files [config/_default/menus/menu.xx.toml](./exampleSite/config/_default/menus/)
* **menu's languages list** are semi-hardcoded. You may chose another text for the menu entry with [languageMenuName](./exampleSite/config.toml). Please, do better and create a PR for that.
* **content** must be translated individually. Read the [official documentation](https://gohugo.io/content-management/multilingual/#translate-your-content) for information on how to do it.
**Note:** if you do NOT want any translations (thus removing the translations menu entry), then you must not have any translations.
In the exampleSite that's as easy as removing the extra translations from the `config/_default/...` or executing this onliner:
```shell
sed '/^\[pt]$/,$d' -i config/_default/languages.toml && rm config/_default/menus/menu.pt.toml
```
### Comments
Clarity supports Hugo built-in Disqus partial, you can enable Disqus simply by setting [`disqusShortname`](https://gohugo.io/templates/internal/#configure-disqus) in your configuration file.
{{< tip >}}
> `disqusShortname` should be placed in root level of configuration.
{{< /tip >}}
You can also create a file named `layouts/partials/comments.html` for customizing the comments, checkout [Comments Alternatives](https://gohugo.io/content-management/comments/#comments-alternatives) for details.

25
exampleSite/content/docs/clarity/features.md Normal file
View file

@ -0,0 +1,25 @@
+++
title = "Features"
Weight = 13
+++
* Blog with tagging and category options
* Deeplinks
* Native Image Lazy Loading
* Customizable (see config)
* Dark Mode (with UI controls for user preference setting)
* Toggleable table of contents
* Flexible image configuration
* Logo alignment
* Mobile support with configurable menu alignment
* Syntax Highlighting
* Rich code block functions including:
1. Copy to clipboard
2. Toggle line wrap (dynamic)
3. Toggle line numbers
4. Language label
5. Toggle block expansion/contraction (dynamic)
To put it all in context, here is a preview showing all functionality.
![code block functions](../../../images/clarity/syntax-block.gif)

67
exampleSite/content/docs/clarity/getting-started.md Normal file
View file

@ -0,0 +1,67 @@
+++
title = "Getting started"
weight = 11
+++
## Prerequisites
Firstly, __ensure you have installed the [extended version of Hugo](https://github.com/gohugoio/hugo/releases)__. See installation steps from [Hugo's official docs](https://gohugo.io/getting-started/installing/).
## Getting up and running
Read the [prerequisites](#prerequisites) above and verify you're using the extended version of Hugo. There are at least two ways of quickly getting started with Hugo and the VMware Clarity theme:
### Option 1 (recommended)
Generate a new Hugo site and add this theme as a Git submodule inside your themes folder:
```bash
hugo new site yourSiteName
cd yourSiteName
git init
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity
cp -a themes/hugo-clarity/exampleSite/* .
```
Then run
```bash
hugo server
```
Hurray!
### Option 2 (Great for testing quickly)
You can run your site directly from the `exampleSite`. To do so, use the following commands:
```bash
git clone https://github.com/chipzoller/hugo-clarity
cd hugo-clarity/exampleSite/
hugo server --themesDir ../..
```
> Although, option 2 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
### Option 3 (The new, most fun & painless approach)
This option enables you to load this theme as a hugo module. It arguably requires the least effort to run and maintain in your website.
First things first, ensure you have `go` binary [installed on your machine](https://golang.org/doc/install).
```bash
git clone https://github.com/chipzoller/hugo-clarity.git clarity
cd clarity/exampleSite/
hugo mod init my-site
```
Open config.toml file in your code editor, replace `theme = "hugo-clarity"` with `theme = ["github.com/chipzoller/hugo-clarity"]` or just `theme = "github.com/chipzoller/hugo-clarity"`.
Hurray you can now run
```yaml
hugo server
```
To pull in theme updates, run `hugo mod get -u ./...` from the theme folder. If unsure, [learn how to update hugo modules](https://gohugo.io/hugo-modules/use-modules/#update-modules)
> There [is more you could do with hugo modules](https://discourse.gohugo.io/t/hugo-modules-for-dummies/20758), but this will suffice for our use case here.

117
exampleSite/content/docs/clarity/images.md Normal file
View file

@ -0,0 +1,117 @@
+++
title = "Manipulating Images"
weight = 15
+++
## Images
### Image figure captions
You have the option of adding captions to images in blog posts and automatically prepending a desired string such as "Figure N" to the alt text. This is controlled via two global settings.
`figurePositionLabel` is a string which will be prepended to any alt text of an article image. By default, this is set to "Figure." And `figurePositionShow` controls, globally, whether to show this label. It does not affect whether to show the image alt text, only the prefix figure caption. For more granular control, `figurePositionShow` can be overridden at the article level if desired.
The number will be automatically calculated and assigned after the `figurePositionLabel` text starting from the top of the article and counting down. Featured images will be excluded from this figuration.
### Image figure captions example
In this example, `figurePositionLabel` is set to "Figure" in `config.toml` and this is the first image in a given article.
```markdown
![Antrea Kubernetes nodes prepared](./images/calrity/image-figure.png)
```
![Here is my alt text for this image.](../../../images/clarity/image-figure.png)
### Inline images
To make a blog image inline, append `:inline` to its alt text. Typically, inline images will have no alt text associated with them.
### Inline images example
```markdown
<!-- some image without alt text -->
![:inline](someImageUrl)
<!-- some image with alt text -->
![some alt text:inline](someOtherImageUrl)
```
![Inline image example](../../../images/clarity/image-inline.png)
### Float images to the left
To align a blog image to the left, append `:left` to its alt text. Article text will then flow to the right of the image.
### Float images left example
```markdown
<!-- some image without alt text -->
![:left](someImageUrl)
<!-- some image with alt text -->
![some alt text:left](someOtherImageUrl)
```
### Add classes to images
To add a class image to the left, append `::<classname>` to its alt text. You can also add multiple classes to an image separated by space. `::<classname1> <classname2>`.
### Image class example
```markdown
<!-- some image without alt text -->
![::img-medium](someImageUrl)
<!-- some image with alt text -->
![some alt text::img-large img-shadow](someOtherImageUrl)
```
### Article thumbnail image
Blog articles can specify a thumbnail image which will be displayed to the left of the card on the home page. Thumbnails should be square (height:width ratio of `1:1`) and a suggested dimension of 150 x 150 pixels. They will be specified using a frontmatter variable as follows:
```yaml
...
thumbnail: "images/2020-04/capv-overview/thumbnail.jpg"
...
```
The thumbnail image will take precedence on opengraph share tags if the [shareImage](#share-image) parameter is not specified.
### Article featured image
Each article can specify an image that appears at the top of the content. When sharing the blog article on social media, if a thumnail is not specified, the featured image will be used as a fallback on opengraph share tags.
```yaml
...
featureImage: "images/2020-04/capv-overview/featured.jpg"
...
```
### Share Image
Sometimes, you want to explicitly set the image that will be used in the preview when you share an article on social media. You can do so in the front matter.
```yaml
...
shareImage = "images/theImageToBeUsedOnShare.png"
...
```
Note that if a share image is not specified, the order of precedence that will be used to determine which image applies is `thumbnail` => `featureImage` => `fallbackOgImage`. When sharing a link to the home page address of the site (as opposed to a specific article), the `fallbackOgImage` will be used.
### Align logo
You can left align or center your site's logo.
```yaml
...
centerLogo = true # Change to false to align left
...
```
If no logo is specified, the title of the site will appear in its place.

42
exampleSite/content/docs/clarity/syntax-highlighting.md Normal file
View file

@ -0,0 +1,42 @@
+++
title = "Syntax Highlighting"
weight = 17
+++
### Code
#### Display line numbers
Choose whether to display line numbers within a code block globally with the parameter `codeLineNumbers` setting to `true` or `false`.
```yaml
[params]
...
codeLineNumbers = true # Shows line numbers for all code blocks globally.
...
```
#### Limit code block height
You can globally control the number of lines which are displayed by default for your code blocks. Code which has the number of lines exceed this value will dynamically cause two code block expansion buttons to appear, allowing the user to expand to full length and contract. This is useful when sharing code or scripts with tens or hundreds of lines where you wish to control how many are displayed. Under params in `config.toml` file, add a value as follows:
```yaml
[params]
...
codeMaxLines = 10 # Maximum number of lines to be shown by default across all articles.
...
```
> If the value already exists, change it to the desired number. This will apply globally.
If you need more granular control, this parameter can be overridden at the blog article level. Add the same value to your article frontmatter as follows:
```yaml
...
codeMaxLines = 15 # Maximum number of lines to be shown in code blocks in this blog post.
...
```
If `codeMaxLines` is specified both in `config.toml` and in the article frontmatter, the value specified in the article frontmatter will apply to the given article. In the above example, the global default is `10` and yet the article value is `15` so code blocks in this article will auto-collapse after 15 lines.
If `codeMaxLines` is not specified anywhere, an internal default value of `100` will be assumed.

38
exampleSite/content/docs/clarity/theme-overrides.md Normal file
View file

@ -0,0 +1,38 @@
+++
title = "Theme Overrides"
weight = 18
+++
### Custom CSS and JS
To minimize HTTP requests per page, we would recommend loading CSS styles and JavaScript helpers in single bundles. That is to say, one CSS file and one JavaScript file. Using Hugo minify functions, these files will be minified to optimize the size.
Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via the custom SASS file ([Compose](https://github.com/onweru/compose/blob/master/assets/sass/_custom.sass), [Clarity](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_custom.sass)) and the custom JS file ([Compose](https://github.com/onweru/compose/hugo-compose/blob/master/assets/js/custom.js), [Clarity](https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/custom.js)).
However, sometimes you may need to load additional style or script files. In such cases, you can add custom `.css` and `.js` files by listing them in the `config.toml` file (see the snippet below). Similar to images, these paths should be relative to the `static` directory.
```yaml
[params]
...
customCSS = ["css/custom.css"] # Include custom CSS files
customJS = ["js/custom.js"] # Include custom JS files
...
```
> __Pro Tip__: You can change the theme colors via the [this variable's SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_variables.sass)
### Hooks
Clarity provides some hooks for adding code on page.
If you need to add some code(CSS import, HTML meta or similar) to the head section on every page, add a partial to your project:
```
layouts/partials/hooks/head-end.html
```
Similar, if you want to add some code right before the body end, create your own version of the following file:
```
layouts/partials/hooks/body-end.html
```

8
exampleSite/content/docs/compose/_index.md Normal file
View file

@ -0,0 +1,8 @@
+++
title = "Compose Docs"
weight = 1
+++
Welcome to the Compose theme user guide! This guide shows you how to get started creating technical documentation sites using Compose, including site customization and how to use Compose's blocks and templates.
{{< button "./install-theme/" "Get started now" >}}

103
exampleSite/content/docs/compose/customize.md Normal file
View file

@ -0,0 +1,103 @@
+++
description = "basic configuration"
title = "Customize layouts & components"
weight = 10
+++
### Shortcodes modifiers
These modifiers are classes you can use with shortcodes to customize the look and feel of your layouts and components.
#### Grid
| modifier | space |
| --- | --- |
| grid-2 | 2 columns |
| grid-3 | 3 columns |
| grid-4 | 4 columns |
#### Spacing
| modifier | space |
| --- | --- |
| mt-1 | 1.5rem top margin |
| mt-2 | 3rem top margin |
| mt-3 | 4.5rem top margin |
| mt-4 | 6rem top margin |
> use pt-1 \~ pt-4 for top padding
| modifier | space |
| --- | --- |
| mb-1 | 1.5rem bottom margin |
| mb-2 | 3rem bottom margin |
| mb-3 | 4.5rem bottom margin |
| mb-4 | 6rem bottom margin |
> use pb-1 \~ pb-4 for bottom padding
### How do I disable dark mode?
Under `params` add `enableDarkMode = false` to your `hugo.toml` file. If your site is based on the exampleSite, the value is already included; you only need to uncomment it.
> The user will still have the option to activate dark mode, if they so wish through the UI
### How do I change the theme color?
If the theme is a git submodule, you can copy the file `assets/sass/_variables.sass` from the theme into your own site.
The location must be exactly the same as in the theme, so put it in `YourFancySite/assets/sass/`.
You can then edit the file to customize the theme color in your site without having to modify the theme itself.
### How can I change the address bar color on mobile devices?
Just put the following line in the `[params]` section in your `hugo.toml` file (and of course change the color):
```toml
metaThemeColor = "#123456"
```
### How do I add custom styles, scripts, meta tags e.t.c
Use hooks. Ideally, you should not override the them directly.
Instead, you should duplicate [these files](https://github.com/onweru/compose/tree/master/layouts/partials/hooks) at the root of you site directory.
1. layouts/partials/hooks/head.html
2. layouts/partials/hooks/scripts.html
The contents of the first file will be attached just before the `</head>` tag.
The contents of the second file will be attached just before the `</body>` tag.
Alternatively, if you want to use the `hugo.toml` to track your custom styles or scripts, declare them as slices under `[params]` like so:
```toml
...
[params]
customCSS = [styleURL1, styleURL2 ...]
customJS = [scriptURL1, scriptURL2 ... ]
...
```
### I want to add custom SASS or JS
Add custom SASS and JS via [this custom SASS file](https://github.com/onweru/compose/blob/master/assets/sass/_custom.sass) and [this custom JavaScript file](https://github.com/onweru/compose/hugo-compose/blob/master/assets/js/custom.js).
### How to change site favicon
Your favicons should be stored inside `static/favicons` directory.
Here are some of the favicon files that you should have in that folder:
```
.
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
└── site.webmanifest
```
We recommend you consider using this [tool](https://realfavicongenerator.net/) while generating your favicons.

28
exampleSite/content/docs/compose/github-actions.md Normal file
View file

@ -0,0 +1,28 @@
+++
description = "Use github actions with compose theme"
title = "Leverage Github actions"
weight = 11
+++
This theme ships with 2 github actions inside the exampleSite folder:
1. AWS CI
2. Algolia CI
## AWS CI
This helps you to autodeploy your hugo website from github to an AWS s3 bucket. Set the secrets in the action accordingly and voila.
## Algolia CI
This action will automatically update your algolia search index. No extra npm manual setup will be needed.
These actions are customizable to fire off under your specified set of circumstances.
By default, the actions will be off, so be sure to turn them on, and set the github actions secrets appropriately.
```shell
name: Update Algolia Search Index
off: # change to `on:` to turn on
```

103
exampleSite/content/docs/compose/graphs-charts-tables.md Normal file
View file

@ -0,0 +1,103 @@
+++
title = "Graphs, charts & dynamic tables"
weight = 9
[dataset1]
fileLink = "content/projects.csv" # path to where csv is stored
colors = ["#ef7f1a", "#627c62", "#11819b", "#4e1154"] # chart colors
columnTitles = ["Section", "Status", "Author"] # optional if not table will be displayed from dataset
baseChartOn = 3 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
title = "Projects"
[dataset2]
fileLink = "content/themes.csv" # path to where csv is stored
colors = ["#ef7f1a", "#627c62", "#11819b", "#4e1154"] # chart colors
columnTitles = ["Theme", "Latest Version", "Repo Owner"] # Optional if no table will be displayed from dataset
baseChartOn = 2 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
title = "Hugo Themes"
+++
Using [chart js library](https://www.chartjs.org/) you can display data you have stored in a `csv` file as a pie chart, bar graph or doughnut chart.
At this point if you want to display data from a json or yaml file, you would need to [convert it into csv](http://convertcsv.com/json-to-csv.htm) first. Else the template will error out.
Once you have a csv file, you display the charts as follows:
#### Show a pie, doughnut & bar chart at once
Firstly define the data you want to display from the front matter:
```markdown
# from front matter
...
[dataset1] # this key will in the chart shortcode
fileLink = "content/projects.csv" # path to where csv is stored
colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
columnTitles = ["Section", "Status", "Author"]
charts = ["bar", "doughnut", "pie", "table"]
baseChartOn = 3 # number of column the chart(s) and graph should be drawn from
piechart = true
doughnutchart = true
bargraph = true
title = "Projects"
table = true # show table listing the chart data
// from page content
...
{{</* grid " mt-2" */>}}
{{</* chart "dataset1" */>}}
{{</* /grid */>}}
...
```
{{< grid "3 mt-2 mb-2" >}}
{{< chart "dataset1" "pie,doughnut,bar" >}}
{{< /grid >}}
#### __Show Table at once__
{{< block >}}
{{< chart "dataset1" "table" >}}
{{< /block >}}
Firstly define the data you want to display from the front matter:
```toml
# from page front matter
[dataset2]
fileLink = "content/themes.csv" # path to where csv is stored # this key will in the chart shortcode
colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
columnTitles = ["Theme", "Latest Version", "Owner"]
title = "Hugo Themes"
baseChartOn = 2 # number of column the chart(s) and graph should be drawn from
piechart = false
doughnutchart = true
bargraph = true
table = false # show table listing the chart data
```
#### Show only a pie and a doughnut chart
```markdown
// from page content
...
{{</* grid " mt-2" */>}}
{{</* chart "dataset2" */>}}
{{</* /grid */>}}
...
```
{{< grid "3 mt-2 mb-2" >}}
{{< chart "dataset2" "pie,doughnut" "1" >}}
{{< /grid >}}
#### Show table with filter
{{< grid "3" >}}
{{< chart "dataset2" "table" >}}
{{< /grid >}}
#### Show table only
{{< grid "3" >}}
{{< chart "dataset2" "table,noFilter" >}}
{{< /grid >}}

77
exampleSite/content/docs/compose/install-theme.md Executable file
View file

@ -0,0 +1,77 @@
+++
title = "Install theme"
weight = 2
description = """
This page tells you how to get started with the Compose theme.
"""
+++
### Prerequisites
First ensure that you have hugo installed.
You need a [recent **extended** version](https://github.com/gohugoio/hugo/releases) (we recommend version 0.61 or later) of [Hugo](https://gohugo.io/) to do local builds and previews of sites (like this one) that uses this theme.
If you install from the release page, make sure to get the `extended` Hugo version, which supports [sass](https://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html); you may need to scroll down the list of releases to see it.
For comprehensive Hugo documentation, see [gohugo.io](https://gohugo.io/).
## Run your site with compose theme
You could go with the options right below.
### Option 1 (my favorite)
This option enables you to load compose theme as a hugo module. First things first, ensure you have `go` binary [installed on your machine](https://golang.org/doc/install).
```shell
$ git clone https://github.com/onweru/compose/
cd compose/exampleSite/
hugo server
```
To pull in theme updates, run `hugo mod get -u ./...` from the theme folder. If unsure, [learn how to update hugo modules](https://gohugo.io/hugo-modules/use-modules/#update-modules)
{{< tip "warning" >}}
The exampleSite uses the theme as a hugo module by default.
If you choose __Option 2__ or __Option 3__ below, ensure you edit [these lines in the hugo.toml file](https://github.com/onweru/compose/blob/b3e30e0816621223224897edc45eeeabd0d9cd16/exampleSite/hugo.toml#L4-L7) as advised on the comments. Else, you will not be able to pull theme updates.
{{< /tip >}}
### Option 2 (recommended)
Generate a new Hugo site and add this theme as a Git submodule inside your themes folder:
```bash
hugo new site yourSiteName
cd yourSiteName
git init
git submodule add https://github.com/onweru/compose/ themes/compose
cp -a themes/compose/exampleSite/* .
git commit -m "setup compose theme"
```
Then run
```bash
hugo server
```
Hurray!
### Option 3 (Great for testing quickly)
You can run your site directly from the `exampleSite`. To do so, use the following commands:
```bash
git clone https://github.com/onweru/compose/
cd compose/exampleSite/
hugo server --themesDir ../..
```
{{< tip >}}
Although, option 3 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.
{{< /tip >}}
Once set, jump over to the [hugo.toml](https://github.com/onweru/compose/blob/afdf1cd76408aeac11547a6abd51bdc5138a295f/exampleSite/hugo.toml#L4-L7) file and start configuring your site.

668
exampleSite/content/docs/compose/mermaid.md Normal file
View file

@ -0,0 +1,668 @@
+++
title = "Mermaid"
weight = 8
description = "Generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown."
+++
[Mermaid](https://mermaidjs.github.io/) is library that helps you generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown.
With compose theme, you can use mermaid using a custom shortcode as follows:
### Sequence Diagrams
**Snippet**
```tpl
{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{{< /mermaid >}}
### Flow Charts
**Snippet**
```tpl
{{</* mermaid */>}}
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
{{< /mermaid >}}
### Graphs
**Snippet**
```tpl
{{</* mermaid */>}}
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
{{< /mermaid >}}
**Snippet**
```tpl
{{</* mermaid */>}}
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
### Class Diagram
{{< mermaid >}}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
{{< /mermaid >}}
### State Diagram
{{< mermaid >}}
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
{{< /mermaid >}}
{{< mermaid >}}
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
{{< /mermaid >}}
### Relationship Diagrams
**Snippet**
```tpl
{{</* mermaid */>}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}
### User Journey
**Snippet**
```tpl
{{</* mermaid */>}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{< /mermaid >}}
### Gantt
**Snippet**
```tpl
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
{{< /mermaid >}}
### Pie Chart
```tpl
{{</* mermaid */>}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{{< /mermaid >}}
### Mindmap
__Snippet__
```tpl
{{</* mermaid */>}}
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
{{</* /mermaid */>}}
```
__Result__
{{< mermaid >}}
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
{{< /mermaid >}}
### Timeline
__Snippet I__
```tpl
{{</* mermaid */>}}
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2006 : Twitter
{{</* /mermaid */>}}
```
__Result I__
{{< mermaid >}}
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2006 : Twitter
{{< /mermaid >}}
__Snippet II__
```tpl
{{</* mermaid */>}}
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Buttet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Buttet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
{{</* /mermaid */>}}
```
__Result II__
{{< mermaid >}}
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Buttet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Buttet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
{{< /mermaid >}}
### Gitgraph
__Snippet__
```tpl
{{</* mermaid */>}}
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{</* /mermaid */>}}
```
__Result__
{{< mermaid >}}
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /mermaid >}}
### Requirement Diagram
__Snippet__
```tpl
{{</* mermaid */>}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{</* /mermaid */>}}
```
__Result__
{{< mermaid >}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{< /mermaid >}}
### C4C Diagram
```tpl
{{</* mermaid */>}}
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
{{</* /mermaid */>}}
```
__Result__
{{< mermaid >}}
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
{{< /mermaid >}}

34
exampleSite/content/docs/compose/organize-content.md Normal file
View file

@ -0,0 +1,34 @@
+++
title = "Content organization"
weight = 4
+++
This theme is primarily meant for documentation.
#### Documentation
By default, the theme will look for all your documentation content within the `docs` directory.
However, if you would like to have your docs content across multiple directories, please list those directories inside `config/_default/params.toml` under `docSections` like so:
```
...
docSections = ["docs", "tutorials"]
...
```
Unlike other regular pages, the documentation pages will have a left sidebar. This sidebar will list links to all the pages in the documentation pages. Beneath each link, there will be a collapsible list of __table of contents'__ links. These nested lists will unfold automatically on the active/current page.
#### Home Page
At the root level there's an `_index.md` page which is the homepage. Feel free to edit it as you like.
#### Other pages
You can also add as many regular pages as you like e.g `about.md`, `contact.md`...
Take advantage of [shortcodes](../shortcodes) to customize the layouts of these pages and any other.
#### Does this theme support blogging function?
Currently, no.

68
exampleSite/content/docs/compose/search.md Normal file
View file

@ -0,0 +1,68 @@
+++
description = ""
title = "Search Function"
weight = 7
+++
Firstly, ensure you have these lines inside your hugo.toml file
```toml
[outputs]
home = ["HTML", "RSS","JSON"]
```
Compose implements [Fuse js](https://fusejs.io/) or [Algolia](https://www.algolia.com/doc/rest-api/search/) to enable search functionality. By default Fuse is applied. Algolia can be enabled by adding this settings to `config/_default/params.toml` file
```toml
# search
[search]
on = true
global = false
[search.algolia]
enable = false # if false search will default to fusejs
id = "Q40WQQX84U" # Application ID
index = "compose" # Index name
key = "da87401a458102ec6bbd6cc5e5cf8d95" # Search-Only API Key
```
Both search engines will display results using the same UI. By choosing the default (.ie fuse js), you will be opting for local search. This way, no additional setup is needed.
Algolia will require you to build and host your index. For those using Github, this theme ships with an [algolia github action](/docs/compose/github-actions/#algolia-ci).
By default, search will return results from the current content section. Searches from the top level section e.g the homepage, will return global results. This way, the results are scoped. You can override this behaviour using this setting
```toml
...
[search]
...
global = false # turn to `true` to enable global search
...
```
At the time of this writing, search on these theme takes either of this forms:
### 1. Passive search
This occurs only when the user loads the search page i.e `/search/`. They can directly navigate to that url. Alternatively, the user can type you search query on the search field and click enter. They will be redirected to the search page which will contain matched results if any.
### 2. Live search
This behaviour will be obvious as the user types a search query on the search field. All `valid search queries`, will yield a list of `quick links` or a simple `no matches found`. Else, the user will be prompted to continue typing.
> Please note that the results under quick links will be a truncated list of the most relevant results. Only a maximum of 8 items will be returned. This number is pragmatic at best if not arbitrary. On the search page, the number is set to 12.
Note that live search on the search page will behave differently than on the other pages. Nonetheles, the pages apply the same live search principle.
> Hitting enter while typing on the search page will be moot as that page’s content will live update as you type in the search word / phrase.
### Customize search feedback labels
Use the `i18n` files to do so.
### What is a valid search query
A valid search query must be long enough. If the search query can be cast as a float, then it only need contain one or more characters.
Else the search query must be at least 2 characters long.
<!-- This behaviour will change. -->

56
exampleSite/content/docs/compose/shortcodes-example.md Normal file
View file

@ -0,0 +1,56 @@
+++
title = "Shortcodes Applied"
weight = 7
description = "This is how the shortcodes would look like in action"
draft = true
+++
### Blocks, columns & buttons
```sh
{{</* block "grid-2" */>}}
{{</* column */>}}
#### Coumn 1
Lorem ipsum dolor sit amet,
...
{{</* button "https://github.com/onweru/compose" "Download Theme" */>}}
{{</* /column */>}}
{{</* column */>}}
<!-- generates 👇 -->
```
{{< block "grid-2" >}}
{{< column >}}
#### Coumn 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{< button "https://github.com/onweru/compose" "Download Theme" >}}
{{< /column >}}
{{< column >}}
#### Coumn 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{< button "docs/" "Read the Docs" >}}
{{< /column >}}
{{< /block >}}

244
exampleSite/content/docs/compose/shortcodes.md Normal file
View file

@ -0,0 +1,244 @@
+++
description = "Use hugo shortcodes to quickly compose your documentation pages."
title = "Shortcodes"
weight = 5
+++
Instead of writing all your site pages from scratch, Hugo lets you define and use [shortcodes](https://gohugo.io/content-management/shortcodes/).
Why shortcodes? While markdown is sufficient to produce simple pages, it's insufficient where complex page structures are needed. Thusly, whenever we need special styling, shortcodes compliment the shortcomings of markdown.
This way, you can side step complex html and css boilerplate in your content files.
Sometimes, the shortcode will wrap content, sometimes it won't. When content is wrapped, a closing shortcode tag is needed. Please see the link I provided above and the markdown files for examples. You'll get the gist pretty quickly.
I've setup the following shortcodes:
### Block
Takes positional modifiers
**Example**
```markdown
...
{{</* block "modifiers" */>}}
<!-- Nest columns or content -->
{{</* /block */>}}
...
```
### Column
It takes positional parameters
**Example**
```markdown
{{</* column "mt-2 mb-2" */>}}
<!-- applied margin top and margin bottom modifiers -->
{{</* /column */>}}
```
### Youtube Video
This allows you to embed a youtube video in you content. You would achieve that using a positional parameter (needs no name )parameter, like so:
**Syntax**
```markdown
{{</* youtube "25QyCxVkXwQ" */>}}
<!-- Use the youtube video id -->
```
**Result**
{{< youtube "25QyCxVkXwQ" >}}
**OR**
**Syntax**
```markdown
<!-- or use full url -->
{{</* youtube "https://www.youtube.com/watch?v=MmG2ah5Df4g" */>}}
```
**Result**
{{< youtube "https://www.youtube.com/watch?v=MmG2ah5Df4g" >}}
#### Lite YouTube
The `liteyoutube` shortcode supports three parameters:
| PARAMETER | PURPOSE | OPTIONAL |
| :--- | :--- | :--- |
| videoid | YouTube video identifier | no |
| params | YouTube parameters | yes |
| img | Background image from static/images | yes |
##### With no Parameters
This example shows only supplying the required `videoid` (without a named parameter). You can also add the `img` and `params` parameters (in that order) without using named parameters.
```markdown
{{</* liteyoutube "MmG2ah5Df4g" */>}}
```
{{< liteyoutube "MmG2ah5Df4g" >}}
##### With `videoid` and `params`
The params string instructs YouTube to play only 20 seconds of the video starting at ten seconds and ending at 30 seconds. It also disables the player controls and enables the YouTube `JSAPI`.
```markdown
{{</* liteyoutube videoid="MmG2ah5Df4g" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" */>}}
```
{{< liteyoutube videoid="MmG2ah5Df4g" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" >}}
##### With All Three Positional Parameters
```markdown
{{</* liteyoutube "MmG2ah5Df4g" "painting.jpg" "controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" */>}}
```
{{< liteyoutube "MmG2ah5Df4g" "painting.jpg" "controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" >}}
{{< tip >}}
You can browse the full list of YouTube parameters [here](https://developers.google.com/youtube/player_parameters#Parameters)
{{< /tip >}}
### Button
This adds a styled link (styled like a button). It takes two no-optional parameters:
| PARAMETER | PURPOSE | OPTIONAL |
| :--- | :--- | :--- |
| label | button text | no |
| url | button link | no |
| modifier | styling classes | yes |
**Example**
```markdown
{{</* button "/" "doe nu mee" */>}}
```
### Picture
You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter
Store these images in the `static/images` directory.
**Syntax**
```markdown
...
{{</* picture "lightModeImage.png" "darkModeImage.png" "Image alt text" */>}}
...
```
**Result**
{{< picture "compose.svg" "compose-light.svg" "Compose Logo" >}}
### Gallery
Include inline galleries within your articles. These galleries can contain `N` number of images. It takes 2 positional parameters.
The 1st parameter is required. It's a _comma-separated list_ (`,`) of your images' paths.
The 2nd parameter is optional. It's a _double-collon-separated list_ (`::`) of your images' alt/description/captions text. It's always a good SEO practice to include alt text for your images.
**Syntax**
```markdown
...
{{</* gallery "images/painting.jpg,images/scribble.jpg,images/painting.jpg" "Gallery Image 1::gallery image 2::gallery image 1 copy" */>}}
...
```
{{< tip >}}
> For legibility, you may include a space after the delimiters `,` & `::`
> {{< /tip >}}
**Result**
{{< gallery "images/painting.jpg,images/scribble.jpg,images/painting.jpg" "Gallery Image 1::gallery image 2::gallery image 1 copy" >}}
### Tab(s)
Use this short if you want to publish a multiple tabs component.
**Syntax**
```markdown
{{</* tabs "tabsId" */>}}
{{</* tab "First" */>}}
What could such a tab include?
{{</* /tab >}}
{{</* tab "Second" */>}}
- Some *bulletpoints*
- and more…
- …
{{</* /tab >}}
{{</* tab "Third" */>}}
> great wise words?
{{</* /tab */>}}
{{</* /tabs */>}}
```
**Result**
{{< tabs "tabsId" >}}
{{< tab "First" >}}
What could such a tab include?
{{< /tab >}}
{{< tab "Second" >}}
- Some *bulletpoints*
- and more…
- …
{{< /tab >}}
{{< tab "Third" >}}
> great wise words?
{{< /tab >}}
{{< /tabs >}}
### Tip
Use this short if you want to publish informational tooltips that look like:
This tooltips may take either of the following forms:
**Syntax**
```markdown
{{</* tip */>}}
Something of __interest__ you want to highlight
{{</* /tip */>}}
```
**Result**
{{< tip >}}
Something of **interest** you want to highlight
{{< /tip >}}
**OR**
**Syntax**
```markdown
{{</* tip "warning" */>}}
Something of __interest__ the user should be careful about
{{</* /tip */>}}
```
**Result**
{{< tip "warning" >}}
Something of **interest** the user should be careful about
{{< /tip >}}

56
exampleSite/content/docs/compose/use-tina-cms.md Normal file
View file

@ -0,0 +1,56 @@
+++
title = "Use Tina.io CMS"
description = ""
weight = 3
+++
Do you prefer managing your site using a CMS? Or would you like to make it easier for someone (a non-techie, perhaps) in your team to make edits easily? If interested, follow along. Else, skip to the [next section](../organize-content/)
Let's sync your site with Tina CMS.
## Prerequisites !!
Obviously you ought to have __a github account__. This is where your website source will live. Basically, Tina will read from github and write (commit) to your github repo.
{{< tip "warning" >}}
Gitlab or bitbucket will work too. Just check their [implementation here](https://Tina.io/docs/git-sync/gitlab/). Happy fishing.
{{< /tip >}}
### Requirement 1 : A Tina.io account
Jump over to [Tina.io](https://tina.io/) and sign up for an account. Consider signing up using your github account. That way, you don't have to deal with passwords.
### Requirement 2: A Netlify account _(optional)_
If you intend to host with something other than Netlify _e.g github pages_, please scroll on. Hosting with Netlify is a lot of fun though; I highly recommend it.
### Step 1 : Fork or Clone Compose theme
First we will fork [this theme's](https://github.com/onweru/compose) template.
### Step 2 : Add your repository in Tina CMS
{{< tip >}}
The exampleSite already comes with prefilled placeholder Tina settings. If you set up your site using [option 2](../install-theme/#option-2-recommended)
{{< /tip >}}
Edit `./static/tina/config.js` and replace tina CMS tokens with values from your own Tina account
```json
...
clientId: "6ff9830b-b18a-4d21-b38c-cae1679e335f", // replace
token: "2954980a0db18868974dc57a66be9ecdfe6f336b", // replace
...
search: {
...
tina: {
indexerToken: "977c145439dda036080dd7a33478d2ba385ab5af", // replace
stopwordLanguages: ["deu", "eng", "fra", "ita", "spa", "nld"] // consider adding or removing languages https://github.com/fergiemcdowall/stopword#language-code
},
...
}
...
```
Go to your [Tina](https://tina.io/) account

12
exampleSite/content/projects.csv Normal file
View file

@ -0,0 +1,12 @@
project 6,alpha,weru
project 4,beta,dan
project 4,candidate,dahl
project y,abandoned,weru
project 1,alpha,weru
project 4,beta,ryan
project 4,candidate,dan
project y,abandoned,weru
project 11,alpha,dahl
project 4,beta,dan
project 4,candidate,dan
project A,abandoned,weru
1 project 6 alpha weru
2 project 4 beta dan
3 project 4 candidate dahl
4 project y abandoned weru
5 project 1 alpha weru
6 project 4 beta ryan
7 project 4 candidate dan
8 project y abandoned weru
9 project 11 alpha dahl
10 project 4 beta dan
11 project 4 candidate dan
12 project A abandoned weru

5
exampleSite/content/search.md Normal file
View file

@ -0,0 +1,5 @@
+++
title = "Search"
searchPage = true
type = "search"
+++

4
exampleSite/content/themes.csv Normal file
View file

@ -0,0 +1,4 @@
clarity,V.1,chipzoller
compose,V.1,weru
swift,V.2,weru
newsroom,V.1,weru
1 clarity V.1 chipzoller
2 compose V.1 weru
3 swift V.2 weru
4 newsroom V.1 weru

15
exampleSite/content/tutorials/_index.md Normal file
View file

@ -0,0 +1,15 @@
+++
title = "Tutorials' Docs"
weight = 1
+++
Just an example of an additional docs folder.
Surprised that it doesn't have a left sidebar menu? Worry not; just [follow this instructions to enable it](../docs/compose/organize-content/#documentation).
<!-- That content is better than dummy lorem ipsum 2) That content serves a good real-world demo for this theme 3) Publish more structured docs for each theme which are better than long blocky READMEs -->
{{< button "./example" "Tutorials" "mb-1" >}}
{{< button "../docs/" "Back to docs" >}}

8
exampleSite/content/tutorials/example/_index.md Normal file
View file

@ -0,0 +1,8 @@
+++
title = "Compose Docs"
weight = 1
+++
Welcome to the Compose theme user guide! This guide shows you how to get started creating technical documentation sites using Compose, including site customization and how to use Compose's blocks and templates.
{{< button "../../docs/compose/install-theme/" "Get started now" >}}

375
exampleSite/content/tutorials/example/mermaid.md Normal file
View file

@ -0,0 +1,375 @@
+++
title = "Mermaid"
weight = 8
description = "Generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown."
+++
[Mermaid](https://mermaidjs.github.io/) is library that helps you generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown.
With compose theme, you can use mermaid using a custom shortcode as follows:
### Sequence Diagrams
**Syntax**
```tpl
{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{{< /mermaid >}}
### Flow Charts
**Syntax**
```tpl
{{</* mermaid */>}}
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
{{< /mermaid >}}
### Graphs
**Syntax**
```tpl
{{</* mermaid */>}}
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
{{< /mermaid >}}
**Syntax**
```tpl
{{</* mermaid */>}}
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
### Class Diagram
{{< mermaid >}}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
{{< /mermaid >}}
### State Diagram
{{< mermaid >}}
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
{{< /mermaid >}}
{{< mermaid >}}
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
{{< /mermaid >}}
### Relationship Diagrams
**Syntax**
```tpl
{{</* mermaid */>}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}
### User Journey
**Syntax**
```tpl
{{</* mermaid */>}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
{{< /mermaid >}}
### Gantt
**Syntax**
```tpl
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
{{< /mermaid >}}
### Pie Chart
```tpl
{{</* mermaid */>}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{{</* /mermaid */>}}
```
**Result**
{{< mermaid >}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{{< /mermaid >}}

0
exampleSite/dist/.gitkeep vendored Normal file
View file

5
exampleSite/go.mod Normal file
View file

@ -0,0 +1,5 @@
module compose-exampleSite
go 1.19
require github.com/onweru/compose v0.0.0-20240711165024-0ea6ac76134e // indirect

30
exampleSite/go.sum Normal file
View file

@ -0,0 +1,30 @@
github.com/onweru/compose v0.0.0-20230709163331-af3e133abf10 h1:6+OU3YpznL1bAy1s4B9KhEteRN+qo5T9vgYTWuGHpLw=
github.com/onweru/compose v0.0.0-20230709163331-af3e133abf10/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230709170553-cdf6b3d268e3 h1:LQ9aw508QrowSWfr8m7Q43AelhGTaNhX+obnkCWefKg=
github.com/onweru/compose v0.0.0-20230709170553-cdf6b3d268e3/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230717085020-14357bb3e167 h1:btK2EwB8mRaebaNkvzsEjnxQt6dI9corw9n5kyPQoMk=
github.com/onweru/compose v0.0.0-20230717085020-14357bb3e167/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230729163245-27b84dc22eb8 h1:aVItqjRfGwyOZHloHxVY6kEjjR+e8AQVXlpWiQtO0dw=
github.com/onweru/compose v0.0.0-20230729163245-27b84dc22eb8/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230730204557-43a58bce3d5a h1:o/x7EfZKZquisgw30cKagraXVccTNydxPGQYV9LadZY=
github.com/onweru/compose v0.0.0-20230730204557-43a58bce3d5a/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230730204838-eb9964865cd0 h1:xIK8kxui2ulVqJRO9tjbGuhNPxr1QlmmnswX8Tcs+Js=
github.com/onweru/compose v0.0.0-20230730204838-eb9964865cd0/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230817095514-20a7d0ddbfcb h1:azper7pbfQ92zfd8rV7HBjhF8AsZbZmGqxFqqTYEef8=
github.com/onweru/compose v0.0.0-20230817095514-20a7d0ddbfcb/go.mod h1:tf1kQIBUcwJ/3mRFU5eiMrMvsDScVTK2IEFsZE3hZOc=
github.com/onweru/compose v0.0.0-20230823103345-61fa78130dec h1:8iFU5Cf76/ww5+gLyyRrI7dpJpcKmnpBXtraIIq4AT0=
github.com/onweru/compose v0.0.0-20230823103345-61fa78130dec/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240111174942-cdf2ef5f4da1 h1:evqwOllx6XwfmYG2NKGFmfloNQXazxOCPir914Myjpk=
github.com/onweru/compose v0.0.0-20240111174942-cdf2ef5f4da1/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240111175353-5392252575a2 h1:jqoBc1FPDJNxRrrieLlRvyKCumTLa5XkehgXz3yBdvE=
github.com/onweru/compose v0.0.0-20240111175353-5392252575a2/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240111181611-61cf3194699c h1:4SSQgoXXBQS9iZ5IQIGLxXOExaeODx5Hg0+fDzcsLB0=
github.com/onweru/compose v0.0.0-20240111181611-61cf3194699c/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240113175534-20909d29d9a8 h1:g9eo2danSDAQ8wD/HDLWqFt7s01YaAGAVJZhN4ODBs8=
github.com/onweru/compose v0.0.0-20240113175534-20909d29d9a8/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240114134437-91252edd0478 h1:n5wqTvZ1RLOHHwJoHal5WmhSF/gqhxaDr/w1+wW9Dsw=
github.com/onweru/compose v0.0.0-20240114134437-91252edd0478/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240114135539-a7a9df6d34b9 h1:pRRosz/W2ZKxruZ5fTYxN+BAFIybNg+V8IhGMVdZfbE=
github.com/onweru/compose v0.0.0-20240114135539-a7a9df6d34b9/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=
github.com/onweru/compose v0.0.0-20240711165024-0ea6ac76134e h1:ljas9s4I9bPPkSEkk7CXkDitWxrHUmIlrfLmojpHCcI=
github.com/onweru/compose v0.0.0-20240711165024-0ea6ac76134e/go.mod h1:2eSBLsKzvKf3r4/vHiKdakIBqDtWACDAqAD7tRdt00o=

13
exampleSite/hugo.toml Normal file
View file

@ -0,0 +1,13 @@
baseURL = "https://example.com/"
title = "Compose Docs"
enableRobotsTXT = true
# this example loads the theme as hugo module
# comment out line below, and uncomment the line after it if you prefer to load the theme normally
theme = ["github.com/onweru/compose"] # edit this if you'ld rather use a fork of this repo
# theme = "compose"
enableGitInfo = true
# disableKinds = ["taxonomy", "taxonomyTerm"]
[outputs]
home = ["HTML", "RSS","JSON"]

39
exampleSite/netlify.toml Normal file
View file

@ -0,0 +1,39 @@
[build]
publish = "public"
#command = "hugo --gc --minify"
command = "hugo --gc --minify --baseURL https://composedocs.netlify.app/"
[context.production.environment]
HUGO_VERSION = "0.128.2"
GO_VERSION = "1.21.0"
NODE_VERSION = "20.5.1"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[context.split1]
command = "hugo --gc --minify --enableGitInfo"
[context.split1.environment]
HUGO_VERSION = "0.128.2"
GO_VERSION = "1.21.0"
NODE_VERSION = "20.5.1"
HUGO_ENV = "production"
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
[context.deploy-preview.environment]
HUGO_VERSION = "0.128.2"
GO_VERSION = "1.21.0"
NODE_VERSION = "20.5.1"
[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
[context.branch-deploy.environment]
HUGO_VERSION = "0.128.2"
GO_VERSION = "1.21.0"
NODE_VERSION = "20.5.1"
[context.next.environment]
HUGO_ENABLEGITINFO = "true"

18
exampleSite/package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "examplesite",
"version": "1.0.0",
"description": "This guide covers the necessary bits. As the project evolves, it will only become more comprehensive",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@tinacms/cli": "^1.5.31",
"tinacms": "^1.5.22",
"@tinacms/auth": "^1.0.3",
"next-tinacms-cloudinary": "^4.3.0"
}
}

3
exampleSite/resources/_gen/assets/sass/main.sass_ae9eb86df8175869edaecf50caadd93b.content Normal file
View file

File diff suppressed because one or more lines are too long

1
exampleSite/resources/_gen/assets/sass/main.sass_ae9eb86df8175869edaecf50caadd93b.json Normal file
View file

@ -0,0 +1 @@
{"Target":"css/styles.8d8085f7db497b3f3b3071490f89d4ce22990b40da7e429db3a4bfbf559eb93c93a40c627e51f10b618139145d468ecfdccb9425643cc38726adff2ceaf5ad10.css","MediaType":"text/css","Data":{"Integrity":"sha512-jYCF99tJez87MHFJD4nUziKZC0DafkKds6S/v1WeuTyTpAxiflHxC2GBORRdRo7P3MuUJWQ8w4cmrf8s6vWtEA=="}}

3
exampleSite/resources/_gen/assets/sass/sass/main.sass_ae9eb86df8175869edaecf50caadd93b.content Normal file
View file

File diff suppressed because one or more lines are too long

1
exampleSite/resources/_gen/assets/sass/sass/main.sass_ae9eb86df8175869edaecf50caadd93b.json Normal file
View file

@ -0,0 +1 @@
{"Target":"css/styles.5403a82853549c7143980076de5a74b1acfa655a8f3f490771cdeb6b1bb85c19fc018d76c22b67654b39bb14a35e359f243b77c63d68aa963df466a37735b351.css","MediaType":"text/css","Data":{"Integrity":"sha512-VAOoKFNUnHFDmAB23lp0saz6ZVqPP0kHcc3raxu4XBn8AY12witnZUs5uxSjXjWfJDt3xj1oqpY99GajdzWzUQ=="}}

3
exampleSite/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.content Normal file
View file

File diff suppressed because one or more lines are too long

1
exampleSite/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json Normal file
View file

@ -0,0 +1 @@
{"Target":"css/styles.cd62b2f2422cc4a7954bb12c250bb5a506c534f9f0e02d12144999181257b8046df4a087b684fbe4fa2e60fc50b054922f83d5cb594351423c6425a8cb80434c.css","MediaType":"text/css","Data":{"Integrity":"sha512-zWKy8kIsxKeVS7EsJQu1pQbFNPnw4C0SFEmZGBJXuARt9KCHtoT75PouYPxQsFSSL4PVy1lDUUI8ZCWoy4BDTA=="}}

2
exampleSite/static/admin/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
index.html
assets/

3
exampleSite/static/images/GitHubMarkDark.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#FFF"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 964 B

3
exampleSite/static/images/GitHubMarkLight.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 967 B

BIN
exampleSite/static/images/artist.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
exampleSite/static/images/boy.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
exampleSite/static/images/clarity/article-toc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
exampleSite/static/images/clarity/image-figure.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
exampleSite/static/images/clarity/image-inline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
exampleSite/static/images/clarity/screenshot-darkmode.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
exampleSite/static/images/clarity/screenshot-mobile-darkmode.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
exampleSite/static/images/clarity/screenshot-mobile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
exampleSite/static/images/clarity/screenshot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
exampleSite/static/images/clarity/syntax-block.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
exampleSite/static/images/clarity/tags.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
exampleSite/static/images/clarity/tn-darkmode.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
exampleSite/static/images/clarity/tn.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

10
exampleSite/static/images/compose-light.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

10
exampleSite/static/images/compose.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
exampleSite/static/images/frustrated.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 218 KiB

Some files were not shown because too many files have changed in this diff Show more