First commit

14 files changed, 567 insertions, 0 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
new file mode 100644
index 0000000..541e1c7
--- /dev/null
+++ b/exampleSite/config.toml
@@ -0,0 +1,36 @@
+baseURL = ""
+
+languageCode = "en-us"
+DefaultContentLanguage = "en"
+title = "Ace documentation"
+theme = "ace-documentation"
+pygmentsCodeFences = true
+pygmentsStyle = "monokailight"
+
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir= false
+enableMissingTranslationPlaceholders = false
+
+# Enable Google Analytics by entering your tracking id
+googleAnalytics = ""
+
+[params]
+ordersectionsby = "weight" # ordersectionsby = "title"
+disableSearch = false # default is false
+disableNavChevron = false # set true to hide next/prev chevron, default is false
+highlightClientSide = false # set true to use highlight.pack.js instead of the default hugo chroma highlighter
+menushortcutsnewtab = true # set true to open shortcuts links to a new tab/window
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+
+[outputs]
+home = [ "HTML", "RSS", "JSON"]
+
+[[menu.shortcuts]]
+name = "<i class='fab fa-github'></i>"
+url = "https://github.com/vantagedesign/ace-documentation"
+weight = 10
+
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
new file mode 100644
index 0000000..8e53359
--- /dev/null
+++ b/exampleSite/content/_index.md
@@ -0,0 +1,149 @@
++++
+title = "Ace documentation"
+description = ""
++++
+
+{{< lead >}}
+Ace is a theme for <a href="https://gohugo.io" target="_blank">Hugo</a>, a fast static website generator written in Go, that allows you to easily write well organized and clean documentation for your projects. It's as easy as writing your content in Markdown, running Hugo to generate static HTML, CSS and Javascript files and deploying those to your web server.
+{{< /lead >}}
+
+
+## Features
+<div class="row py-3 mb-5">
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-tachometer-alt fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Fast.
+				</h5>
+				<p class="card-text text-muted">
+					Static files generated in less than a second. And served to your visitors just as fast.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-paint-brush fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Minimalistic.
+				</h5>
+				<p class="card-text text-muted">
+					A clean look to keep your user's attention to the content that matters: your documentation.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-project-diagram fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					For every project.
+				</h5>
+				<p class="card-text text-muted">
+					Hugo does not require Java, Python or Ruby and is available as a simple binary or through NPM and other package managers.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-cogs fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Automatic.
+				</h5>
+				<p class="card-text text-muted">
+					Folders and files are automatically added in the menu depending on your file and folder structure.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-search fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Full search.
+				</h5>
+				<p class="card-text text-muted">
+					Easily find the content you look for through the search function.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-code fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Code hightlighting.
+				</h5>
+				<p class="card-text text-muted">
+					Code highlighting. Include code samples with a copy button. If it’s HTML, you can also render the code.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-file-code fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Useful shortcodes.
+				</h5>
+				<p class="card-text text-muted">
+					Code, buttons, alerts, leads, collapse, panels, images, videos and more.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fas fa-mobile-alt fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Built with Bootstrap.
+				</h5>
+				<p class="card-text text-muted">
+					Built with <a href="https://getbootstrap.com" target="_blank">Bootstrap 4</a>. Fully responsive out of the box. Build and style page elements using Bootstrap.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card flex-row border-0">
+			<div class="mt-3">
+				<span class="fab fa-font-awesome-flag fa-2x text-primary"></span>
+			</div>
+			<div class="card-body pl-2">
+				<h5 class="card-title">
+					Icons.
+				</h5>
+				<p class="card-text text-muted">
+					Packed with <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>. Empower your content with a shit ton of awesome icons.
+				</p>
+			</div>
+		</div>
+	</div>
+</div>
+
diff --git a/exampleSite/content/getting-started/_index.md b/exampleSite/content/getting-started/_index.md
new file mode 100644
index 0000000..db293bd
--- /dev/null
+++ b/exampleSite/content/getting-started/_index.md
@@ -0,0 +1,14 @@
++++
+title = "Getting started"
+description = ""
+weight = 1
++++
+
+{{< lead >}}
+Get started with Ace docs, the easy way to generate a static website for your project's documentation. 
+{{< /lead >}}
+
+Installation and configuration is easy and can be easily applied to any project. No need to be dependent on Python, Ruby or Java. Hugo runs from a simple binary and works through the command line.
+Explore the following pages to learn how to build awesome documentation for your project using Ace.
+
+{{< childpages >}}
\ No newline at end of file
diff --git a/exampleSite/content/getting-started/installation.md b/exampleSite/content/getting-started/installation.md
new file mode 100644
index 0000000..87cc285
--- /dev/null
+++ b/exampleSite/content/getting-started/installation.md
@@ -0,0 +1,48 @@
++++
+title = "Installation"
+description = ""
+weight = 1
++++
+
+{{< lead >}}
+Installing Ace is easy. Just install the Hugo binary, create a new site and install the Ace theme. 
+{{< /lead >}}
+
+## Installing Hugo
+In order to run this theme, you need to install Hugo on your system.
+For more detailed information and other methods of installation you can visit the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo installation guide.</a>   
+
+There may be other ways to install Hugo that are more applicable for your project. For example, you can use the NPM package <a href="https://www.npmjs.com/package/hugo-bin" target="_blank">hugo-bin</a> to include Hugo in a project that already uses NPM packages.
+
+### Checking your Hugo installation
+Run the following command in your terminal to check if Hugo is installed.
+{{< code lang="bash" >}}
+hugo version
+{{< /code >}}
+
+## Creating a site
+Create a new site *docs* (you may choose any name you want). In your projects root folder, run the following command:
+{{< code lang="bash" >}}
+hugo new site docs
+{{< /code >}}
+This will create a new folder <code>/docs</code> with all required files in it.
+
+### Installing the theme
+Download and copy the theme files into <code>/docs/themes/ace-documentation</code> or use <i>git</i> to clone the repository to that directory:
+{{< code lang="bash" >}}
+cd docs
+cd themes
+git clone https://github.com/vantagedesign/ace-documentation
+{{< /code >}}
+
+After theme installation, the <code>/docs/themes/ace-documentation</code> folder should contain the file <code>theme.toml</code>, along with all other theme files.
+
+### Configuring your hugo site to use the theme
+Inside your site's folder, <code>/docs</code>, you will find a file called <code>config.toml</code>. This is the configuration file for your site. Open it and configure it to use the Ace theme by setting the following value:
+{{< code lang="toml" >}}
+theme = "ace-documentation"
+{{< /code >}}
+
+
+## Installing example content
+You can add some sample content to your site by placing the contents of the <code>exampleSite</code> directory in your <code>/docs</code> directory.
diff --git a/exampleSite/content/getting-started/usage.md b/exampleSite/content/getting-started/usage.md
new file mode 100644
index 0000000..53b2539
--- /dev/null
+++ b/exampleSite/content/getting-started/usage.md
@@ -0,0 +1,86 @@
++++
+title = "Usage"
+description = ""
+weight = 2
++++
+
+{{< lead >}}
+With the site created and the theme installed, it's time to run the server and create content.
+{{< /lead >}}
+
+## Starting & building the site
+### Development server
+To start the site for development mode, execute the following command while in your <code>/docs</code> folder:
+{{< code lang="bash" >}}
+hugo server
+{{< /code >}}
+This will start a server on your localhost that will live-update with any changes you make to your site.
+
+For more Hugo commands visit <a href="https://gohugo.io/commands/" target="_blank">https://gohugo.io/commands/</a>
+
+### Building for production
+To build the site for your production environment, as in, to serve it to your users through a web server, execute the following command. This will create a folder <code>/docs/public</code> with all the necessary files, compiled to HTML.
+
+<br>Be sure the site's configuration in <code>config.toml</code> is complete, including the <code>baseURL = "https:&#47;&#47;yourdomain.com/"</code> value to properly load stylesheets and other resources.
+{{< code lang="bash" >}}
+hugo
+{{< /code >}}
+
+
+## Creating content
+### Markdown
+Pages are written in Markdown and files defining pages should end with *.md*. For more information on how to use Markdown, search for tutorials on the internet or use this <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">cheatsheet</a>.
+
+### File structure
+Ace looks at your file stucture and automatically turns it into a menu.
+The structure looks as follows:
+{{< code >}}
+/content
+├── _index.md
+├── page-top.md
+└── /level-one
+    ├── _index.md
+    ├── page-1-one.md
+    ├── page-1-two.md
+    └── /level-two
+        ├── _index.md
+        ├── page-2-one.md
+        ├── page-2-two.md
+        └── /level-three
+            ├── _index.md
+            ├── page-3-one.md
+            ├── page-3-two.md
+            └── /level-four
+                ├── page-4-one.md
+                └── page-4-two.md
+{{< /code >}}   
+
+Your 'homepage' for every level is the <code>_index.md</code> file. Subpages (like <code>page-1-one.md</code>) are automatically added as child pages in the menu.   
+   
+An exception exists for the top level files. <code>/content/_index.md</code> is your homepage, and any other page files in the <code>/content</code> folder are not automatically added in the menu. Instead, they can be accessed manually through their URL (<code>yourdomain.com/page-title</code>).
+
+### File contents
+Every file should start by defining the title and weight of the page. This can be done by adding the following text to the top of your page file.
+{{< code lang="markdown" >}}
++++
+title = "Usage"
+description = ""
+weight = 2
++++
+{{< /code >}}   
+The title will be displayed as a H1 header at the top of your page. The weight determines the order in the menu.   
+   
+After that you may write the content you desire with Markdown. You may use shortcodes to add some more 'advanced' layout features to the page, such as code hightlighting, a 'lead' style paragraph, images, video's, and more. 
+
+### Navigation bar menu
+While the left sidebar navigation is automatically populated by the file structure described above, and the right 'table of contents' sidebar menu is automatically populated by the headings defined on a page, the top navigation bar needs to be configured manually.
+<br>
+This can be done in the <code>config.toml</code> file, by adding the following lines:
+{{< code lang="toml" >}}
+[[menu.shortcuts]]
+name = "<i class='fab fa-github'></i>"
+url = "https://github.com/vantagedesign/ace-documentation"
+weight = 10
+{{< /code >}}
+
+This example will create a GitHub icon that links to that URL. Instead of an icon, you may also use text, or both.
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/_index.md b/exampleSite/content/shortcodes/_index.md
new file mode 100644
index 0000000..70bdaf6
--- /dev/null
+++ b/exampleSite/content/shortcodes/_index.md
@@ -0,0 +1,11 @@
++++
+title = "Shortcodes"
+description = ""
+weight = 0
++++
+
+{{< lead >}}
+Shortcodes are a great way to add some more advanced elements to your page. Code highlighting, a 'lead' style paragraph, images, videos, and more.
+{{< /lead >}}
+
+{{< childpages >}}
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/alerts.md b/exampleSite/content/shortcodes/alerts.md
new file mode 100644
index 0000000..8673457
--- /dev/null
+++ b/exampleSite/content/shortcodes/alerts.md
@@ -0,0 +1,27 @@
++++
+title = "Alerts"
+description = ""
+weight = 1
++++
+
+The alerts shortcode allows you to let information stand out by means of an alert styled box. This can be used to indicate danger, warning, success or info. 
+
+{{< alert style="danger" >}} I'm a danger alert {{< /alert >}}
+{{< alert style="warning" >}} I'm a warning alert {{< /alert >}}
+{{< alert style="success" >}} I'm a success alert {{< /alert >}}
+{{< alert style="info" >}} I'm an info alert {{< /alert >}}
+
+## Usage
+Place the following shortcode on the page
+{{< code lang="html" >}} 
+{{</* alert style="STYLE" */>}} [content] {{</* /alert */>}}
+{{< /code >}}
+
+### Parameters
+#### Style
+The style parameter is directly applied to the alert as a class in the format *"alert-{STYLE}"*. Bootstrap comes with four styles that can be used with this:   
+- danger    
+- warning   
+- success   
+- info    
+
diff --git a/exampleSite/content/shortcodes/buttons.md b/exampleSite/content/shortcodes/buttons.md
new file mode 100644
index 0000000..5d3a462
--- /dev/null
+++ b/exampleSite/content/shortcodes/buttons.md
@@ -0,0 +1,38 @@
++++
+title = "Buttons"
+description = ""
+weight = 2
++++
+
+The button shortcode allows you to add a button to the page. This button is a HTML *anchor* element and can thus be used to link to another page or website. 
+
+{{< button style="primary" >}} Button {{< /button >}}
+{{< button style="secondary" >}} Button {{< /button >}}
+{{< button style="outline-primary" >}} Button {{< /button >}}
+{{< button style="danger" >}} Button {{< /button >}}
+{{< button style="warning" >}} Button {{< /button >}}
+{{< button style="success" >}} Button {{< /button >}}
+{{< button style="info" >}} Button {{< /button >}}
+
+## Usage
+Place the following shortcode on the page
+{{< code lang="html" >}} 
+{{</* button style="STYLE" link="https://yourwebsite.com" */>}} [content] {{</* /button */>}}
+{{< /code >}}
+
+### Parameters
+#### *style*
+The style parameter is directly applied to the alert as a class in the format *"btn-{STYLE}"*. Bootstrap comes with a variety of styles that can be used with this:  
+- primary  
+- secondary      
+- danger   
+- warning   
+- success   
+- info    
+
+Each style can also be presented as an 'outline' variant by prefixing the style with 'outline-'.   
+Example: <code>style="outline-primary"</code>.
+
+#### *link*
+The link parameter may consist of an URL leading to a page or other website. Simply use it by defining a URL for the button to link to.   
+Example: <code>link="https://google.com"</code>.
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/childpages.md b/exampleSite/content/shortcodes/childpages.md
new file mode 100644
index 0000000..e789272
--- /dev/null
+++ b/exampleSite/content/shortcodes/childpages.md
@@ -0,0 +1,13 @@
++++
+title = "Childpages"
+description = ""
+weight = 3
++++
+
+The childpages shortcode allows you to show a list of sub-pages of the current page. For example, the *Getting started* page of this documentation has three child pages: *Installation*, *Configuration* and *Creating content*. Placing the childpages shortcode in the *Getting started* page will place a create a list of these sub-pages in that page. 
+
+## Usage
+Simply place the following shortcode on the page
+{{< code lang="html" >}}
+{{</* childpages */>}}
+{{< /code >}}
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/code.md b/exampleSite/content/shortcodes/code.md
new file mode 100644
index 0000000..c4e5797
--- /dev/null
+++ b/exampleSite/content/shortcodes/code.md
@@ -0,0 +1,37 @@
++++
+title = "Code"
+description = ""
+weight = 4
++++
+
+Add code to your page with syntax highlighting and a copy button so your users can easily copy the code to their clipboard with the press of a button. The code may be entered inside the shortcode or come from an external file.  
+
+{{< code lang="html" >}}
+<div class="mydiv bg-primary shadow text-white">
+	<h1 class="title">Hi there</h1>
+	<p class="lead">I'm inside a code shortcode. Check out my syntax highlighting!.</p>
+</div>
+{{< /code >}}
+
+## Usage
+Simply place the following shortcode on the page
+#### Code in the shortcode
+{{< code lang="html" >}}
+{{</* code lang="LANG" */>}} [your code] {{</* /code */>}}
+{{< /code >}}
+#### Code from a file
+{{< code lang="html" >}}
+{{</* code lang="LANG" file="code/mycode.html" */>}}
+{{< /code >}}
+   
+
+
+### Parameters
+#### *lang*
+The lang parameter defines the language to be used for code highlighting. You can find a complete list of supported languages <a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" target="_blank">here</a>.  
+  
+Example: <code>lang="html"</code>
+
+#### *file*
+The file parameter allows you to define an external file that contains your code to be displayed. This is done by giving a path to that file, starting from the root directory of your site.    
+For example, a HTML file named *'mycode.html'* you wish to link that is in the *docs/code/* directory can be defined as follows: <code>file="code/mycode.html"</code>.
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/collapse.md b/exampleSite/content/shortcodes/collapse.md
new file mode 100644
index 0000000..4986013
--- /dev/null
+++ b/exampleSite/content/shortcodes/collapse.md
@@ -0,0 +1,23 @@
++++
+title = "Collapse"
+description = ""
+weight = 5
++++
+
+Feel like hiding some content from your visitor in a collapsible element? The collapse shortcode does exactly that. It creates a button that shows or hides the content in the shortcode on request.
+
+{{< collapse title="Click me to show content" >}}
+Hi there, I'm the hidden content. Didn't see that one coming, huh?
+{{< /collapse >}}
+
+## Usage
+Simply place the following shortcode on the page
+{{< code lang="html" >}}
+{{</* collapse title="TITLE" */>}} [content] {{</* /collapse */>}}
+{{< /code >}}
+
+
+### Parameters
+#### *title*
+The lang parameter defines the text to show in the button that toggles the collapse content.  
+Example: <code>title="Click me to show content"</code>.
diff --git a/exampleSite/content/shortcodes/doublecode.md b/exampleSite/content/shortcodes/doublecode.md
new file mode 100644
index 0000000..0b6642b
--- /dev/null
+++ b/exampleSite/content/shortcodes/doublecode.md
@@ -0,0 +1,36 @@
++++
+title = "Doublecode"
+description = ""
+weight = 6
++++
+
+The *doublecode* shortcode works the same as the [code](/shortcodes/code/) shortcode, but extends the functionality by also rendering the code in the page. This is useful for showing the code of HTML elements in your page. 
+
+{{< doublecode lang="html" >}}
+<div class="mydiv bg-primary shadow text-white p-3 m-4 border-primary">
+	<p class="h4 title">Hi there</p>
+	<p class="lead mb-0">I'm inside a doublecode shortcode, that's why I look so fancy.</p>
+</div>
+{{< /doublecode >}}
+
+## Usage
+Simply place the following shortcode on the page
+#### Code in the shortcode
+{{< code lang="html" >}}
+{{</* doublecode lang="LANG" */>}} [your code] {{</* /doublecode */>}}
+{{< /code >}}
+#### Code from a file
+{{< code lang="html" >}}
+{{</* doublecode lang="LANG" file="code/mycode.html" */>}}
+{{< /code >}}
+
+
+### Parameters
+#### *lang*
+The lang parameter defines the language to be used for code highlighting. You can find a complete list of supported languages <a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" target="_blank">here</a>.  
+  
+Example: <code>lang="html"</code>
+
+#### *file*
+The file parameter allows you to define an external file that contains your code to be displayed. This is done by giving a path to that file, starting from the root directory of your site.    
+For example, a HTML file named *'mycode.html'* you wish to link that is in the *docs/code/* directory can be defined as follows: <code>file="code/mycode.html"</code>.
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/lead.md b/exampleSite/content/shortcodes/lead.md
new file mode 100644
index 0000000..dea42e6
--- /dev/null
+++ b/exampleSite/content/shortcodes/lead.md
@@ -0,0 +1,17 @@
++++
+title = "Lead"
+description = ""
+weight = 7
++++
+
+The lead shortcode creates a paragraph with the *lead* class to make it stand out. Great for introductions or summaries.
+
+{{< lead >}}
+I'm a lead paragraph. That means I'm more important. And you can see that.
+{{< /lead >}}
+
+## Usage
+Simply place the following shortcode on the page
+{{< code lang="html" >}}
+{{</* lead */>}} [content] {{</* /lead */>}}
+{{< /code >}}
diff --git a/exampleSite/content/shortcodes/panel.md b/exampleSite/content/shortcodes/panel.md
new file mode 100644
index 0000000..9868b14
--- /dev/null
+++ b/exampleSite/content/shortcodes/panel.md
@@ -0,0 +1,32 @@
++++
+title = "Panel"
+description = ""
+weight = 8
++++
+
+Draw your visitor's attention by separating information from the rest of the page using a panel. Convey meaning to this information by using colors implying danger, warning, success or info in a similar fashion as alerts.
+
+{{< panel title="I'm important" style="danger" >}}
+Be sure to read me, I might have important information for you.
+{{< /panel >}}
+
+## Usage
+Simply place the following shortcode on the page
+{{< code lang="html" >}}
+{{</* panel title="TITLE" style="STYLE" */>}} [content] {{</* /panel */>}}
+{{< /code >}}
+
+### Parameters
+#### Style
+The style parameter is directly applied to the alert as a class in the format *"border-{STYLE}"*. Bootstrap comes with a variety of styles that can be used with this:  
+- primary  
+- secondary      
+- danger   
+- warning   
+- success   
+- info    
+Example: <code>style="danger"</code>.
+
+#### Title
+The title paramter defines the text shown as a title in the panel. It will have the same color as the style.   
+Example: <code>title="I'm important"</code>.
\ No newline at end of file