MuShop Docs

Project documentation built with Hugo and customized UIkit theme.

Setup

Install documentation theme:
```
make theme
```
Install hugo CLI:
```
brew install hugo
```

Development

In general, the content management follows all the standard features of Hugo.

Start hugo server

make up

Or with hugo:

hugo server --buildDrafts

Add Content

Create content as follows:
- Create a new section: hugo new <section>/_index.md
- Create a new lab topic: hugo new labs/<topic>/_index.md
- Create a new lab page: hugo new labs/<topic>/<page>.md

Edit front matter

---
title: "My New Content"
description: "short description of content"
draft: false
hidden: false
weight: 20 # ordering by weight
keywords:
  - one
  - two
tags:
  - advanced
  - oke
###### Custom ######
# breadcrumbs
disableBreadcrumb: false
# footer navigation
disablePrevNext: false
disablePrev: false
disableNext: false
# section options
showChildren: false # lists child pages of the section/_index.md
orderedChildren: false # use ordered list for child pages
---

Features

The Hugo documentation theme is custom-built with UIkit components (just like MuShop storefront).

Code Settings

Helm: Displays code blocks specific to helm version

  ```shell--helm2
  helm install ./mushop --name mymushop
  ```

  ```shell--helm3
  helm upgrade --install mymushop ./mushop
  ```

OS: Displays code blocks specific to os

  ```shell--linux-macos
  export MUSHOP_NAMESPACE=mushop
  ```

  ```shell--win
  set MUSHOP_NAMESPACE=mushop
  ```

Shortcode Components

Add panache to the documentation using these custom shortcodes directly within markdown documents.

Alert

Displays an alert style block. Specify icon from the UIkit icon library

<div uk-alert class="uk-alert-primary uk-grid uk-grid-collapse uk-flex-nowrap "><span uk-icon="icon: info; ratio: 1.2" class="uk-margin-small-right uk-flex-none"></span><div class="uk-width-expand">
    
Alert content `processed` as **markdown**
</div></div>

Alert content processed as markdown

Options
`style`	`default
`icon`	Icon from library
`class`	Additional classes

Aspect Ratio

Fix the enclosed content to an aspect ratio.

<div class="rw-aspect rw-aspect-2-1 ">
<div class="uk-background-muted uk-padding-small" >
  <p>Content with aspect ratio of <code>2-1</code></p>

</div>
</div>

Content with aspect ratio of 2-1

Options
`ratio`	`1-1
`class`	Additional classes

Card

Display content as cards - usually in a grid

<div uk-grid="" class="uk-grid uk-grid-small  uk-child-width-1-1 uk-child-width-1-2@m  "><div class="">
  <div class="uk-card uk-card-body uk-card-hover uk-card-primary uk-card- ">
    <h3 class="uk-card-title">Primary</h3><p>Card body</p>
</div>
</div>
<div class="">
  <div class="uk-card uk-card-body  uk-card-secondary uk-card- ">
    <h3 class="uk-card-title">Secondary</h3><p>Card body</p>
</div>
</div></div>

Primary

Card body

Secondary

Card body

Options
`style`	`default
`size`	`small
`hover`	Add hover styling
`title`	Card title
`width`	Width ratio accodring to width
`class`	Additional classes

Grid

Add a grid of inner contents using grid and flex

<ul uk-grid="" class="uk-grid uk-grid-small  uk-child-width-1-1 uk-child-width-1-3@m  ">
<li><strong>Example</strong></li>
<li>Item one</li>
<li>Item two</li>
</ul>

Example
Item one
Item two

Options
`gutter`	`small
`class`	Any classes to add to the grid wrapper
`col`	Child element column width
`breakpoint`	`(s
`x`	horizontal flex alignment see here
`y`	vertical flex alignment see here
`options`	See docs

Icon

Add any icon from the library

Options
`icon`	Icon name
`ratio`	Size proportion

Overflow

Applies automatic overflow to the contents. Useful with aspect ratio and table contents

<div class="uk-overflow-auto " >
  
Something very tall or wide

</div>

Something very wide

Arguments
`[class]`	CSS class string to apply to wrapper `<div>` element
`[attr]`	Attributes to apply to wrapper `<div>` element

Slideshow

Display list items as a slideshow

<div uk-slideshow="animation: slide; finite: true">
  <div class="uk-position-relative uk-visible-toggle " tabindex="-1">
    <ul class="uk-slideshow-items" ZgotmplZ>
<li class="uk-background-secondary uk-light uk-padding" ><p>Slide one <code>markdown</code> CONTENT</p>
</li>
<li class="uk-background-primary uk-light uk-padding">
  Slide two HTML content
</li>
</ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
  </div>
  
  <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
  
</div>

Slide one markdown content
Slide two HTML content

Options
`options`	See options
`class`	CSS class(es) to add to the slideshow items container
`attrs`	DOM attributes to add to the `ul` items wrapper
`dotnav`	Bool to include dotnav below slideshow

Slideshow items must be <li> type. Refer to usage for specific decorations for the desired presentation

Switcher

Create a tabbed content switcher


  
    One
Two
Three
  
  
    
Tab one content
const foo: string = 'bar';

Tab two content
Tab three content

Tab one content
```
const foo: string = 'bar';
```
Tab two content
Tab three content

Options
`tabs`	Switcher tab names delimited by `
`class`	CSS class(es) to add to the slideshow items container
`left`	Set to `true` for tabs on the left

Width

Specify inner width after breakpoint according to the docs

width <width> [breakpoint]

Arguments
`<width>`	Content width ratio
`[breakpoint]`	`s

Wrapper

Wraps inner content with any div and specified classes. Useful for specifying markup with other UIkit features

<div class="uk-light uk-background-primary uk-panel uk-padding" >
  
Light Panel

</div>

Light Panel

Arguments
`[class]`	CSS class string to apply to wrapper `<div>` element
`[attr]`	Attributes to apply to wrapper `<div>` element

Shortcode Extras

Diagrams

Markdownish SVG diagrams from mermaid


graph TD
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{Decision}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]

graph TD A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

Options
`class`	Additional classes on the wrapper element