HPCE/gitea-pages
HPCE/gitea-pages
0
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Activity

Replacing default content with HPCE stuff

Browse Source 
- Add README.md
- Customize _config.yml
- /merlin6/ pages (moved from merlin6-user-guide)
- remove demo products
- remove update.sh
This commit is contained in:
Spencer Bliven 2019-06-14 11:57:33 +02:00
parent f644a9b995
commit 52405ea5e6
111 changed files with 206 additions and 8091 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -6,3 +6,5 @@ _pdf
.idea
vendor/
.bundle/
.ruby-gemset
.ruby-version

26
.gitlab-ci.yml.orig
View File

@ -1,26 +0,0 @@
image: ruby:2.3
variables:
JEKYLL_ENV: production
test:
stage: test
script:
- sh ./var/build.sh
- bundle exec jekyll build -d test
artifacts:
paths:
- test
except:
- master
pages:
stage: deploy
script:
- sh ./var/build.sh
- bundle exec jekyll build -d public
artifacts:
paths:
- public
only:
- master

36
README.md
View File

@ -2,3 +2,39 @@
This site documents the *Merlin 6* cluster at Paul Scherrer Institute.
Live pages are available at https://lsm-hpce.gitpages.psi.ch/merlin6.
## Installation
Building locally requires ruby 2.5 and bundler. To install:
```
gem install bundler
bundle install
```
To run a local webserver:
```
bundle exec jekyll serve
```
## Theme
The theme is derived from the
[Jekyll Doc Theme 6.0](https://github.com/tomjoht/documentation-theme-jekyll)
by Tom Johnson.
### Organization
- Sidebars are specified in `_data/sidebars/<sidebar>.yml`. Use
`sidebar: <sidebar>` in the frontmatter of a page
- Top Menu is controlled by `_data/topnav.yml`
## License
Theme content is licensed under the MIT license.
The Navgoco jQuery component used in the sidebar is licensed under the BSD
license.
See licenses subdirectory for license terms.

18
_config.yml
View File

@ -1,18 +1,18 @@
repository: tomjoht/documentation-theme-jekyll
repository: lsm-hpce/lsm-hpce.gitpages.psi.ch
output: web
# this property is useful for conditional filtering of content that is separate from the PDF.
topnav_title: Jekyll Documentation Theme
topnav_title: HPCE@PSI
# this appears on the top navigation bar next to the home button
site_title: HPCE test of Jekyll theme for documentation
site_title: HPC and Emerging Technologies Documentation
# this appears in the html browser tab for the site title (seen mostly by search engines, not users)
company_name: LSM/HPC and Emerging Technologies Group
company_name: Paul Scherrer Institute, LSM/HPC and Emerging Technologies Group
# this appears in the footer
github_editme_path:
github_editme_path:
# github_editme_path: tomjoht/documentation-theme-jekyll/blob/gh-pages/
# if you're using Github, provide the basepath to the branch you've created for reviews, following the sample here. if not, leave this value blank.
@ -34,12 +34,14 @@ port: 4000
# the port where the preview is rendered. You can leave this as is unless you have other Jekyll builds using this same port that might cause conflicts. in that case, use another port such as 4006.
exclude:
- README.md
- .idea/
- .gitignore
- vendor
- .vscode
# these are the files and directories that jekyll will exclude from the build
feedback_subject_line: Jekyll documentation theme
feedback_subject_line: HPCE Documentation feedback
feedback_email: merlin-admins@lists.psi.ch
# feedback_email: tomjoht@gmail.com
@ -112,13 +114,13 @@ sidebars:
- product2_sidebar
- other
description: "Intended as a documentation theme based on Jekyll for technical writers documenting software and other technical products, this theme has all the elements you would need to handle multiple products with both multi-level sidebar navigation, tags, and other documentation features."
description: "Merlin 6 is the HPC cluster at Paul Scherrer Institute in Switzerland."
# the description is used in the feed.xml file
# needed for sitemap.xml file only
# url: http://idratherbewriting.com
# baseurl: /documentation-theme-jekyll
url: "https://lsm-hpce.gitpages.psi.ch"
baseurl: /documentation-theme-jekyll
baseurl:
github: [metadata]

20
_data/sidebars/home_sidebar.yml
View File

@ -1,22 +1,18 @@
# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
entries:
- title: Sidebar
- product: HPCE
levels: one
folders:
- title: Products
- title: Services
output: web
folderitems:
- title: Overview
url: /index.html
output: web
- title: News
url: /news.html
output: web
- title: Theme instructions
url: /mydoc_introduction.html
output: web
- title: Product 1
url: /p1_landing_page.html
output: web
- title: Product 2
url: /p2_landing_page.html
output: web
- title: Merlin 6
url: /merlin6/introduction.html
output: web

28
_data/sidebars/merlin6_sidebar.yml Normal file
View File

@ -0,0 +1,28 @@
# Follow the pattern here for the URLs -- no slash at the beginning, and include the .html. The link here is rendered exactly as is in the Markdown references.
entries:
- product: Merlin 6
levels: one
folders:
- title: Documentation
output: web
folderitems:
- title: Introduction
url: /merlin6/introduction.html
output: web
- title: Contact
url: /merlin6/contact.html
output: web
- title: Using Merlin6
url: /merlin6/use.html
output: web
- title: User Guide
url: /merlin6/user-guide.html
output: web
- title: Section 2
output: web
folderitems:
- title: broken
url: /merlin6/broken.html
output: web

295
_data/sidebars/mydoc_sidebar.yml
View File

@ -1,295 +0,0 @@
# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
entries:
- title: sidebar
product: Jekyll Doc Theme
version: 6.0
folders:
- title:
output: pdf
type: frontmatter
folderitems:
- title:
url: /titlepage.html
output: pdf
type: frontmatter
- title:
url: /tocpage.html
output: pdf
type: frontmatter
- title: Overview
output: web, pdf
folderitems:
- title: Get started
url: /index.html
output: web, pdf
type: homepage
- title: Introduction
url: /mydoc_introduction.html
output: web, pdf
- title: Supported features
url: /mydoc_supported_features.html
output: web, pdf
- title: About the theme author
url: /mydoc_about.html
output: web, pdf
- title: Support
url: /mydoc_support.html
output: web, pdf
- title: Release Notes
output: web, pdf
folderitems:
- title: 6.0 Release notes
url: /mydoc_release_notes_60.html
output: web, pdf
- title: 5.0 Release notes
url: /mydoc_release_notes_50.html
output: web, pdf
- title: Installation
output: web, pdf
folderitems:
- title: About Ruby, Gems, Bundler, etc.
url: /mydoc_about_ruby_gems_etc.html
output: web, pdf
- title: Install Jekyll on Mac
url: /mydoc_install_jekyll_on_mac.html
output: web, pdf
- title: Install Jekyll on Windows
url: /mydoc_install_jekyll_on_windows.html
output: web, pdf
- title: Authoring
output: web, pdf
folderitems:
- title: Pages
url: /mydoc_pages.html
output: web, pdf
- title: Posts
url: /mydoc_posts.html
output: web, pdf
- title: Lists
url: /mydoc_lists.html
output: web, pdf
- title: Conditional logic
url: /mydoc_conditional_logic.html
output: web, pdf
- title: Content reuse
url: /mydoc_content_reuse.html
output: web, pdf
- title: Collections
url: /mydoc_collections.html
output: web, pdf
- title: WebStorm editor tips
url: /mydoc_webstorm_text_editor.html
output: web, pdf
- title: Atom editor tips
url: /mydoc_atom_text_editor.html
output: web, pdf
- title: Navigation
output: web, pdf
folderitems:
- title: Sidebar navigation
url: /mydoc_sidebar_navigation.html
output: web, pdf
- title: YAML tutorial in the context of Jekyll
url: /mydoc_yaml_tutorial.html
output: web, pdf
- title: Tags
url: /mydoc_tags.html
output: web, pdf
- title: Series
url: /mydoc_series.html
output: web, pdf
- title: Formatting
output: web, pdf
folderitems:
- title: Tooltips
url: /mydoc_adding_tooltips.html
output: web, pdf
- title: Alerts
url: /mydoc_alerts.html
output: web, pdf
- title: Icons
url: /mydoc_icons.html
output: web, pdf
- title: Images
url: /mydoc_images.html
output: web, pdf
- title: Code samples
url: /mydoc_code_samples.html
output: web, pdf
- title: Labels
url: /mydoc_labels.html
output: web, pdf
- title: Links
url: /mydoc_hyperlinks.html
output: web, pdf
- title: Navtabs
url: /mydoc_navtabs.html
output: web, pdf
- title: Tables
url: /mydoc_tables.html
output: web, pdf
- title: Syntax highlighting
url: /mydoc_syntax_highlighting.html
output: web, pdf
- title: Workflow maps
url: /mydoc_workflow_maps.html
output: web, pdf
- title: Handling reviews
output: web, pdf
folderitems:
- title: Commenting on files
url: /mydoc_commenting_on_files.html
output: web, pdf
# - title: Git collaboration
# url: /mydoc_git_collaboration
# output: web, pdf
- title: Publishing
output: web, pdf
folderitems:
- title: Build arguments
url: /mydoc_build_arguments.html
output: web, pdf
- title: Themes
url: /mydoc_themes.html
output: web, pdf
- title: Generating PDFs
url: /mydoc_generating_pdfs.html
output: web, pdf
- title: Help APIs and UI tooltips
url: /mydoc_help_api.html
output: web, pdf
- title: Search configuration
url: /mydoc_search_configuration.html
output: web, pdf
- title: iTerm profiles
url: /mydoc_iterm_profiles.html
output: web, pdf
- title: Pushing builds to server
url: /mydoc_push_build_to_server.html
output: web, pdf
- title: Publishing on Github Pages
url: /mydoc_publishing_github_pages.html
output: web, pdf
- title: Special layouts
output: web, pdf
folderitems:
- title: Knowledge-base layout
url: /mydoc_kb_layout.html
output: web, pdf
- title: Glossary layout
url: /mydoc_glossary.html
output: web, pdf
- title: FAQ layout
url: /mydoc_faq_layout.html
output: web, pdf
- title: Shuffle layout
url: /mydoc_shuffle.html
output: web, pdf
- title: Troubleshooting
output: web, pdf
folderitems:
- title: Troubleshooting
url: /mydoc_troubleshooting.html
output: web, pdf
- title: Tag archives
output: web
folderitems:
- title: Tag archives overview
url: /mydoc_tag_archives_overview.html
output: web
subfolders:
- title: Tag archive pages
output: web
subfolderitems:
- title: Formatting pages
url: /tag_formatting.html
output: web
- title: Navigation pages
url: /tag_navigation.html
output: web
- title: Content types pages
url: /tag_content_types.html
output: web
- title: Publishing pages
url: /tag_publishing.html
output: web
- title: Special layout pages
url: /tag_special_layouts.html
output: web
- title: Collaboration pages
url: /tag_collaboration.html
output: web
- title: Troubleshooting pages
url: /tag_troubleshooting.html
output: web

18
_data/sidebars/other.yml
View File

@ -1,18 +0,0 @@
# Follow the pattern here for the URLs -- no slash at the beginning, and include the .html. The link here is rendered exactly as is in the Markdown references.
entries:
- title: other
folders:
- title: Other Links
folderitems:
- title: Automated links bookmark
url: /mydoc_hyperlinks.html#automatedlinks
- title: Bookmark links
url: /mydoc_hyperlinks.html#bookmarklinks
- title: Some link bookmark
url: /mydoc_pages.html#someIdTag

60
_data/sidebars/product1_sidebar.yml
View File

@ -1,60 +0,0 @@
# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
entries:
- title: Sidebar
product: Product1
version: 1.0
folders:
- title:
output: pdf
type: frontmatter
folderitems:
- title:
url: /titlepage.html
output: pdf
type: frontmatter
- title:
url: /tocpage.html
output: pdf
type: frontmatter
- title: Getting Started
output: web, pdf
folderitems:
- title: Product 1 home
url: /p1_landing_page.html
output: web
- title: Sample 1
url: /p1_sample1.html
output: web, pdf
- title: Sample 2
url: /p1_sample2.html
output: web, pdf
- title: Sample 3
url: /p1_sample3.html
output: web, pdf
- title: Another heading
output: web, pdf
folderitems:
- title: Sample 4
url: /p1_sample4.html
output: web, pdf
- title: Sample 5
url: /p1_sample5.html
output: web, pdf
- title: Sample 6
url: /p1_sample6.html
output: web, pdf
- title: Sample 7
url: /p1_sample7.html
output: web, pdf

92
_data/sidebars/product2_sidebar.yml
View File

@ -1,92 +0,0 @@
# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
entries:
- title: Product2
product: Product2
version: 1.0
folders:
- title:
output: pdf
type: frontmatter
folderitems:
- title:
url: /titlepage.html
output: pdf
type: frontmatter
- title:
url: /tocpage.html
output: pdf
type: frontmatter
- title: Introduction
output: web, pdf
folderitems:
- title: Overview
url: /p2_landing_page.html
output: web
- title: Simple Workflow
output: web, pdf
folderitems:
- title: Sample 1
url: /p2_sample1.html
output: web, pdf
- title: Sample 2
url: /p2_sample2.html
output: web, pdf
- title: Sample 3
url: /p2_sample3.html
output: web, pdf
- title: Sample 4
url: /p2_sample4.html
output: web, pdf
- title: Sample 5
url: /p2_sample5.html
output: web, pdf
- title: Complex Workflow
output: web, pdf
folderitems:
- title: Sample 6
url: /p2_sample6.html
output: web, pdf
- title: Sample 7
url: /p2_sample7.html
output: web, pdf
- title: Sample 8
url: /p2_sample8.html
output: web, pdf
- title: Sample 9
url: /p2_sample9.html
output: web, pdf
- title: Sample 10
url: /p2_sample10.html
output: web, pdf
- title: Sample 11
url: /p2_sample11.html
output: web, pdf
- title: Sample 12
url: /p2_sample12.html
output: web, pdf
- title: Sample 13
url: /p2_sample13.html
output: web, pdf
- title: Sample 14
url: /p2_sample14.html
output: web, pdf

4
_data/terms.yml
View File

@ -1 +1,3 @@
apple: "apple - the fruit of a disiduous tree."
hpc: "High Performance Computing"
hpce: "High Performance Computing and Emerging Technologies; our group at PSI"
psi: "Paul Scherrer Institute"

30
_data/topnav.yml
View File

@ -3,8 +3,8 @@
topnav:
- title: Topnav
items:
- title: GitHub
external_url: https://github.com/tomjoht/documentation-theme-jekyll
# - title: GitHub
# external_url: https://github.com/tomjoht/documentation-theme-jekyll
- title: News
url: /news
@ -12,21 +12,13 @@ topnav:
topnav_dropdowns:
- title: Topnav dropdowns
folders:
- title: Jekyll Help
- title: Merlin 6
folderitems:
- title: Jekyll Talk
external_url: https://talk.jekyllrb.com
- title: Jekyll documentation
external_url: http://jekyllrb.com/docs/home/
- title: Jekyll on Stack Overflow
external_url: http://stackoverflow.com/questions/tagged/jekyll
- title: Jekyll on my blog
external_url: http://idratherbewriting.com/category-jekyll/
- title: Products
folderitems:
- title: Jekyll Documentation Theme
url: /mydoc_introduction.html
- title: Product 1
url: /p1_landing_page.html
- title: Product 2
url: /p2_landing_page.html
- title: Introduction
url: /merlin6/introduction.html
- title: Contact
url: /merlin6/contact.html
- title: Using Merlin6
url: /merlin6/use.html
- title: User Guide
url: /merlin6/user-guide.html

10
_posts/2015-04-12-test-post-last-year.md
View File

@ -1,10 +0,0 @@
---
title: "Test post from last year"
categories: jekyll update
permalink: test-post-from-last-year.html
tags: [news]
---
This is just a test post from the previous year.
{% include links.html %}

19
_posts/2016-02-24-first-post.md
View File

@ -1,19 +0,0 @@
---
title: "Welcome to Jekyll!"
categories: jekyll update
permalink: myupdate.html
tags: [news]
---
Theme updates:
- Permalinks
- Kramdown
- URL specified in config file
- removed PDF output
- removed some of the alternative layouts
- added blog feature
- sidebars configurable per page
{% include links.html %}

17
_posts/2016-02-26-sample-post-jekyll.md
View File

@ -1,17 +0,0 @@
---
title: "Sample post"
published: true
permalink: samplepost.html
summary: "This is some summary frontmatter for my sample post."
tags: [news, getting_started]
---
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
## Heading
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
{% include links.html %}

11
_posts/2019-06-12-launching-merlin6-docs.md Normal file
View File

@ -0,0 +1,11 @@
---
title: "Merlin 6 documentation available"
published: true
# permalink: samplepost.html
summary: "More pages will be coming soon."
tags: [news, getting_started]
---
Merlin 6 docs are now available at https://lsm-hpce.gitpages.psi.ch/merlin6!
More complete documentation will be coming shortly.

BIN
images/androidsdkmanagericon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 795 B

BIN
images/authorizegithubscreen2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 75 KiB

BIN
images/authorizeongithub.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
images/helpapi-01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
images/illustratoroptions.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 115 KiB

BIN
images/itermexample.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
images/killalljekyll.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 65 KiB

BIN
images/liningup.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 73 KiB

BIN
images/workflowarrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

410
index.md
View File

@ -1,410 +1,10 @@
---
title: "Getting started with the Documentation Theme for Jekyll"
title: "High Performance Computing and Emerging Technologies"
keywords: sample homepage
tags: [getting_started]
sidebar: mydoc_sidebar
# tags: [getting_started]
sidebar: home_sidebar
permalink: index.html
summary: These brief instructions will help you get started quickly with the theme. The other topics in this help provide additional information and detail about working with other aspects of this theme and Jekyll.
summary: A part of the Laboratory for Simulation and Modelling at Paul Scherrer Institute.
---
{% include note.html content="If you're cloning this theme, you're probably writing documentation of some kind. I have a blog on technical writing here called <a alt='technical writing blog' href='http://idratherbewriting.com'>I'd Rather Be Writing</a>. If you'd like to stay updated with the latest trends, best practices, and other methods for writing documentation, consider <a href='https://tinyletter.com/tomjoht'>subscribing</a>. I also have a site on <a href='http://idratherbewriting.com/learnapidoc'>writing API documentation</a>." %}
## Build the Theme
Follow these instructions to build the theme.
### 1. Download the theme
First, download or clone the theme from the [Github repo](https://github.com/tomjoht/documentation-theme-jekyll). Most likely you won't be pulling in updates once you start customizing the theme, so downloading the theme (instead of cloning it) probably makes the most sense. In Github, click the **Clone or download** button, and then click **Download ZIP**.
### 2. Install Jekyll
If you've never installed or run a Jekyll site locally on your computer, follow these instructions to install Jekyll:
* [Install Jekyll on Mac][mydoc_install_jekyll_on_mac]
* [Install Jekyll on Windows][mydoc_install_jekyll_on_windows]
### 3. Install Bundler
In case you haven't installed Bundler, install it:
```
gem install bundler
```
You'll want [Bundler](http://bundler.io/) to make sure all the Ruby gems needed work well with your project. Bundler sorts out dependencies and installs missing gems or matches up gems with the right versions based on gem dependencies.
### 4. Option 1: Build the Theme (*without* the github-pages gem) {#option1}
Use this option if you're not planning to publish your Jekyll site using [Github Pages](https://pages.github.com/).
Bundler's Gemfile specifies how project dependencies are managed. Although this project includes a Gemfile, this theme doesn't have any dependencies beyond core Jekyll. The Gemfile is used to list gems needed for publishing on Github Pages. **If you're not planning to have Github Pages build your Jekyll project, delete these two files from the theme's root directory:**
* Gemfile
* Gemfile.lock
If you've never run Jekyll on your computer (you can check with `jekyll --version`), you may need to install the jekyll gem:
```
gem install jekyll
```
Now run jekyll serve (first change directories (`cd`) to where you downloaded the project):
```
jekyll serve
```
### 4. Option 2: Build the Theme (*with* the github-pages gem) {#option2}
If you *are* in fact publishing on Github Pages, leave the Gemfile and Gemfile.lock files in the theme.The Gemfile tells Jekyll to use the github-pages gem. **However, note that you cannot use the normal `jekyll serve` command with this gem due to dependency conflicts between the latest version of Jekyll and Github Pages** (which are noted [briefly here](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/)).
You need Bundler to resolve these dependency conflicts. Use Bundler to install all the needed Ruby gems:
```
bundle update
```
Then *always* use this command to build Jekyll:
```
bundle exec jekyll serve
```
If you want to shorten this long command, you can put this code in a file such as jekyll.sh (on a Mac) and then simply type `. jekyll.sh` to build Jekyll.
## Running the site in Docker
You can also use Docker to directly build and run the site on your local machine. Just clone the repo and run the following from your working dir:
```
docker-compose build --no-cache && docker-compose up
```
The site should now be running at [http://localhost:4000/](http://localhost:4000/).
This is perhaps the easiest way to see how your site would actually look.
## Configure the sidebar
There are several products in this theme. Each product uses a different sidebar. This is the essence of what makes this theme unique -- different sidebars for different product documentation. The idea is that when users are reading documentation for a specific product, the sidebar navigation should be specific to that product. (You can read more of my thoughts on why multiple sidebars are important in this [blog post](http://idratherbewriting.com/2016/03/23/release-of-documentation-theme-for-jekyll-50/).)
The top navigation usually remains the same, because it allows users to navigate across products. But the sidebar navigation adapts to the product.
In each page's frontmatter, you must specify the sidebar you want that page to use. Here's an example of the page frontmatter showing the sidebar property:
<pre>
---
title: Alerts
tags: [formatting]
keywords: notes, tips, cautions, warnings, admonitions
last_updated: July 3, 2016
summary: "You can insert notes, tips, warnings, and important alerts in your content. These notes are stored as shortcodes made available through the linksrefs.hmtl include."
<span class="red">sidebar: mydoc_sidebar</span>
permalink: mydoc_alerts
---
</pre>
The `sidebar: mydoc_sidebar` refers to the \_data/sidebars/mydoc_sidebar.yml file.
Note that your sidebar can only have 2 levels (expand the **Tag archives** option to see an example of the second level). Given that each product has its own sidebar, this depth should be sufficient (it's really like 3 levels). Deeper nesting goes against usability recommendations.
You can optionally turn off the sidebar on any page (e.g. landing pages). To turn off the sidebar for a page, you should set the page frontmatter tag as `hide_sidebar: true`.
If you don't declare a sidebar, the `home_sidebar` file gets used as the default because this is the default specified in the config file:
```yaml
-
scope:
path: ""
type: "pages"
values:
layout: "page"
comments: true
search: true
sidebar: home_sidebar
topnav: topnav
```
If you want to set different sidebar defaults based on different folders for your pages, specify your defaults like this:
```
-
scope:
path: "pages/mydoc"
type: "pages"
values:
layout: "page"
comments: true
search: true
sidebar: mydoc_sidebar
topnav: topnav
```
This would load the `mydoc_sidebar` for each file in **pages/mydoc**. You could set different defaults for different path scopes.
For more detail on the sidebar, see [Sidebar navigation][mydoc_sidebar_navigation].
## Top navigation
The top navigation works just like the sidebar. You can specify which topnav data file should load by adding a `topnav` property in your page, like this:
```yaml
topnav: topnav
```
Here the topnav refers to the `_data/topnav.yml` file.
Because most topnav options will be the same, the `_config.yml` file specifies the topnav file as a default:
```yaml
-
scope:
path: ""
type: "pages"
values:
layout: "page"
comments: true
search: true
sidebar: home_sidebar
topnav: topnav
```
## Sidebar syntax
The sidebar data file uses a specific YAML syntax that you must follow. Follow the sample pattern shown in the theme, specically looking at `mydoc_sidebar.yml` as an example: Here's a code sample showing all levels:
```yaml
entries:
- title: sidebar
product: Jekyll Doc Theme
version: 6.0
folders:
- title: Overview
output: web, pdf
folderitems:
- title: Get started
url: /index.html
output: web, pdf
type: homepage
- title: Introduction
url: /mydoc_introduction.html
output: web, pdf
- title: Release Notes
output: web, pdf
folderitems:
- title: 6.0 Release notes
url: /mydoc_release_notes_60.html
output: web, pdf
- title: 5.0 Release notes
url: /mydoc_release_notes_50.html
output: web, pdf
- title: Tag archives
output: web
folderitems:
- title: Tag archives overview
url: /mydoc_tag_archives_overview.html
output: web
subfolders:
- title: Tag archive pages
output: web
subfolderitems:
- title: Formatting pages
url: /tag_formatting.html
output: web
- title: Navigation pages
url: /tag_navigation.html
output: web
- title: Content types pages
url: /tag_content_types.html
output: web
```
Each `folder` or `subfolder` must contain a `title` and `output` property. Each `folderitem` or `subfolderitem` must contain a `title`, `url`, and `output` property.
The two outputs available are `web` and `pdf`. (Even if you aren't publishing PDF, you still need to specify `output: web`).
The YAML syntax depends on exact spacing, so make sure you follow the pattern shown in the sample sidebars. See my [YAML tutorial](mydoc_yaml_tutorial) for more details about how YAML works.
{% include note.html content="If you have just one character of spacing off, Jekyll won't build due to the YAML syntax error. You'll see an error message in your console that says \"Error ... did not find expected key while parsing a block mapping at line 22 column 5. Error: Run jekyll build --trace for more information.\" If you encounter this, it usually refers to incorrect indentation or spacing in the YAML file. See the example mydoc_sidebar.yml file to see where your formatting went wrong." %}
Each level must have at least one topic before the next level starts. You can't have a second level that contains multiple third levels without having at least one standalone topic in the second level. If you need a hierarchy that has a folder that contains other folders and no loose topics, use a blank `-` item like this:
```yaml
entries:
- title: sidebar
product: Jekyll Doc Theme
version: 6.0
folders:
- title: Overview
output: web, pdf
folderitems:
-
- title: Release Notes
output: web, pdf
folderitems:
- title: 6.0 Release notes
url: /mydoc_release_notes_60.html
output: web, pdf
- title: 5.0 Release notes
url: /mydoc_release_notes_50.html
output: web, pdf
- title: Installation
output: web, pdf
folderitems:
- title: About Ruby, Gems, Bundler, etc.
url: /mydoc_about_ruby_gems_etc.html
output: web, pdf
- title: Install Jekyll on Mac
url: /mydoc_install_jekyll_on_mac.html
output: web, pdf
- title: Install Jekyll on Windows
url: /mydoc_install_jekyll_on_windows.html
output: web, pdf
```
To accommodate the title page and table of contents in PDF outputs, each product sidebar must list these pages before any other:
```yaml
- title:
output: pdf
type: frontmatter
folderitems:
- title:
url: /titlepage
output: pdf
type: frontmatter
- title:
url: /tocpage
output: pdf
type: frontmatter
```
Leave the output as `output: pdf` for these frontmatter pages so that they don't appear in the web output.
For more detail on the sidebar, see [Sidebar navigation][mydoc_sidebar_navigation] and [YAML tutorial][mydoc_yaml_tutorial].
## Relative links and offline viewing
This theme uses relative links throughout so that you can view the site offline and not worry about which server or directory you're hosting it. It's common with tech docs to push content to an internal server for review prior to pushing the content to an external server for publication. Because of the need for seamless transferrence from one host to another, the site has to use relative links.
To view pages locally on your machine (without the Jekyll preview server), they need to have the `.html` extension. The `permalink` property in the page's frontmatter (without surrounding slashes) is what pushes the files into the root directory when the site builds.
## Page frontmatter
When you write pages, include these same frontmatter properties with each page:
```yaml
---
title: "Some title"
tags: [sample1, sample2]
keywords: keyword1, keyword2, keyword3
last_updated: Month day, year
summary: "optional summary here"
sidebar: sidebarname
permalink: filename.html
---
```
(You will customize the values for each of these properties, of course.)
For titles, surrounding the title in quotes is optional, but if you have a colon in the title, you must surround the title with quotation marks. If you have a quotation mark inside the title, escape it first with a backlash `\`.
Values for `keywords` get populated into the metadata of the page for SEO.
Values for `tags` must be defined in your \_data/tags.yml list. You also need a corresponding tag file inside the tags folder that follows the same pattern as the other tag files shown in the tags folder. (Jekyll won't auto-create these tag files.)
If you don't want the mini-TOC to show on a page (such as for the homepage or landing pages), add `toc: false` in the frontmatter.
The `permalink` value should be the same as your filename and include the ".html" file extension.
For more detail, see [Pages][mydoc_pages].
## Where to store your documentation topics
You can store your files for each product inside subfolders following the pattern shown in the theme. For example, product1, product2, etc, can be stored in their own subfolders inside the \_pages directory. Inside \_pages, you can store your topics inside sub-subfolders or sub-sub-folders to your heart's content. When Jekyll builds your site, it will pull the topics into the root directory and use the permalink for the URL.
Note that product1, product2, and mydoc are all just sample content to demonstrate how to add multiple products into the theme. You can freely delete that content.
For more information, see [Pages][mydoc_pages] and [Posts][mydoc_posts].
## Configure the top navigation
The top navigation bar's menu items are set through the \_data/topnav.yml file. Use the top navigation bar to provide links for navigating from one product to another, or to navigate to external resources.
For external URLs, use `external_url` in the item property, as shown in the example topnav.yml file. For internal links, use `url` the same was you do in the sidebar data files.
Note that the topnav has two sections: `topnav` and `topnav_dropdowns`. The topnav section contains single links, while the `topnav_dropdowns` section contains dropdown menus. The two sections are independent of each other.
## Generating PDF
If you want to generate PDF, you'll need a license for [Prince XML](http://www.princexml.com/). You will also need to [install Prince](http://www.princexml.com/doc/installing/). You can generate PDFs by product (but not for every product on the site combined together into one massive PDF). Prince will work even without a license, but it will imprint a small Prince image on the first page, and you're supposed to buy the license to use it.
If you're on Windows, install [Git Bash client](https://git-for-windows.github.io/) rather than using the default Windows command prompt.
Open up the css/printstyles.css file and customize the email address (`youremail@domain.com`) that is listed there. This email address appears in the bottom left footer of the PDF output. You'll also need to create a PDF configuration file following the examples shown in the pdfconfigs folder, and also customize some build scripts following the same pattern shown in the root: pdf-product1.sh
See the section on [Generating PDFs][mydoc_generating_pdfs] for more details about setting the theme up for this output.
## Blogs / News
For blog posts, create your markdown files in the \_posts folder following the sample formats. Post file names always begin with the date (YYYY-MM-DD-title).
The news/news.html file displays the posts, and the news_archive.html file shows a yearly history of posts. In documentation, you might use the news to highlight product features outside of your documentation, or to provide release notes and other updates.
See [Posts][mydoc_posts] for more information.
## Markdown
This theme uses [kramdown markdown](http://kramdown.gettalong.org/). kramdown is similar to Github-flavored Markdown, except that when you have text that intercepts list items, the spacing of the intercepting text must align with the spacing of the first character after the space of a numbered list item. Basically, with your list item numbering, use two spaces after the dot in the number, like this:
```
1. First item
2. Second item
3. Third item
```
When you want to insert paragraphs, notes, code snippets, or other matter in between the list items, use four spaces to indent. The four spaces will line up with the first letter of the list item (the <b>F</b>irst or <b>S</b>econd or <b>T</b>hird).
```
1. First item
```
alert("hello");
```
2. Second item
Some pig!
3. Third item
```
See the topics under "Formatting" in the sidebar for more information.
## Automated links
If you want to use an automated system for managing links, see [Automated Links][mydoc_hyperlinks.html#automatedlinks]. This approach automatically creates a list of Markdown references to simplify linking.
## Other instructions
The content here is just a getting started guide only. For other details in working with the theme, see the various sections in the sidebar.
{% include links.html %}
This is the top-level page

11
pages/merlin6-user-guide/merlin6-user-guide.md
View File

@ -1,11 +0,0 @@
---
layout: default
title: Merlin6 User Guide
nav_order: 10
has_children: true
permalink: /docs/merlin6-user-guide.html
---
# Merlin6 User Guide
Wellcome to the PSI Merlin6 Cluster.

22
pages/merlin6-user-guide/contact.md → pages/merlin6/contact.md
View File

@ -1,19 +1,11 @@
---
layout: default
title: Contact
parent: Merlin6 User Guide
nav_order: 2
---
# Contact
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
tags:
keywords:
last_updated: 13 June 2019
summary: "Contact information for merlin support"
sidebar: merlin6_sidebar
permalink: /merlin6/contact.html
---
## Support
@ -44,7 +36,7 @@ An official mail list is available for contacting Merlin6 Administrators:
Is *strictly* recommended to register to the Merlin Users mail list:
* <merlin-users@lists.psi.ch>
* please subscribe to this list to receive updates about Merlin6 general
* please subscribe to this list to receive updates about Merlin6 general
information, interventions and system improvements useful for users.
* Users can be subscribed in two ways:
* [Sympa Link](https://psilists.ethz.ch/sympa/info/merlin-users)

26
pages/merlin6-user-guide/introduction.md → pages/merlin6/introduction.md
View File

@ -1,26 +1,18 @@
---
layout: default
title: Introduction
parent: Merlin6 User Guide
nav_order: 1
---
# Introduction
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
tags:
keywords:
last_updated: 13 June 2019
summary: "Merlin 6 cluster overview"
sidebar: merlin6_sidebar
permalink: /merlin6/introduction.html
---
## About Merlin6
Merlin6 is a the official PSI Local HPC cluster for development and mission-critical applications that has been built in 2019. It replaces the Merlin5 cluster.
Merlin6 is designed to be extensible, so is technically possible to add more compute nodes and cluster storage without significant increase of the costs of the manpower and
Merlin6 is designed to be extensible, so is technically possible to add more compute nodes and cluster storage without significant increase of the costs of the manpower and
the operations.
Merlin6 is mostly based on CPU resources, but also contains a small amount of GPU-based resources which are mostly used by the BIO experiments.
@ -102,8 +94,8 @@ The solution is equipped with 334 x 10TB disks providing a useable capacity of 2
Merlin6 cluster connectivity is based on the [Infiniband](https://en.wikipedia.org/wiki/InfiniBand) technology. This allows fast access with very low latencies to the data as well as running
extremely efficient MPI-based jobs:
* Connectivity amongst different computing nodes on different chassis ensures up to 1200Gbps of aggregated bandwidth.
* Inter connectivity (communication amongst computing nodes in the same chassis) ensures up to 2400Gbps of aggregated bandwidth.
* Connectivity amongst different computing nodes on different chassis ensures up to 1200Gbps of aggregated bandwidth.
* Inter connectivity (communication amongst computing nodes in the same chassis) ensures up to 2400Gbps of aggregated bandwidth.
* Communication to the storage ensures up to 800Gbps of aggregated bandwidth.
Merlin6 cluster currently contains 5 Infiniband Managed switches and 3 Infiniband Unmanaged switches (one per HP Apollo chassis):

11
pages/merlin6/merlin6-user-guide.md Normal file
View File

@ -0,0 +1,11 @@
---
title: Merlin6 User Guide
tags:
keywords:
last_updated: 13 June 2019
summary: "Everything you need to know to run jobs"
sidebar: merlin6_sidebar
permalink: /merlin6/user-guide.html
---
Welcome to the PSI Merlin6 Cluster.

138
pages/merlin6-user-guide/using-merlin6.md → pages/merlin6/using-merlin6.md
View File

@ -1,22 +1,14 @@
---
layout: default
title: Using Merlin6
parent: Merlin6 User Guide
nav_order: 3
tags:
keywords:
last_updated: 13 June 2019
summary: "Everything you need to know to run jobs"
sidebar: merlin6_sidebar
permalink: /merlin6/use.html
---
# Using Merlin6
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Important: Code of Conduct
## Important: Code of Conduct
The basic principle is courtesy and consideration for other users.
@ -38,7 +30,7 @@ The system administrator has the right to block the access to Merlin6 for an acc
### HowTo: Request Access to Merlin6
* PSI users with their Linux accounts belonging to the *svc-cluster_merlin6* group are allowed to use Merlin6.
* PSI users with their Linux accounts belonging to the *svc-cluster_merlin6* group are allowed to use Merlin6.
* Registration for Merlin6 access must be done through [PSI Service Now](https://psi.service-now.com/psisp)
* Please open it as an Incident request, with subject: ``[Merlin6] Access Request for user '<username>'``
@ -47,28 +39,28 @@ The system administrator has the right to block the access to Merlin6 for an acc
### HowTo: Access to Merlin6
Use SSH to access the login nodes:
* <tt><b>merlin-l-01.psi.ch</b></tt> ("merlin" '-' 'el' '-' 'zero' 'one')
* <tt><b>merlin-l-02.psi.ch</b></tt> ("merlin" '-' 'el' '-' 'zero' 'two')
* <tt><b>merlin-l-01.psi.ch</b></tt> ("merlin" '-' 'el' '-' 'zero' 'one')
* <tt><b>merlin-l-02.psi.ch</b></tt> ("merlin" '-' 'el' '-' 'zero' 'two')
Examples:
<pre>
ssh -Y merlin-l-01
ssh -Y merlin-l-01
ssh -Y bond_j@merlin-l-02.psi.ch
</pre>
<!--
### Home and Data Directories
### Home and Data Directories
Default quota for the home directory */gpfs/home/$USER* is 10GB.
Until a service for an automatic backup of the home directories is announced
to be in production, the users are responsible for managing the backups
of their home directories.
Default quota for the home directory */gpfs/home/$USER* is 10GB.
Until a service for an automatic backup of the home directories is announced
to be in production, the users are responsible for managing the backups
of their home directories.
The data directories */gpfs/data/$USER* have much larger quotas per user (default is 1TB, extendible on request) then the home directories,
but there will be no automatic backup of the data directories.
The users are fully responsible for backup and restore operations
in the data directories.
The data directories */gpfs/data/$USER* have much larger quotas per user (default is 1TB, extendible on request) then the home directories,
but there will be no automatic backup of the data directories.
The users are fully responsible for backup and restore operations
in the data directories.
Command to see your quota on merlin5:
<pre>
/usr/lpp/mmfs/bin/mmlsquota -u $USER --block-size auto merlin5
@ -76,7 +68,7 @@ Command to see your quota on merlin5:
### Scratch disk and Temporary Files
A */scratch* partition of ~50GB is available on each computing node. This partition should be the one used by the users for creating temporary files and/or
A */scratch* partition of ~50GB is available on each computing node. This partition should be the one used by the users for creating temporary files and/or
directories that are needed by running jobs. Temporary files *must be deleted at the end of the job*.
Example of how to use the */scratch* disk:
@ -84,7 +76,7 @@ Example of how to use the */scratch* disk:
<pre>
#!/bin/bash
#SBATCH --partition=merlin # name of slurm partition to submit
#SBATCH --time=2:00:00 # limit the execution of this job to 2 hours, see sinfo for the max. allowance
#SBATCH --time=2:00:00 # limit the execution of this job to 2 hours, see sinfo for the max. allowance
#SBATCH --nodes=4 # you request a 4 nodes
<b># Create scratch directory</b>
@ -101,12 +93,12 @@ mkdir -p ${SCRATCHDIR}</i>
<i>rmdir /scratch/$(id -un)</i>
</pre>
### Using Batch System to Submit Jobs to Merlin5
### Using Batch System to Submit Jobs to Merlin5
The Slurm Workload Manager is used on Merlin5 to manage and schedule jobs.
Please see "man slurm" and references therein for more details.
There are many tutorials and howtos on Slurm elsewhere, e.g. at CSCS.
We shall provide some typical examples for submitting different types of jobs.
The Slurm Workload Manager is used on Merlin5 to manage and schedule jobs.
Please see "man slurm" and references therein for more details.
There are many tutorials and howtos on Slurm elsewhere, e.g. at CSCS.
We shall provide some typical examples for submitting different types of jobs.
Useful commands for the slurm:
<pre>
@ -127,9 +119,9 @@ sprio -l # to view the factors that comprise a job's scheduling priority
<pre>
#!/bin/bash
#SBATCH --partition=merlin # name of slurm partition to submit
#SBATCH --time=2:00:00 # limit the execution of this job to 2 hours, see sinfo for the max. allowance
#SBATCH --time=2:00:00 # limit the execution of this job to 2 hours, see sinfo for the max. allowance
#SBATCH --nodes=4 # you request a 4 nodes
hostname # will print one name, since executed on one node
echo
module load gcc/6.2.0 openmpi/1.10.2 hdf5/1.8.17
@ -149,10 +141,10 @@ squeue # check it's status
<pre>
#!/bin/bash
#SBATCH --partition=merlin # name of slurm partition to submit
#SBATCH --time=2:00:00 # limit the execution of this job to 2 hours, see sinfo for the max. allowance
#SBATCH --nodes=2 # number of nodes
#SBATCH --time=2:00:00 # limit the execution of this job to 2 hours, see sinfo for the max. allowance
#SBATCH --nodes=2 # number of nodes
#SBATCH --ntasks=24 # number of tasks
hostname # will print one name, since executed on one node
echo
module load gcc/6.2.0 openmpi/1.10.2 hdf5/1.8.17
@ -162,30 +154,30 @@ sleep 60 # useless work occupying 4 merlin nodes
module list
</pre>
In the above example are specified the options *--nodes=2* and *--ntasks=24*. This means that 2 nodes are requested,
In the above example are specified the options *--nodes=2* and *--ntasks=24*. This means that 2 nodes are requested,
and is expected to run 24 tasks. Hence, 24 cores are needed for running that job. Slurm will try to allocate 2 nodes
with similar resources, having at least 12 cores/node.
with similar resources, having at least 12 cores/node.
Usually, 2 nodes with 12 cores/node would fit in the allocation decision. However, other combinations may be possible
(i.e, 2 nodes with 16 cores/node). In this second case, could happen that other users are running jobs in the allocated
nodes (in this example, up to 4 cores per node could be used by other user jobs, having at least 12 cores per node
available, which are the minimum number of tasks/cores required by our job).
Usually, 2 nodes with 12 cores/node would fit in the allocation decision. However, other combinations may be possible
(i.e, 2 nodes with 16 cores/node). In this second case, could happen that other users are running jobs in the allocated
nodes (in this example, up to 4 cores per node could be used by other user jobs, having at least 12 cores per node
available, which are the minimum number of tasks/cores required by our job).
In order to ensure exclusivity of the node, an option *--exclusive* can be used (see below). This will ensure that
the requested nodes are exclusive for the job (no other users jobs will interact with this node, and only completely
free nodes will be allocated).
In order to ensure exclusivity of the node, an option *--exclusive* can be used (see below). This will ensure that
the requested nodes are exclusive for the job (no other users jobs will interact with this node, and only completely
free nodes will be allocated).
<pre>
#SBATCH --exclusive
</pre>
More advanced configurations can be defined and can be combined with the previous examples. More information about advanced
More advanced configurations can be defined and can be combined with the previous examples. More information about advanced
options can be found in the following link: https://slurm.schedmd.com/sbatch.html (or run 'man sbatch').
If you have questions about how to properly execute your jobs, please contact us through merlin-admins@lists.psi.ch. Do not run
advanced configurations unless your are sure of what you are doing.
### Environment Modules
### Environment Modules
On top of the operating system stack we provide different software using the PSI developed
pmodule system. Useful commands:
@ -195,16 +187,16 @@ module load gnuplot/5.2.0 # to load specific version of
module search hdf # try it out to see which version of hdf5 package is provided and with which dependencies
module load gcc/6.2.0 openmpi/1.10.2 hdf5/1.8.17 # load the specific version of hdf5, compiled with specific version of gcc and openmpi
module use unstable # to get access to the packages which are not considered to be fully stable by module provider (may be very fresh version, or not yet tested by community)
module list # to see which software is loaded in your environment
module list # to see which software is loaded in your environment
</pre>
###+ Requests for New Software
###+ Requests for New Software
If you miss some package/version, contact us
### Known Problems and Troubleshooting
### Known Problems and Troubleshooting
###+ Paraview, ANSYS and openGL
###+ Paraview, ANSYS and openGL
Try to use X11(mesa) driver for paraview and ANSYS instead of OpenGL:
<pre>
@ -221,43 +213,43 @@ paraview --mesa
It may happened that your code, compiled on one machine will not be executed on another throwing exception like "(Illegal instruction)".
Check (with "hostname" command) on which of the node you are and compare it with the names from first item. We observe few applications
that can't be run on merlin-c-01..16 because of this problem (notice that these machines are more then 5 years old). Hint: you may
that can't be run on merlin-c-01..16 because of this problem (notice that these machines are more then 5 years old). Hint: you may
choose the particular flavour of the machines for your slurm job, check the "--cores-per-node" option for sbatch:
<pre>
sbatch --cores-per-socket=8 Script.sh # will filter the selection of the machine and exclude the oldest one, merlin-c-01..16
</pre>
###+ Troubleshooting SSH
###+ Troubleshooting SSH
Use the ssh command with the "-vvv" option and copy and paste (no screenshot please)
the output to your request in Service-Now. Example
Use the ssh command with the "-vvv" option and copy and paste (no screenshot please)
the output to your request in Service-Now. Example
<pre>
ssh -Y -vvv bond_j@merlin-l-01
ssh -Y -vvv bond_j@merlin-l-01
</pre>
###+ Troubleshooting SLURM
If one copies Slurm commands or batch scripts from another cluster,
they may need some changes (often minor) to run successfully on Merlin5.
Examine carefully the error message, especially concerning the options
used in the slurm commands.
If one copies Slurm commands or batch scripts from another cluster,
they may need some changes (often minor) to run successfully on Merlin5.
Examine carefully the error message, especially concerning the options
used in the slurm commands.
Try to submit jobs using the examples given in the section "Using Batch System to Submit Jobs to Merlin5".
If you can run successfully an example for a type of job (!OpenMP, MPI) similar to your one,
try to edit the example to run your application.
Try to submit jobs using the examples given in the section "Using Batch System to Submit Jobs to Merlin5".
If you can run successfully an example for a type of job (!OpenMP, MPI) similar to your one,
try to edit the example to run your application.
If the problem remains, then, in your request in Service-Now, describe the problem in details that
If the problem remains, then, in your request in Service-Now, describe the problem in details that
are needed to reproduce it. Include the output of the following commands:
<pre>
date
hostname
pwd
hostname
pwd
module list
# All slurm commands used with the corresponding output
</pre>
Do not delete any output and error files generated by Slurm.
Make a copy of the failed job script if you like to edit it meanwhile.
Do not delete any output and error files generated by Slurm.
Make a copy of the failed job script if you like to edit it meanwhile.
-->

22
pages/mydoc/mydoc_about.md
View File

@ -1,22 +0,0 @@
---
title: About the theme's author
keywords: documentation theme, jekyll, technical writers, help authoring tools, hat replacements
last_updated: July 3, 2016
tags: [getting_started]
summary: "I have used this theme for projects that I've worked on as a professional technical writer."
sidebar: mydoc_sidebar
permalink: mydoc_about.html
folder: mydoc
---
My name is Tom Johnson, and I'm a technical writer, blogger, and podcaster based in San Jose, California. For more details, see my [technical writing blog](http://idratherbewriting.com) and my [course on API documentation](http://idratherbewriting.com/learnapidoc/). See [my blog's about page](http://idratherbewriting.com/aboutme/) for more details about me.
I have used this theme and variations of it for various documentation projects. This theme has undergone several major iterations, and now it's fairly stable and full of all the features that I need. You are welcome to use it for your documentation projects for free.
I think this theme does pretty much everything that you can do with something like OxygenXML, but without the constraints of structured authoring. Everything is completely open and changeable, so if you start tinkering around with the theme's files, you can break things. But it's completely empowering as well!
With a completely open architecture and code base, you can modify the code to make it do exactly what you want, without having to jump through all kinds of confusing or proprietary code.
If there's a feature you need but it isn't available here, let me know and I might add it. Alternatively, if you fork the theme, I would love to see your modifications and enhancements. Thanks for using Jekyll.
{% include links.html %}

254
pages/mydoc/mydoc_about_ruby_gems_bundler.md
View File

@ -1,254 +0,0 @@
---
title: About Ruby, Gems, Bundler, and other prerequisites
tags: [getting_started, troubleshooting]
keywords:
summary: "Ruby is a programming language you must have on your computer in order to build Jekyll locally. Ruby has various gems (or plugins) that provide various functionality. Each Jekyll project usually requires certain gems."
sidebar: mydoc_sidebar
permalink: mydoc_about_ruby_gems_etc.html
folder: mydoc
---
## About Ruby
Jekyll runs on Ruby, a programming language. You have to have Ruby on your computer in order to run Ruby-based programs like Jekyll. Ruby is installed on the Mac by default, but you must add it to Windows.
## About Ruby Gems
Ruby has a number of plugins referred to as "gems." Just because you have Ruby doesn't mean you have all the necessary Ruby gems that your program needs to run. Gems provide additional functionality for Ruby programs. There are thousands of [Rubygems](https://rubygems.org/) available for you to use.
Some gems depend on other gems for functionality. For example, the Jekyll gem might depend on 20 other gems that must also be installed.
Each gem has a version associated with it, and not all gem versions are compatible with each other.
## Rubygem package managers
[Bundler](http://bundler.io/) is a gem package manager for Ruby, which means it goes out and gets all the gems you need for your Ruby programs. If you tell Bundler you need the [jekyll gem](https://rubygems.org/gems/jekyll), it will retrieve all the dependencies on the jekyll gem as well -- automatically.
Not only does Bundler retrieve the right gem dependencies, but it's smart enough to retrieve the right versions of each gem. For example, if you get the [github-pages](https://rubygems.org/gems/github-pages) gem, it will retrieve all of these other gems:
```
github-pages-health-check = 1.1.0
jekyll = 3.0.3
jekyll-coffeescript = 1.0.1
jekyll-feed = 0.4.0
jekyll-gist = 1.4.0
jekyll-github-metadata = 1.9.0
jekyll-mentions = 1.1.2
jekyll-paginate = 1.1.0
jekyll-redirect-from = 0.10.0
jekyll-sass-converter = 1.3.0
jekyll-seo-tag = 1.3.2
jekyll-sitemap = 0.10.0
jekyll-textile-converter = 0.1.0
jemoji = 0.6.2
kramdown = 1.10.0
liquid = 3.0.6
mercenary ~> 0.3
rdiscount = 2.1.8
redcarpet = 3.3.3
RedCloth = 4.2.9
rouge = 1.10.1
terminal-table ~> 1.
```
See how Bundler retrieved version 3.0.3 of the jekyll gem, even though (as of this writing) the latest version of the jekyll gem is 3.1.2? That's because github-pages is only compatible up to jekyll 3.0.3. Bundler handles all of this dependency and version compatibility for you.
Trying to keep track of which gems and versions are appropriate for your project can be a nightmare. This is the problem Bundler solves. As explained on [Bundler.io](http://bundler.io/):
> Bundler provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed.
>
> Bundler is an exit from dependency hell, and ensures that the gems you need are present in development, staging, and production. Starting work on a project is as simple as bundle install.
## Gemfiles
Bundler looks in a project's "Gemfile" (no file extension) to see which gems are required by the project. The Gemfile lists the source and then any gems, like this:
```
source "https://rubygems.org"
gem 'github-pages'
gem 'jekyll'
```
The source indicates the site where Bundler will retrieve the gems: [https://rubygems.org](https://rubygems.org).
The gems it retrieves are listed separately on each line.
Here no versions are specified. Sometimes gemfiles will specify the versions like this:
```
gem 'kramdown', '1.0'
```
This means Bundler should get version 1.0 of the kramdown gem.
To specify a subset of versions, the Gemfile looks like this:
```
gem 'jekyll', '~> 2.3'
```
The `~>` sign means greater than or equal to the *last digit before the last period in the number*.
Here it will get any gem equal to 2.3 but less than 3.0.
If it adds another digit, the scope is affected:
```
gem `jekyll`, `~>2.3.1'
```
This means to get any gem equal to 2.3.1 but less than 2.4.
If it looks like this:
```
gem 'jekyll', '~> 3.0', '>= 3.0.3'
```
This will get any Jekyll gem between versions 3.0 and up to 3.0.3.
See this [Stack Overflow post](http://stackoverflow.com/questions/5170547/what-does-tilde-greater-than-mean-in-ruby-gem-dependencies) for more details.
## Gemfile.lock
After Bundler retrieves and installs the gems, it makes a detailed list of all the gems and versions it has installed for your project. The snapshot of all gems + versions installed is stored in your Gemfile.lock file, which might look like this:
```
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
activesupport (4.2.5.1)
i18n (~> 0.7)
json (~> 1.7, >= 1.7.7)
minitest (~> 5.1)
thread_safe (~> 0.3, >= 0.3.4)
tzinfo (~> 1.1)
addressable (2.3.8)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.10.0)
colorator (0.1)
ethon (0.8.1)
ffi (>= 1.3.0)
execjs (2.6.0)
faraday (0.9.2)
multipart-post (>= 1.2, < 3)
ffi (1.9.10)
gemoji (2.1.0)
github-pages (52)
RedCloth (= 4.2.9)
github-pages-health-check (= 1.0.1)
jekyll (= 3.0.3)
jekyll-coffeescript (= 1.0.1)
jekyll-feed (= 0.4.0)
jekyll-gist (= 1.4.0)
jekyll-mentions (= 1.0.1)
jekyll-paginate (= 1.1.0)
jekyll-redirect-from (= 0.9.1)
jekyll-sass-converter (= 1.3.0)
jekyll-seo-tag (= 1.3.1)
jekyll-sitemap (= 0.10.0)
jekyll-textile-converter (= 0.1.0)
jemoji (= 0.5.1)
kramdown (= 1.9.0)
liquid (= 3.0.6)
mercenary (~> 0.3)
rdiscount (= 2.1.8)
redcarpet (= 3.3.3)
rouge (= 1.10.1)
terminal-table (~> 1.4)
github-pages-health-check (1.0.1)
addressable (~> 2.3)
net-dns (~> 0.8)
octokit (~> 4.0)
public_suffix (~> 1.4)
typhoeus (~> 0.7)
html-pipeline (2.3.0)
activesupport (>= 2, < 5)
nokogiri (>= 1.4)
i18n (0.7.0)
jekyll (3.0.3)
colorator (~> 0.1)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.1)
kramdown (~> 1.3)
liquid (~> 3.0)
mercenary (~> 0.3.3)
rouge (~> 1.7)
safe_yaml (~> 1.0)
jekyll-coffeescript (1.0.1)
coffee-script (~> 2.2)
jekyll-feed (0.4.0)
jekyll-gist (1.4.0)
octokit (~> 4.2)
jekyll-mentions (1.0.1)
html-pipeline (~> 2.3)
jekyll (~> 3.0)
jekyll-paginate (1.1.0)
jekyll-redirect-from (0.9.1)
jekyll (>= 2.0)
jekyll-sass-converter (1.3.0)
sass (~> 3.2)
jekyll-seo-tag (1.3.1)
jekyll (~> 3.0)
jekyll-sitemap (0.10.0)
jekyll-textile-converter (0.1.0)
RedCloth (~> 4.0)
jekyll-watch (1.3.1)
listen (~> 3.0)
jemoji (0.5.1)
gemoji (~> 2.0)
html-pipeline (~> 2.2)
jekyll (>= 2.0)
json (1.8.3)
kramdown (1.9.0)
liquid (3.0.6)
listen (3.0.6)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9.7)
mercenary (0.3.5)
mini_portile2 (2.0.0)
minitest (5.8.4)
multipart-post (2.0.0)
net-dns (0.8.0)
nokogiri (1.6.7.2)
mini_portile2 (~> 2.0.0.rc2)
octokit (4.2.0)
sawyer (~> 0.6.0, >= 0.5.3)
public_suffix (1.5.3)
rb-fsevent (0.9.7)
rb-inotify (0.9.7)
ffi (>= 0.5.0)
rdiscount (2.1.8)
redcarpet (3.3.3)
rouge (1.10.1)
safe_yaml (1.0.4)
sass (3.4.21)
sawyer (0.6.0)
addressable (~> 2.3.5)
faraday (~> 0.8, < 0.10)
terminal-table (1.5.2)
thread_safe (0.3.5)
typhoeus (0.8.0)
ethon (>= 0.8.0)
tzinfo (1.2.2)
thread_safe (~> 0.1)
PLATFORMS
ruby
DEPENDENCIES
github-pages
jekyll
BUNDLED WITH
1.11.2
```
You can always delete the Gemlock file and run Bundle install again to get the latest versions. You can also run `bundle update`, which will ignore the Gemlock file to get the latest versions of each gem.
To learn more about Bundler, see [Bundler's Purpose and Rationale](http://bundler.io/rationale.html).
{% include links.html %}

27
pages/mydoc/mydoc_adding_tooltips.md
View File

@ -1,27 +0,0 @@
---
title: Tooltips
tags: [formatting]
keywords: popovers, tooltips, user interface text, glossaries, definitions
last_updated: July 3, 2016
summary: "You can add tooltips to any word, such as an acronym or specialized term. Tooltips work well for glossary definitions, because you don't have to keep repeating the definition, nor do you assume the reader already knows the word's meaning."
sidebar: mydoc_sidebar
permalink: mydoc_adding_tooltips.html
folder: mydoc
---
## Creating tooltips
Because this theme is built on Bootstrap, you can simply use a specific attribute on an element to insert a tooltip.
Suppose you have a glossary.yml file inside your \_data folder. You could pull in that glossary definition like this:
{% raw %}
```html
<a href="#" data-toggle="tooltip" data-original-title="{{site.data.glossary.jekyll_platform}}">Jekyll</a> is my favorite tool for building websites.
```
{% endraw %}
This renders to the following:
<a href="#" data-toggle="tooltip" data-original-title="{{site.data.glossary.jekyll_platform}}">Jekyll</a> is my favorite tool for building websites.
{% include links.html %}

211
pages/mydoc/mydoc_alerts.md
View File

@ -1,211 +0,0 @@
---
title: Alerts
tags: [formatting]
keywords: notes, tips, cautions, warnings, admonitions
last_updated: July 3, 2016
summary: "You can insert notes, tips, warnings, and important alerts in your content. These notes make use of Bootstrap styling and are available through data references such as site.data.alerts.note."
sidebar: mydoc_sidebar
permalink: mydoc_alerts.html
folder: mydoc
---
## About alerts
Alerts are little warnings, info, or other messages that you have called out in special formatting. In order to use these alerts or callouts, reference the appropriate value stored in the alerts.yml file as described in the following sections.
## Alerts
Similar to [inserting images][mydoc_images], you insert alerts through various includes that have been developed. These includes provide templates through which you pass parameters to easily populate the right HTML code.
```
{%raw%}{% include note.html content="This is my note. All the content I type here is treated as a single paragraph." %}{% endraw%}
```
Here's the result:
{% include note.html content="This is my note. All the content I type here is treated as a single paragraph." %}
With alerts, there's just one include property:
| Property | description |
|-------|--------|
| content | The content for the alert. |
## Using block level tags inside the alerts {#blockleveltags}
If you need multiple paragraphs, enter `<br/><br/>` tags. This is because block level tags aren't allowed here, as Kramdown is processing the content as Markdown despite the fact that the content is surrounded by HTML tags. Here's an example with a break:
```
{%raw%}{% include note.html content="This is my note. All the content I type here is treated as a single paragraph. <br/><br/> Now I'm typing on a new line." %}{% endraw%}
```
Here's the result:
{% include note.html content="This is my note. All the content I type here is treated as a single paragraph. <br/><br/> Now I'm typing on a new line." %}
The include uses `markdown="span"` as an attribute, which means kramdown will process the entire `content` as a span. You can't use block elements such as `p` or `div` or `pre`. If you need these elements, you can either manually surround the content with the HTML from the include, or you can use these tags:
```
{% raw %}{{site.data.alerts.note}}
<p>This is my note.</p>
<pre>
def foo(x):<br>
&nbsp;&nbsp;&nbsp;&nbsp;return x+1
</pre>
{{site.data.alerts.end}}{% endraw %}
```
**Result:**
{{site.data.alerts.note}}
<p>This is my note.</p>
<pre>
def foo(x):<br>
&nbsp;&nbsp;&nbsp;&nbsp;return x+1
</pre>
{{site.data.alerts.end}}
The same Bootstrap code from the alert is stored in yaml files inside the \_data folder. (This was how I previously implemented this code, but since this method was prone to error and didn't trigger any build warnings or failures when incorrectly coded, I changed the approach to use includes instead.)
## Types of alerts available
There are four types of alerts you can leverage:
* note.html
* tip.html
* warning.html
* important.html
They function the same except they have a different color, icon, and alert word. You include the different types by selecting the include template you want. Here are samples of each alert:
{% include note.html content="This is my note." %}
{% include tip.html content="This is my tip." %}
{% include warning.html content="This is my warning." %}
{% include important.html content="This is my important info." %}
These alerts leverage includes stored in the \_include folder. The `content` option is a parameter that you pass to the include. In the include, the parameter is passed like this:
```
{% raw %}<div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> {{include.content}}{% endraw %}</div>
```
The content in `content="This is my note."` gets inserted into the `{% raw %}{{include.content}}}{% endraw %}` part of the template. You can follow this same pattern to build additional includes. See this [Jekyll screencast on includes](http://jekyll.tips/jekyll-casts/includes/) or [this screencast](https://www.youtube.com/watch?v=TJcn_PJ2100) for more information.
## Callouts
There's another type of callout available called callouts. This format is typically used for longer callout that spans more than one or two paragraphs, but really it's just a stylistic preference whether to use an alert or callout.
Here's the syntax for a callout:
```
{% raw %}{% include callout.html content="This is my callout. It has a border on the left whose color you define by passing a type parameter. I typically use this style of callout when I have more information that I want to share, often spanning multiple paragraphs. " type="primary" %} {% endraw %}
```
Here's the result:
{% include callout.html content="This is my callout. It has a border on the left whose color you define by passing a type parameter. I typically use this style of callout when I have more information that I want to share, often spanning multiple paragraphs." type="primary" %}
The available properties for callouts are as follows:
| Property | description |
|-------|--------|
| content | The content for the callout. |
| type | The style for the callout. Options are `danger`, `default`, `primary`, `success`, `info`, and `warning`.|
The types just define the color of the left border. Each of these callout types get inserted as a class name in the callout template. These class names correspond with styles in Bootstrap. These classes are common Bootstrap class names whose style attributes differ depending on your Bootstrap theme and style definitions.
Here's an example of each different type of callout:
{% include callout.html content="This is my **danger** type callout. It has a border on the left whose color you define by passing a type parameter." type="danger" %}
{% include callout.html content="This is my **default** type callout. It has a border on the left whose color you define by passing a type parameter." type="default" %}
{% include callout.html content="This is my **primary** type callout. It has a border on the left whose color you define by passing a type parameter." type="primary" %}
{% include callout.html content="This is my **success** type callout. It has a border on the left whose color you define by passing a type parameter." type="success" %}
{% include callout.html content="This is my **info** type callout. It has a border on the left whose color you define by passing a type parameter." type="info" %}
{% include callout.html content="This is my **warning** type callout. It has a border on the left whose color you define by passing a type parameter." type="warning" %}
Now that in contrast to alerts, callouts don't include the alert word (note, tip, warning, or important). You have to manually include it inside `content` if you want it.
To include paragraph breaks, use `<br/><br/>` inside the callout:
```
{% raw %}{% include callout.html content="**Important information**: This is my callout. It has a border on the left whose color you define by passing a type parameter. I typically use this style of callout when I have more information that I want to share, often spanning multiple paragraphs. <br/><br/>Here I am starting a new paragraph, because I have lots of information to share. You may wonder why I'm using line breaks instead of paragraph tags. This is because Kramdown processes the Markdown here as a span rather than a div (for whatever reason). Be grateful that you can be using Markdown at all inside of HTML. That's usually not allowed in Markdown syntax, but it's allowed here." type="primary" %} {% endraw %}
```
Here's the result:
{% include callout.html content="**Important information**: This is my callout. It has a border on the left whose color you define by passing a type parameter. I typically use this style of callout when I have more information that I want to share, often spanning multiple paragraphs. <br/><br/>Here I am starting a new paragraph, because I have lots of information to share. You may wonder why I'm using line breaks instead of paragraph tags. This is because Kramdown processes the Markdown here as a span rather than a div (for whatever reason). Be grateful that you can be using Markdown at all inside of HTML. That's usually not allowed in Markdown syntax, but it's allowed here." type="primary" %}
## Use Liquid variables inside parameters with includes
Suppose you have a product name or some other property that you're storing as a variable in your configuration file (\_config.yml), and you want to use this variable in the `content` parameter for your alert or callout. You will get an error if you use Liquid syntax inside a include parameter. For example, this syntax will produce an error:
```
{%raw%}{% include note.html content="The {{site.company}} is pleased to announce an upcoming release." %}{%endraw%}
```
The error will say something like this:
```
Liquid Exception: Invalid syntax for include tag. File contains invalid characters or sequences: ... Valid syntax: {%raw%}{% include file.ext param='value' param2='value' %}{%endraw%}
```
To use variables in your include parameters, you must use the "variable parameter" approach. First you use a `capture` tag to capture some content. Then you reference this captured tag in your include. Here's an example.
In my site configuration file (\_congfig.yml), I have a property called `company_name`.
```yaml
company_name: Your company
```
I want to use this variable in my note include.
First, before the note I capture the content for my note's include like this:
```liquid
{%raw%}{% capture company_note %}The {{site.company_name}} company is pleased to announce an upcoming release.{% endcapture %}{%endraw%}
```
Now reference the `company_note` in your `include` parameter like this:
```
{%raw%}{% include note.html content=company_note}{%endraw%}
```
Here's the result:
{% capture company_note %}The {{site.company_name}} is pleased to announce an upcoming release.{% endcapture %}
{% include note.html content=company_note %}
Note the omission of quotation marks with variable parameters.
Also note that instead of storing the variable in your site's configuration file, you could also put the variable in your page's frontmatter. Then instead of using `{%raw%}{{site.company_name}}{%endraw%}` you would use `{%raw%}{{page.company_name}}{%endraw%}`.
## Markdown inside of callouts and alerts
You can use Markdown inside of callouts and alerts, even though this content actually gets inserted inside of HTML in the include. This is one of the advantages of kramdown Markdown. The include template has an attribute of `markdown="span"` that allows for the processor to parse Markdown inside of HTML.
## Validity checking
If you have some of the syntax wrong with an alert or callout, you'll see an error when Jekyll tries to build your site. The error may look like this:
```
{% raw %}Liquid Exception: Invalid syntax for include tag: content="This is my **info** type callout. It has a border on the left whose color you define by passing a type parameter. type="info" Valid syntax: {% include file.ext param='value' param2='value' %} in mydoc/mydoc_alerts.md {% endraw %}
```
These errors are a good thing, because it lets you know there's an error in your syntax. Without the errors, you may not realize that you coded something incorrectly until you see the lack of alert or callout styling in your output.
In this case, the quotation marks aren't set correctly. I forgot the closing quotation mark for the content parameter include.
## Blast a warning to users on every page
If you want to blast a warning to users on every page, add the alert or callout to the \_layouts/page.html page right below the frontmatter. Every page using the page layout (all, by default) will show this message.
{% include links.html %}

35
pages/mydoc/mydoc_atom_text_editor.md
View File

@ -1,35 +0,0 @@
---
title: Atom Text Editor
keywords: atom, text editor,
last_updated: March 20, 2016
summary: "Atom is a free text editor that is a favorite tool of many writers because it is free. This page provides some tips for using Atom."
sidebar: mydoc_sidebar
permalink: mydoc_atom_text_editor.html
folder: mydoc
---
If you haven't downloaded [Atom](https://atom.io/), download and install it. Use this as your editor when working with Jekyll. The syntax highlighting is probably the best among the available editors, as it was designed with Jekyll-authoring in mind. However, if you prefer Sublime Text, WebStorm, or some other editor, you can also use that.
Customize the invisibles and tab spacing in Atom:
1. Go to **Atom > Preferences**.
2. On the **Settings** tab, keep the default options but also select the following:
* **Show Invisibles**
* **Soft Wrap**
* For the **Tab Length**, type **4**.
* For the **Tab Type**, select **soft**.
Turn off auto-complete:
1. Go to **Atom > Preferences**.
2. Click the **Packages** tab.
3. Search for **autocomplete-plus**.
4. Disable the autocomplete package.
### Atom Shortcuts
* **Cmd + T**: Find file
* **Cmd + Shift + F**: Find across project
* **Cmd + Alt + S**: Save all
(For Windows, replace "Cmd" with "Ctrl".)

68
pages/mydoc/mydoc_build_arguments.md
View File

@ -1,68 +0,0 @@
---
title: Build arguments
tags: [publishing]
keywords: building, serving, serve, build
last_updated: July 3, 2016
summary: "You use various build arguments with your Jekyll project. You can also create shell scripts to act as shortcuts for long build commands. You can store the commands in iTerm as profiles as well."
sidebar: mydoc_sidebar
permalink: mydoc_build_arguments.html
folder: mydoc
---
## How to build Jekyll sites
The normal way to build the Jekyll site is through the build command:
```
jekyll build
```
To build the site and view it in a live server so that Jekyll rebuilds that site each time you make a change, use the `serve` command:
```
jekyll serve
```
By default, the \_config.yml in the root directory will be used, Jekyll will scan the current directory for files, and the folder `_site` will be used as the output. You can customize these build commands like this:
```
jekyll serve --config configs/myspecialconfig.yml --destination ../doc_outputs
```
Here the `configs/myspecialconfig.yml` file is used instead of `_config.yml`. The destination directory is `../doc_outputs`, which would be one level up from your current directory.
## Shortcuts for the build arguments
If you have a long build argument and don't want to enter it every time in Jekyll, noting all your configuration details, you can create a shell script and then just run the script. Simply put the build argument into a text file and save it with the .sh extension (for Mac) or .bat extension (for Windows). Then run it like this:
```
. myscript.sh
```
My preference is to add the scripts to profiles in iTerm. See [iTerm Profiles][mydoc_iterm_profiles] for more details.
## Stop a server
When you're done with the preview server, press **Ctrl+C** to exit out of it. If you exit iTerm or Terminal without shutting down the server, the next time you build your site, or if you build multiple sites with the same port, you may get a server-already-in-use message.
You can kill the server process using these commands:
```
ps aux | grep jekyll
```
Find the PID (for example, it looks like "22298").
Then type `kill -9 22298` where "22298" is the PID.
To kill all Jekyll instances, use this:
```
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')
```
I recommend creating a profile in iTerm that stores this command. Here's what the iTerm settings look like:
{% include image.html file="killalljekyll.png" caption="iTerm profile settings to kill all Jekyll" %}
{% include links.html %}

197
pages/mydoc/mydoc_build_scripts.md
View File

@ -1,197 +0,0 @@
---
title: 10. Configure the build scripts
tags:
- publishing
keywords: "build scripts, generating outputs, building, publishing"
last_updated: "November 30, 2016"
summary: "You need to customize the build scripts. These script automate the publishing of your PDFs and web outputs through shell scripts on the command line."
series: "Getting Started"
weight: 10
sidebar: mydoc_sidebar
permalink: mydoc_build_scripts.html
folder: mydoc
---
{% include custom/getting_started_series.html %}
## About the build scripts
The mydoc project has 5 build scripts and a script that runs them all. These scripts will require a bit of detail to configure. Every team member who is publishing on the project should set up their folder structure in the way described here.
## Get Set Up
Your command-line terminal opens up to your user name (for example, `Users/tjohnson`). I like to put all of my projects from repositories into a subfolder under my username called "projects." This makes it easy to get to the projects from the command line. You can vary from the project organization I describe here, but following the pattern I outline will make configuration easier.
To set up your projects:
1. Set up your Jekyll theme in a folder called "docs." All of the source files for every project the team is working on should live in this directory. Most likely you already either downloaded or cloned the jekyll-documentation-theme. Just rename the folder to "docs" and move it into the projects folder as shown here.
2. In the same root directory where the docs folder is, create another directory parallel to docs called doc_outputs. 
Thus, your folder structure should be something like this:
```
projects
- docs
- doc_outputs
```
The docs folder contains the source of all your files, while the doc_outputs contains the site outputs.
## Configure the Build Scripts
For the mydocs project, you'll see a series of build scripts for each project. There are 5 build scripts, described in the following sections. Note that you really only need to run the last one, e.g., mydoc_all.sh, because it runs all of the build scripts. But you have to make sure each script is correctly configured so that they all build successfully.
{% include tip.html content="In the descriptions of the build scripts, \"mydoc\" is used as the sample project. Substitute in whatever your real project name is." %}
### mydoc_1_multiserve_pdf.sh
Here's what this script looks like:
```
echo 'Killing all Jekyll instances'
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')
clear
echo "Building PDF-friendly HTML site for Mydoc Writers ..."
jekyll serve --detach --config configs/mydoc/config_writers.yml,configs/mydoc/config_writers_pdf.yml
echo "done"
echo "Building PDF-friendly HTML site for Mydoc Designers ..."
jekyll serve --detach --config configs/mydoc/config_designers.yml,configs/mydoc/config_designers_pdf.yml
echo "done"
echo "All done serving up the PDF-friendly sites. Now let's generate the PDF files from these sites."
echo "Now run . mydoc_2_multibuild_pdf.sh"
```
After killing all existing Jekyll instances that may be running, this script serves up a PDF friendly version of the docs (in HTML format) at the destination specified in the configuration file.
Each of your configuration files needs to have a destination like this: `../doc_outputs/mydoc/adtruth-java`. That is, the project should build in the doc_outputs folder, in a subfolder that matches the project name.
The purpose of this script is to make a version of the HTML output that is friendly to the Prince XML PDF generator. This version of the output strips out the sidebar, topnav, and other components to just render a bare-bones HTML representation of the content.
Customize the script with your own PDF configuration file names.
### mydoc_2_multibuild_pdf.sh
Here's what this script looks like:
```
# Doc Writers
echo "Building the Mydoc Writers PDF ..."
prince --javascript --input-list=../doc_outputs/mydoc/writers-pdf/prince-file-list.txt -o mydoc/files/mydoc_writers_pdf.pdf;
echo "done"
# Doc Designers
echo "Building Mydoc Designers PDF ..."
prince --javascript --input-list=../doc_outputs/mydoc/designers-pdf/prince-file-list.txt -o mydoc/files/mydoc_designers_pdf.pdf;
echo "done"
echo "All done building the PDFs!"
echo "Now build the web outputs: . mydoc_3_multibuild_web.sh"
```
This script builds the PDF output using the Prince command. The script reads the location of the prince-file-list.txt file in the PDF friendly output folder (as defined in the previous script) and builds a PDF.
The Prince build command takes an input parameter (`--input-list=`) that lists where all the pages are (prince-file-list.txt), and then combines all the pages into a PDF, including cross-references and other details. The Prince build command also specifies the output folder (`-o`).
The prince-file-list.txt file (which simply contains a list of URLs to HTML pages) is generated by iterating through the table of contents (mydoc_sidebar.yml) and creating a list of URLs. You can open up prince-file-list.txt in the doc output to ensure that it has a list of absolute URLs (not relative) in order for Prince to build the PDF.
This is one way the configuration file for the PDF-friendly output differs from the HTML output. (If the PDF isn't building, it's because the prince-file-list.txt in the output is empty or it contains relative URLs.)
The Prince build script puts the output PDF into the mydoc/mydoc/files directory. Now you can reference the PDF file in your HTML site. For example, on the homepage you can allow people to download a PDF of the content at files/adtruth_dotnet_pdf.pdf.
### mydoc_3_multibuild_web.sh
Here's what this script looks like:
```
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')
clear
echo "Building Mydoc Writers website..."
jekyll build --config configs/doc/config_writers.yml
# jekyll serve --config configs/doc/config_writers.yml
echo "done"
echo "Building Mydoc Designers website..."
jekyll build --config configs/doc/config_designers.yml
# jekyll serve --config configs/doc/config_designers.yml
echo "done"
echo "All finished building all the web outputs!!!"
echo "Now push the builds to the server with . mydoc_4_publish.sh"
```
After killing all Jekyll instances, this script builds an HTML version of the projects and puts the output into the doc_outputs folder. This is the version of the content that users will mainly navigate. Since the sites are built with relative links, you can browse to the folder on your local machine, double-click the index.html file, and see the site.
The `#` part below the `jekyll build` commands contains a serve command that is there for mere convenience in case you want to serve up just one site among many that you're building. For example, if you don't want to build everything &mdash; just one site &mdash; you might just use the serve command instead. (Anything after # in a YAML file comments out the content.)
### mydoc_4_publish.sh
Here's what this script looks like:
```
echo "remove previous directory and any subdirectories without a warning prompt"
ssh yourusername@yourdomain.com 'rm -rf /var/www/html/yourpublishingdirectory'
echo "push new content into the remote directory"
scp -r -vrC ../mydoc_outputs/doc-writers yourusername@yourdomain:/var/www/html/yourpublishingdirectory
echo "All done pushing doc outputs to the server"
```
This script assumes you're publishing content onto a Linux server.
Change `yourusername` to your own user name.
This script first removes the project folder on /var/www/html/yourpublishingdirectory site and then transfers the content from doc_outputs over to the appropriate folder in /var/www/html/yourpublishingdirectory.
Note that the delete part of the script (`rm -rf`) works really well. It annihilates a folder in a heartbeat and doesn't give you any warning prompts, so make sure you have it set up correctly.
Also, in case you haven't set up the SSH publishing without a password, see [Getting around the password prompts in SCP][mydoc_no_password_prompts_scp]. Otherwise the script will stop and ping you to enter your password for each directory it transfers.
### (Optional) Push to repositories
This script isn't included in the theme, but you might optionally decide to push the built sites into another github repository. For example, if you're using Cloud Cannon to deploy your sites, you can have Cloud Cannon read files from a specific Github repository.
Here's what this script looks like:
```
cd doc_outputs/mydoc/designers
git add --all
git commit -m "publishing latest version of docs"
git push
echo "All done pushing to Github"
echo "Here's the link to download the guides..."
cd ../../docs
```
This final script simply makes a commit into a Github repo for one of your outputs.
The doc_outputs/mydoc/designers contains the site output from mydoc, so when you push content from this folder into Github, you're actually pushing the HTML site output into Github, not the mydoc source files.
Your delivery team can also grab the site output from these repos. After downloading it, the person unzips the folder and sees the website folders inside.
### mydoc_all.sh
Here's what this script looks like:
```
. deviceinsight_1_multiserve_pdf.sh; . deviceinsight_2_multibuild_pdf.sh; . deviceinsight_3_multibuild_web.sh; . deviceinsight_4_publish.sh;
```
This script simply runs the other scripts. To sequence the commands, you just separate them with semicolons. (If you added the optional script, be sure to include it here.)
After you've configured all the scripts, you can run them all by running `. mydoc_all.sh`. You might want to run this script at lunchtime, since it may take about 10 to 20 minutes to completely build the scripts. But note that since everything is now automated, you don't have to do anything at all after executing the script. After the script finishes, everything is published and in the right location.
## Test out the scripts
After setting up and customizing the build scripts, run a few tests to make sure everything is generating correctly. Getting this part right is somewhat difficult and may likely require you to tinker around with the scripts a while before it works flawlessly.
{% include custom/getting_started_series_next.html %}
{% include links.html %}

27
pages/mydoc/mydoc_code_samples.md
View File

@ -1,27 +0,0 @@
---
title: Code samples
tags: [formatting]
keywords: dcode samples syntax highlighting
last_updated: July 3, 2016
datatable: true
summary: "You can use fenced code blocks with the language specified after the first set of backtick fences."
sidebar: mydoc_sidebar
permalink: mydoc_code_samples.html
folder: mydoc
---
## Code Samples
Use fenced code blocks with the language specified, like this:
```js
console.log('hello');
````
**Result:**
```js
console.log('hello');
```
For the list of supported languages you can use (similar to `js` for JavaScript), see [Supported languages](https://github.com/jneen/rouge/wiki/list-of-supported-languages-and-lexers).

40
pages/mydoc/mydoc_collections.md
View File

@ -1,40 +0,0 @@
---
title: Collections
tags: [content_types]
keywords: groups, api, structure
last_updated: July 3, 2016
summary: "Collections are useful if you want to loop through a special folder of pages that you make available in a content API. You could also use collections if you have a set of articles that you want to treat differently from the other content, with a different layout or format."
sidebar: mydoc_sidebar
permalink: mydoc_collections.html
folder: mydoc
---
## What are collections
Collections are custom content types different from pages and posts. You might create a collection if you want to treat a specific set of articles in a unique way, such as with a custom layout or listing. For more detail on collections, see [Ben Balter's explanation of collections here](https://ben.balter.com/2015/02/20/jekyll-collections/).
## Create a collection
To create a collection, add the following in your configuration file:
```
collections:
tooltips:
output: true
```
In this example, "tooltips"" is the name of the collection.
## Interacting with collections
You can interact with collections by using the `site.collectionname` namespace, where `collectionname` is what you've configured. In this case, if I wanted to loop through all tooltips, I would use `site.tooltips` instead of `site.pages` or `site.posts`.
See [Collections in the Jekyll documentation](http://jekyllrb.com/docs/collections/) for more information.
## How to use collections
I haven't found a huge use for collections in normal documentation. However, I did find a use for collections in generating a tooltip file that would be used for delivering tooltips to a user interface from text files in the documentation. See [Help APIs and UI tooltips][mydoc_help_api] for details.
## Video tutorial on collections
See this [video tutorial on Jekyll.tips](http://jekyll.tips/jekyll-casts/introduction-to-collections/) for more details on collections.
{% include links.html %}

68
pages/mydoc/mydoc_commenting_on_files.md
View File

@ -1,68 +0,0 @@
---
title: Commenting on files
tags:
- navigation
keywords: "annotations, comments, feedback"
last_updated: "November 30, 2016"
summary: "You can add a button to your pages that allows people to add comments."
sidebar: mydoc_sidebar
permalink: mydoc_commenting_on_files.html
folder: mydoc
---
## About the review process
If you're using the doc as code approach, you might also consider using the same techniques for reviewing the doc as people use in reviewing code. This approach will involve using Github to edit the files.
There's an Edit me button on each page on this theme. This button allows collaborators to edit the content on Github.
Here's the code for that button on the page.html layout for GitHub:
```
{% raw %}{% if site.github_editme_path %}
<a target="_blank" rel="noopener" href="https://github.com/{{site.github_editme_path}}/{{page.folder}}{{page.url | append: ".md"}}{% endif %}" class="btn btn-default githubEditButton" role="button"><i class="fa fa-github fa-lg"></i> Edit me</a>
{% endif %}{% endraw %}
```
and here for GitLab:
```
{% raw %}{% if site.gitlab_editme_path %}
<a target="_blank" rel="noopener" href="https://github.com/{{site.gitlab_editme_path}}/{{page.folder}}{{page.url | append: ".md"}}{% endif %}" class="btn btn-default githubEditButton" role="button"><i class="fa fa-gitlab fa-lg"></i> Edit me</a>
{% endif %}{% endraw %}
```
In your configuration file, edit the value for `github_editme_path` (or for Gitlab: `gitlab_editme_path`). For example, you might create a branch called "reviews" on your Github repo. Then you would add something like this in your configuration file for the 'github_editme_path': tomjoht/documentation-theme-jekyll/edit/reviews. Here "tomjoht" is my github account name. The repo name is "documentation-theme-jekyll". The "reviews" name is the branch.
To suppress this button, comment out the `github_editme_path` in the \_config.yml file.
## Add reviewers as collaborators
If you want people to collaborate on your project so that their edits get committed to a branch on your project, you need to add them as collaborators. For your Github repo, click **Settings** and add the collaborators on the Collaborators tab using their Github usernames.
If you don't want to allow anyone to commit to your Github branch, don't add the reviewers as collaborators. When someone makes an edit, Github will fork the theme. The person's edit then will appear as a pull request to your repo. You can then choose to merge the change indicated in the pull or not.
{% include note.html content="When you process pull requests, you have to accept everything or nothing. You can't pick and choose which changes you'll merge. Therefore you'll probably want to edit the branch you're planning to merge or ask the contributor to make some changes to the fork before processing the pull request." %}
## Workflow
Users will make edits in your "reviews" branch (or whatever you want to call it). You can then commit those edits as you make updates.
When you're finished making all updates in the branch, you can merge the branch into the master.
Note that if you're making updates online, those updates will be out of sync with any local edits.
{% include warning.html content="Don't make edits both online using Github's browser-based interface AND offline on your local machine using your local tools. When you try to push from your local, you'll likely get a merge conflict error. Instead, make sure you do a pull and update on your local after making any edits online." %}
## Prose.io
Prose.io is an overlay on Github that would allow people to make comments in an easier interface. If you simply go to [prose.io](http://prose.io), it asks to authorize your Github account, and so it will read files directly from Github but in the Prose.io interface.
{% include links.html %}

156
pages/mydoc/mydoc_conditional_logic.md
View File

@ -1,156 +0,0 @@
---
title: Conditional logic
tags: [single_sourcing]
keywords: if else logic, conditions, conditional attributes, conditional filtering
last_updated: July 3, 2016
summary: "You can implement advanced conditional logic that includes if statements, or statements, unless, and more. This conditional logic facilitates single sourcing scenarios in which you're outputting the same content for different audiences."
sidebar: mydoc_sidebar
permalink: mydoc_conditional_logic.html
folder: mydoc
---
## About Liquid and conditional statements
If you want to create different outputs for different audiences, you can do all of this using a combination of Jekyll's Liquid markup and values in your configuration file. This is how I previously configured the theme. I had different configuration files for each output. Each configuration file specified different values for product, audience, version, and so on. Then I had different build processes that would leverage the different configuration files. It seemed like a perfect implementation of DITA-like techniques with Jekyll.
But I soon found that having lots of separate outputs for a project was undesirable. If you have 10 different outputs that have different nuances for different audiences, it's hard to manage and maintain. In this latest version of the theme, I consolidated all information into the same output to explicitly do away with the multi-output approach.
As such, the conditional logic won't have as much play as it previously did. Instead of conditions, you'll probably want to incorporate [navtabs](mydoc_navtabs) to split up the information.
However, you can still of course use conditional logic as needed.
{% include tip.html content="Definitely check out [Liquid's documentation](http://docs.shopify.com/themes/liquid-documentation/basics) for more details about how to use operators and other liquid markup. The notes here are a small, somewhat superficial sample from the site." %}
## Where to store filtering values
You can filter content based on values that you have set either in your page's frontmatter, a config file, or in a file in your \_data folder. If you set the attribute in your config file, you need to restart the Jekyll server to see the changes. If you set the value in a file in your \_data folder or page frontmatter, you don't need to restart the server when you make changes.
## Conditional logic based on config file value
Here's an example of conditional logic based on a value in the page's frontmatter. Suppose you have the following in your frontmatter:
```
platform: mac
```
On a page in my site (it can be HTML or markdown), you can conditionalize content using the following:
{% raw %}
```liquid
{% if page.platform == "mac" %}
Here's some info about the Mac.
{% elsif page.platform == "windows" %}
Here's some info about Windows ...
{% endif %}
```
{% endraw %}
This uses simple `if-elsif` logic to determine what is shown (note the spelling of `elsif`). The `else` statement handles all other conditions not handled by the `if` statements.
Here's an example of `if-else` logic inside a list:
{% raw %}
```liquid
To bake a casserole:
1. Gather the ingredients.
{% if page.audience == "writer" %}
2. Add in a pound of meat.
{% elsif page.audience == "designer" %}
3. Add in an extra can of beans.
{% endif %}
3. Bake in oven for 45 min.
```
{% endraw %}
You don't need the `elsif` or `else`. You could just use an `if` (but be sure to close it with `endif`).
## Or operator
You can use more advanced Liquid markup for conditional logic, such as an `or` command. See [Shopify's Liquid documentation](http://docs.shopify.com/themes/liquid-documentation/basics/operators) for more details.
For example, here's an example using `or`:
{% raw %}
```liquid
{% if page.audience contains "vegan" or page.audience == "vegetarian" %}
Then run this...
{% endif %}
```
{% endraw %}
Note that you have to specify the full condition each time. You can't shorten the above logic to the following:
{% raw %}
```liquid
{% if page.audience contains "vegan" or "vegetarian" %}
// run this.
{% endif %}
```
{% endraw %}
This won't work.
## Unless operator
You can also use `unless` in your logic, like this:
{% raw %}
```liquid
{% unless site.output == "pdf" %}
...do this
{% endunless %}
```
{% endraw %}
When figuring out this logic, read it like this: "Run the code here *unless* this condition is satisfied."."
Don't read it the other way around or you'll get confused. (It's *not* executing the code only if the condition is satisfied.)
## Storing conditions in the \_data folder
Here's an example of using conditional logic based on a value in a data file:
{% raw %}
```liquid
{% if site.data.options.output == "alpha" %}
show this content...
{% elsif site.data.options.output == "beta" %}
show this content...
{% else %}
this shows if neither of the above two if conditions are met.
{% endif %}
```
{% endraw %}
To use this, I would need to have a \_data folder called options where the `output` property is stored.
## Specifying the location for \_data
You can also specify a `data_source` for your data location in your configuration file. Then you aren't limited to simply using `_data` to store your data files.
For example, suppose you have 2 projects: alpha and beta. You might store all the data files for alpha inside data_alpha, and all the data files for beta inside data_beta.
In your alpha configuration file, specify the data source like this:
```
data_source: data_alpha
```
Then create a folder called \_data_alpha.
For your beta configuration file, specify the data source like this:
```
data_source: data_beta
```
Then create a folder called \_data_beta.
## Conditions versus includes
If you have a lot of conditions in your text, it can get confusing. As a best practice, whenever you insert an `if` condition, add the `endif` at the same time. This will reduce the chances of forgetting to close the if statement. Jekyll won't build if there are problems with the liquid logic.
If your text is getting busy with a lot of conditional statements, consider putting a lot of content into includes so that you can more easily see where the conditions begin and end.
{% include links.html %}

58
pages/mydoc/mydoc_content_reuse.md
View File

@ -1,58 +0,0 @@
---
title: Content reuse
tags: [single_sourcing]
keywords: includes, conref, dita, transclusion, transclude, inclusion, reference
last_updated: July 3, 2016
summary: "You can reuse chunks of content by storing these files in the includes folder. You then choose to include the file where you need it. This works similar to conref in DITA, except that you can include the file in any content type."
sidebar: mydoc_sidebar
permalink: mydoc_content_reuse.html
folder: mydoc
---
## About content reuse
You can embed content from one file inside another using includes. Put the file containing content you want to reuse (e.g., mypage.html) inside the \_includes/custom folder and then use a tag like this:
{% raw %}
```
{% include custom/mypage.html %}
```
{% endraw %}
With content in your \_includes folder, you don't add any frontmatter to these pages because they will be included on other pages already containing frontmatter.
Also, when you include a file, all of the file's contents get included. You can't specify that you only want a specific part of the file included. However, you can use parameters with includes.
{% unless site.output == "pdf" %}
See the following Jekyll cast for more info about using parameters with includes:
<iframe width="640" height="480" src="https://www.youtube.com/embed/kzpGqdEMbIs" frameborder="0" allowfullscreen></iframe>
{% endunless %}
## Page-level variables
You can also create custom variables in your frontmatter like this:
{% raw %}
```yaml
---
title: Page-level variables
permalink: page_level_variables/
thing1: Joe
thing2: Dave
---
```
{% endraw %}
You can then access the values in those custom variables using the `page` namespace, like this:
{% raw %}
```
thing1: {{page.thing1}}
thing2: {{page.thing2}}
```
{% endraw %}
I use includes all the time. Most of the includes in the \_includes directory are pulled into the theme layouts. For those includes that change, I put them inside custom and then inside a specific project folder.
{% include links.html %}

86
pages/mydoc/mydoc_excluding_files.md
View File

@ -1,86 +0,0 @@
---
title: Excluding files
tags: [single_sourcing]
last_updated: July 3, 2016
keywords: exclusion, separating outputs, removing files from outputs
summary: "By default, all the files in your Jekyll project are included in the output (this differs from DITA projects, which don't include files unless noted on the map). If you're single sourcing, you'll need to exclude the files that shouldn't be included in the output. The sidebar doesn't control inclusion or exclusion."
sidebar: mydoc_sidebar
permalink: mydoc_exluding_files.html
folder: mydoc
---
## About exclusion
By default, all files in your project are included in your output (regardless of whether they're listed in the sidebar_doc.yml file or not). To exclude files, note them in the `exclude` section in the configuration file. Here's a sample:
```
exclude:
- mydoc_writers_*
- bower_components
- Gemfile
```
If you have different outputs for your site, you'll want to customize the exclude sections in your various configuration files.
## Exclude strategies
Here's the process I recommend. Put all files in the root directory of your project. Suppose one project's name is alpha and the other is beta. Then name each file as follows:
* alpha_sample.html
* beta_sample.html
In your exclude list for your beta project, specify it as follows:
```
exclude:
- alpha_*
```
In your exclude list for your alpha project, specify it as follows:
```
exclude:
- beta_*
```
If you have more sophisticated exclusion, add another level to your file names. For example, if you have different programming languages you want to filter by, add this:
* alpha_java_sample.html
* alpha_cpp_sample.html
Then you exclude files for your Alpha C++ project as follows:
```
exclude:
- alpha_java_*
- beta_*
```
And you exclude files for your Alpha Java project as follows:
```
exclude:
- alpha_cpp_*
- alpha_beta_*
```
When you exclude folders, include the trailing slash at the end of the folder name:
```
exclude:
- images/alpha/
```
There isn't a way to automatically exclude anything. By default, everything is included unless you explicitly list it under the exclude section.
## Excluding draft content
If you're working on a draft, put it inside the \_drafts folder or add `published: false` in the frontmatter. The \_drafts folder is excluded by default, so you don't have to specify it in your exclude list.
## Limitations
What if a file should appear in two projects but not the third? This can get tricky. For some files, rather than using a wildcard, you may need to manually specify the entire filename that you're excluding instead of excluding it by way of a wildcard pattern.
{% include links.html %}

136
pages/mydoc/mydoc_faq.md
View File

@ -1,136 +0,0 @@
---
title: FAQ layout
permalink: mydoc_faq_layout.html
sidebar: mydoc_sidebar
tags: [special_layouts]
keywords: frequently asked questions, FAQ, question and answer, collapsible sections, expand, collapse
last_updated: November 30, 2015
summary: "You can use an accordion-layout that takes advantage of Bootstrap styling. This is useful for an FAQ page."
toc: false
folder: mydoc
---
<p>If you want to use an FAQ format, use the syntax shown on the faq.html page. Rather than including code samples here (which are bulky with a lot of nested <code>div</code> tags), just look at the source in the mydoc_faq.html theme file.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse noCrossRef">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse noCrossRef">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Aenean consequat lorem ut felis ullamcorper?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse noCrossRef">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus?</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Aenean consequat lorem ut felis ullamcorper?</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus?</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">Aenean consequat lorem ut felis ullamcorper?</a>
</h4>
</div>
<div id="collapseNine" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.panel-group -->
{% include links.html %}

429
pages/mydoc/mydoc_generating_pdfs.md
View File

@ -1,429 +0,0 @@
---
title: Generating PDFs
permalink: mydoc_generating_pdfs.html
tags: [publishing, single_sourcing, content_types]
keywords: PDF, prince, prince XML, ant, xsl fo
last_updated: July 3, 2016
summary: "You can generate a PDF from your Jekyll project. You do this by creating a web version of your project that is printer friendly. You then use utility called Prince to iterate through the pages and create a PDF from them. It works quite well and gives you complete control to customize the PDF output through CSS, including page directives and dynamic tags from Prince."
sidebar: mydoc_sidebar
folder: mydoc
---
## PDF overview
This process for creating a PDF relies on Prince XML to transform the HTML content into PDF. Prince costs about $500 per license. That might seem like a lot, but if you're creating a PDF, you're probably working for a company that sells a product, so you likely have access to some resources. There's also a free license that prints a small "P" watermark on your title page, so if you're fine with that, great.
The basic approach is to generate a list of all web pages that need to be added to the PDF, and then add leverage Prince to package them up into a PDF. Once you set it up, building a pdf is just a matter of running a couple of commands. Also, creating a PDF this way gives you a lot more control and customization capabilities than with other methods for creating PDFs. If you know CSS, you can entirely customize the output.
## Demo
You can see an example of the finished product here:
<a target="\_blank" class="noCrossRef" href="{{ "pdf/mydoc.pdf"}}"><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> PDF Download</button></a>
To generate the PDF, browse to the theme's directory in your terminal and run this script:
```bash
. pdf-mydoc.sh
```
This builds a PDF for the documentation in the theme. Look in the **pdf** folder for the output, and see the "last generated date" to confirm that you generated the PDF.
To build a PDF for the other sample projects, run these commands:
```bash
. pdf-product1.sh
```
or
```bash
. pdf-product2.sh
```
You can see the details of the script in these files in the theme's root directory. For example, open pdf-mydoc.sh. It contains the following:
```bash
# Note that .sh scripts work only on Mac. If you're on Windows, install Git Bash and use that as your client.
echo 'Kill all Jekyll instances'
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')
clear
echo "Building PDF-friendly HTML site for Mydoc ...";
bundle exec jekyll serve --detach --config _config.yml,pdfconfigs/config_mydoc_pdf.yml;
echo "done";
echo "Building the PDF ...";
prince --javascript --input-list=_site/pdfconfigs/prince-list.txt -o pdf/mydoc.pdf;
echo "Done. Look in the pdf directory to see if it printed successfully."
```
After stopping all Jekyll instances, we build Jekyll using a special configuration file that specifies a unique stylesheet. The build contains a file (prince-list.txt) that contains a list of all pages to be included in the PDF. We feed this list into a Prince command to build the PDF.
The following sections explain more about the setup.
## 1. Set up Prince
Download and install [Prince](http://www.princexml.com/doc/installing/).
You can install a fully functional trial version. The only difference is that the title page will have a small Prince PDF watermark.
## 2. Create a new configuration file for each of your PDF targets
The PDF configuration file will build on the settings in the regular configuration file but will some additional fields. Here's the configuration file for the mydoc product within this theme. This configuration file is located in the pdfconfigs folder.
```yaml
destination: _site/
url: "http://127.0.0.1:4010"
baseurl: "/mydoc-pdf"
port: 4010
output: pdf
product: mydoc
print_title: Jekyll theme for documentation — mydoc product
print_subtitle: version 5.0
output: pdf
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page_print"
comments: true
search: true
pdf_sidebar: mydoc_sidebar
```
{% include note.html content="Although you're creating a PDF, you must still build an HTML web target before running Prince. Prince will pull from the HTML files and from the file-list for the TOC." %}
Note that the default page layout specified by this configuration file is `page_print`. This layout strips out all the sections that shouldn't appear in the print PDF, such as the sidebar and top navigation bar.
Also note that there's a `output: pdf` property in case you want to make some of your content unique to PDF output. For example, you could add conditional logic that checks whether `site.output` is `pdf` or `web`. If it's `pdf`, then include information only for the PDF, and so on. If you're using nav tabs, you'll definitely want to create an alternative experience in the PDF.
In the configuration file, customize the values for the `print_title` and `print_subtitle` that you want. These will appear on the title page of the PDF.
We will access this configure file in the PDF generation script.
## 3. Make sure your sidebar data file has titlepage.html and tocpage.html entries
There are two template pages in the root directory that are critical to the PDF:
* titlepage.html
* tocpage.html
These pages should appear in your sidebar YML file (in this product, mydoc_sidebar.yml):
```yaml
- title:
output: pdf
type: frontmatter
folderitems:
- title:
url: /titlepage.html
output: pdf
type: frontmatter
- title:
url: /tocpage.html
output: pdf
type: frontmatter
```
Leave these pages here in your sidebar. (The `output: pdf` property means they won't appear in your online TOC because the conditional logic of the sidebar.html checks whether `web` is equal to `pdf` or not before including the item in the web version of the content.)
The code in the tocpage.html is mostly identical to that of the sidebar.html page. This is essential for Prince to create the page numbers correctly with cross references.
There's another file (in the root directory of the theme) that is critical to the PDF generation process: prince-list.txt. This file simply iterates through the items in your sidebar and creates a list of links. Prince will consume the list of links from prince-list.txt and create a running PDF that contains all of the pages listed, with appropriate cross references and styling for them all.
{% include note.html content="If you have any files that you do not want to appear in the PDF, add <code>output: web</code> (rather than <code>output: pdf</code>) in the list of attributes in your sidebar. The prince-list.txt file that loops through the mydoc_sidebar.yml file to grab the URLs of each page that should appear in the PDF will skip over any items that do not list <code>output: pdf</code> in the item attributes. For example, you might not want your tag archives to appear in the PDF, but you probably will want to list them in the online help navigation." %}
## 4. Customize your headers and footers
Open up the css/printstyles.css file and customize what you want for the headers and footers. At the very least, customize the email address (`youremail@domain.com`) that appears in the bottom left.
Exactly how the print styling works here is pretty nifty. You don't need to understand the rest of the content in this section unless you want to customize your PDFs to look different from what I've configured. But I'm adding this information here in case you want to understand how to customize the look and feel of the PDF output.
This style creates a page reference for a link:
{% raw %}
```css
a[href]::after {
content: " (page " target-counter(attr(href), page) ")"
}
```
You don't want cross references for any link that doesn't reference another page, so this style specifies that the content after should be blank:
```css
a[href*="mailto"]::after, a[data-toggle="tooltip"]::after, a[href].noCrossRef::after {
content: "";
}
```
{% endraw %}
{% include tip.html content="If you have a link to a file download, or some other link that shouldn't have a cross reference (such as link used in JavaScript for navtabs or collapsible sections, for example, add `noCrossRef` as a class to the link to avoid having it say \"page 0\" in the cross reference." %}
This style specifies that after links to web resources, the URL should be inserted instead of the page number:
```css
a[href^="http:"]::after, a[href^="https:"]::after {
content: " (" attr(href) ")";
}
```
This style sets the page margins:
```css
@page {
margin: 60pt 90pt 60pt 90pt;
font-family: sans-serif;
font-style:none;
color: gray;
}
```
To set a specific style property for a particular page, you have to name the page. This allows Prince to identify the page.
First you add frontmatter to the page that specifies the type. For the titlepage.html, here's the frontmatter:
```yaml
---
type: title
---
```
For the tocpage, here's the frontmatter:
```yaml
---
type: frontmatter
---
```
For the index.html page, we have this type tag (among others):
```yaml
---
type: first_page
---
```
The default_print.html layout will change the class of the `body` element based on the type value in the page's frontmatter:
{% raw %}
```liquid
<body class="{% if page.type == "title"%}title{% elsif page.type == "frontmatter" %}frontmatter{% elsif page.type == "first_page" %}first_page{% endif %} print">
```
{% endraw %}
Now in the css/printstyles.css file, you can assign a page name based on a specific class:
```css
body.title { page: title }
```
This means that for content inside of `body class="title"`, we can style this page in our stylesheet using `@page title`.
Here's how that title page is styled:
```css
@page title {
@top-left {
content: " ";
}
@top-right {
content: " "
}
@bottom-right {
content: " ";
}
@bottom-left {
content: " ";
}
}
```
As you can see, we don't have any header or footer content, because it's the title page.
For the tocpage.html, which has the `type: frontmatter`, this is specified in the stylesheet:
```css
body.frontmatter { page: frontmatter }
body.frontmatter {counter-reset: page 1}
@page frontmatter {
@top-left {
content: prince-script(guideName);
}
@top-right {
content: prince-script(datestamp);
}
@bottom-right {
content: counter(page, lower-roman);
}
@bottom-left {
content: "youremail@domain.com"; }
}
```
With `counter(page, lower-roman)`, we reset the page count to 1 so that the title page doesn't start the count. Then we also add some header and footer info. The page numbers start counting in lower-roman numerals.
Finally, for the first page (which doesn't have a specific name), we restart the counting to 1 again and this time use regular numbers.
```css
body.first_page {counter-reset: page 1}
h1 { string-set: doctitle content() }
@page {
@top-left {
content: string(doctitle);
font-size: 11px;
font-style: italic;
}
@top-right {
content: prince-script(datestamp);
font-size: 11px;
}
@bottom-right {
content: "Page " counter(page);
font-size: 11px;
}
@bottom-left {
content: prince-script(guideName);
font-size: 11px;
}
}
```
You'll see some other items in there such as `prince-script`. This means we're using JavaScript to run some functions to dynamically generate that content. These JavaScript functions are located in the \_includes/head_print.html:
```js
<script>
Prince.addScriptFunc("datestamp", function() {
return "PDF last generated: {{ site.time | date: '%B %d, %Y' }}";
});
</script>
<script>
Prince.addScriptFunc("guideName", function() {
return "{{site.print_title}} User Guide";
});
</script>
```
There are a couple of Prince functions that are default functions from Prince. This gets the heading title of the page:
```js
content: string(doctitle);
```
This gets the current page:
```js
content: "Page " counter(page);
```
Because the theme uses JavaScript in the CSS, you have to add the `--javascript` tag in the Prince command (detailed later on this page).
## 5. Customize and run the PDF script
Duplicate the pdf-mydoc.sh file in the root directory and customize it for your specific configuration files.
```
echo 'Killing all Jekyll instances'
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')
clear
echo "Building PDF-friendly HTML site for Mydoc ...";
jekyll serve --detach --config _config.yml,pdfconfigs/config_mydoc_pdf.yml;
echo "done";
echo "Building the PDF ...";
prince --javascript --input-list=_site/pdfconfigs/prince-list.txt -o pdf/mydoc.pdf;
echo "done";
```
Note that the first part kills all Jekyll instances. This way you won't try to serve Jekyll at a port that is already occupied.
The `jekyll serve` command serves up the HTML-friendly PDF configurations for our two projects. This web version is where Prince will go to get its content.
The prince script issues a command to the Prince utility. JavaScript is enabled (`--javascript`), and we tell it exactly where to find the list of files (`--input-list`) &mdash; just point to the prince-list.txt file. Then we tell it where and what to output (`-o`).
Make sure that the path to the prince-list.txt is correct. For the output directory, I like to output the PDF file into my project's source (into the files folder). Then when I build the web output, the PDF is included and something I can refer to.
{% include note.html content="You might not want to include the PDF in your project files, since you're likely committing the PDF to Github and as a result saving the changes from one PDF version to another with each save." %}
## 6. Add conditions for your new builds in the PDF config file
In the PDF configuration file, there's a section that looks like this:
```
{% raw %}{% if site.product == "mydoc" %}
pdf_sidebar: product2_sidebar
{% endif %}
```
Point to the sidebar you want here.
What this does is allow the prince-list.txt and toc.html files to iterate through the right sidebar. Otherwise, you would need to create a unique prince-list.txt and toc.html file for each separate PDF output you have.
## 7. Add a download button for the PDF
You can add a download button for your PDF using some Bootstrap button code:
```html
<a target="_blank" rel="noopener" class="noCrossRef" href="/pdf/mydoc.pdf"><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> PDF Download</button></a>
```
Here's what that looks like:
<a target="\_blank" class="noCrossRef" href={{ "pdf/mydoc.pdf"}}"><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> PDF Download</button></a>
## JavaScript conflicts
If you have JavaScript on any of your pages, Prince will note errors in Terminal like this:
```
error: TypeError: value is not an object
```
However, the PDF will still build.
You need to conditionalize out any JavaScript from your PDF web output before building your PDFs. Make sure that the PDF configuration files have the `output: pdf` property.
Then surround the JavaScript with conditional tags like this:
```
{% raw %}{% unless site.output == "pdf" %}
javascript content here ...
{% endunless %}{% endraw %}
```
For more detail about using `unless` in conditional logic, see [Conditional logic][mydoc_conditional_logic]. What this code means is "run this code unless this value is the case."
## Overriding Bootstrap Print Styles
The theme relies on Bootstrap's CSS for styling. However, for print media, Bootstrap applies the following style:
```
@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
```
This is minified, but basically the `*` (asterisk) means select all, and applied the color #000 (black). As a result, the Bootstrap style strips out all color from the PDF (for Bootstrap elements).
This is problematic for code snippets that have syntax highlighting. I decided to remove this de-coloring from the print output. I commented out the Bootstrap style:
```
@media print{*,:after,:before{/*color:#000!important;*/text-shadow:none!important;/*background:0 0!important*/;-webkit-box-shadow:none!important;box-shadow:none!important}
```
If you update Bootrap, make sure you make this edit. (Sorry, admittedly I couldn't figure out how to simply overwrite the `*` selector with a later style.)
I did, however, remove the color from the alerts and lighten the background shading for `pre` elements. The printstyles.css has this setting.
{% include links.html %}

185
pages/mydoc/mydoc_git_collaboration.md
View File

@ -1,185 +0,0 @@
---
title: Git notes and tips
summary: "If you're interacting with your team using Git, the notes and tips will help you collaborate efficiently."
tags: collaboration
keywords: git, github, collaboration, interaction, file sharing, push
published: false
sidebar: mydoc_sidebar
permalink: mydoc_git_collaboration.html
folder: mydoc
---
hg fetch does a pull and update at the same time
you're prompted about any conflicts
you fix them. then you do this:
hg pull -u (i think this is pull and then update)
$ hg [COMMAND] [ARGUMENTS]
hg init
hg add
hg log
hg diff
hg revert
hg remove
hg update
You have seen that it is possible to switch revision using hg update.
clone
commit
The first feature of the diff command is to show the differences between the last revision of a file (the state at the last commit command) and the current version. It can also show the differences between any two specified revisions. For example, on apache2.conf, the diff command can be used as follows:
$ hg diff -r 1 -r 2 apache2.conf
To print each line of a file with the revision at which the line was created (and with the --user option, we come to know who committed this revision), type:
$ hg annotate [FILE] or $ hg blame [FILE]
To search for a pattern in version controlled files, use hg grep; it will search this pattern in every version of the file and it will print the first one in which it appears, such as hg annotate. For example:
$ hg grep new apache2.conf
You can also print the content of a file at a given revision even without changing the current working directory using hg cat -r REVISION.
Whenever changes have been committed but not yet pushed, the outgoing command lists all the changesets that are present in the current repository but not yet found in the destination (the ones that are candidates to be pushed), whereas the incoming command shows you the changesets that are found in the source repository but have not been pulled yet. So here, if you use the outgoing command, you will see
push
pull
fetch
merge
resolve --mark
As you can see, you have added John's change to your repository because hg log is listing it. But it is not yet present in your working copy; you need to update the working directory to the tip revision, which is the default of the update command, when no revision is passed as argument:
You can now see John's change in the working directory. If some files had been modified, either committed or not, the modifications would have been seamlessly merged with that of John's. If there was a conflict, Mercurial would have told us.
hg pull --update or -u: This option combines both the pull and the update commands, not only pulling new changesets into the local repository, but also updating the working directory to the head of these new changes.
| annotate, blame | show changeset information by line for each file |
| diff | diff repository (or selected files) |
| forget {filename} | forget the specified files on the next commit |
hg fetch. This extension acts as a combination of hg pull -u, hg merge and hg commit. It begins by pulling changes from another repository into the current repository. If it finds that the changes added a new head to the repository, it updates to the new head, begins a merge, then (if the merge succeeded) commits the result of the merge with an automatically-generated commit message. If no new heads were added, it updates the working directory to the new tip changeset.
i like
hg fetch does a pull and update at the same time
you're prompted about any conflicts
you fix them. then you do this: hg resolve --mark
hg pull -u (i think this is pull and then update)
$ hg [COMMAND] [ARGUMENTS]
hg init
hg add
hg log
hg diff
hg revert
hg remove
hg update
You have seen that it is possible to switch revision using hg update.
clone
addremove, which allows you to automatically add all new files and remove (from version control) files that have been deleted.
log
commit
The first feature of the diff command is to show the differences between the last revision of a file (the state at the last commit command) and the current version. It can also show the differences between any two specified revisions. For example, on apache2.conf, the diff command can be used as follows:
$ hg diff -r 1 -r 2 apache2.conf
To print each line of a file with the revision at which the line was created (and with the --user option, we come to know who committed this revision), type:
$ hg annotate [FILE] or $ hg blame [FILE]
To search for a pattern in version controlled files, use hg grep; it will search this pattern in every version of the file and it will print the first one in which it appears, such as hg annotate. For example:
$ hg grep new apache2.conf
You can also print the content of a file at a given revision even without changing the current working directory using hg cat -r REVISION.
Whenever changes have been committed but not yet pushed, the outgoing command lists all the changesets that are present in the current repository but not yet found in the destination (the ones that are candidates to be pushed), whereas the incoming command shows you the changesets that are found in the source repository but have not been pulled yet. So here, if you use the outgoing command, you will see
push
pull
fetch
merge
resolve --mark
As you can see, you have added John's change to your repository because hg log is listing it. But it is not yet present in your working copy; you need to update the working directory to the tip revision, which is the default of the update command, when no revision is passed as argument:
You can now see John's change in the working directory. If some files had been modified, either committed or not, the modifications would have been seamlessly merged with that of John's. If there was a conflict, Mercurial would have told us.
hg pull --update or -u: This option combines both the pull and the update commands, not only pulling new changesets into the local repository, but also updating the working directory to the head of these new changes.
Bookmarks are tags that move forward automatically to subsequent changes, leaving no mark on the changesets that previously had that bookmark pointing toward them. Named branches, on the other hand, are indelible marks that are part of a changeset. Multiple heads can be on the same branch, but only one head at a time can be pointed to by the same bookmark. Named branches are pushed/pulled from repo to repo, and bookmarks don't travel.
The default branch name in Mercurial is “default”.
The slowest, safest way to create a branch with Mercurial is to make a new clone of the repository. this is really fascinating -- a clone is merely a branch.
Discarding a branch you don’t want any more is very easy with cloned branches. It’s as simple as rm -rf test-project-feature-branch. There’s no need to mess around with editing repository history, you just delete the damn thing.
The next way to branch is to use a bookmark. For example:
$ cd ~/src/test-project
$ hg bookmark main
$ hg bookmark feature
Now you’ve got two bookmarks (essentially a tag) for your two branches at the current changeset.
To switch to one of these branches you can use hg update feature to update to the tip changeset of that branch and mark yourself as working on that branch. When you commit, it will move the bookmark to the newly created changeset.
## Git
HEAD is a reference to the last commit in the current checked out branch.
This is a good tutorial: https://www.digitalocean.com/community/tutorials/how-to-use-git-branches.
## Branching
| Commands | Description |
|------|-------|
| List all branches | `git branch a` (the * indicates the branch you're on) |
| Create new branch | `git -b branchname` or `git branch branchname` |
| Checkout a branch | `git checkout branchname` |
| Create new branch and checkout at the same time| `git checkout -b branchname` |
| Merge into current branch | First go into the branch you want to merge changes into. Then do `git merge branchname`. For example, to merge branch b into branch master, first checkout branch master: `git checkout a`. Now merge b into master: `git merge b`.|
git lg
git checkout master
git merge search | git merge --no-ff search
the latter (--no-ff) keeps the additional information that these commits were made on a branch.
then type a commit message (:wq)
git branch -d search
git add . (works same as add --all)
git commit am "my commit message" (this performs both adding and commit message at same time)
with merge conflicts:
git status (shows you all the files that can't be added due to merge conflicts)
fix the conflicts
then git add . (tells git you fixed the conflicts)
then git status
git commit
From the interface, you can also create a pull request to merge all of the changes from a specific branch into another branch.
## General commands
| Commands | Description |
|------|-------|
| start tracking files | `git add` |
| see what has changed since last commit | `git diff` |
| commit changes | `git commit` |
| | |
{% include links.html %}

111
pages/mydoc/mydoc_glossary.md
View File

@ -1,111 +0,0 @@
---
title: Glossary layout
tags: [formatting, special_layouts]
keywords: definitions, glossaries, terms, style guide
last_updated: July 3, 2016
summary: "Your glossary page can take advantage of definitions stored in a data file. This gives you the ability to reuse the same definition in multiple places. Additionally, you can use Bootstrap classes to arrange your definition list horizontally."
sidebar: mydoc_sidebar
permalink: mydoc_glossary.html
toc: false
folder: mydoc
---
You can create a glossary for your content. First create your glossary items in a data file such as glossary.yml.
Then create a page and use definition list formatting, like this:
fractious
: {{site.data.glossary.fractious}}
gratuitous
: {{site.data.glossary.gratuitous}}
haughty
: {{site.data.glossary.haughty}}
gratuitous
: {{site.data.glossary.gratuitous}}
impertinent
: {{site.data.glossary.intrepid}}
Here's the code:
```
{% raw %}fractious
: {{site.data.glossary.fractious}}
gratuitous
: {{site.data.glossary.gratuitous}}
haughty
: {{site.data.glossary.haughty}}
gratuitous
: {{site.data.glossary.gratuitous}}
impertinent
: {{site.data.glossary.intrepid}}{% endraw %}
```
The glossary works well as a link in the top navigation bar.
## Horizontally styled definiton lists
You can also change the definition list (`dl`) class to `dl-horizontal`. This is a Bootstrap specific class. If you do, the styling looks like this:
<dl class="dl-horizontal">
<dt id="fractious">fractious</dt>
<dd>{{site.data.glossary.fractious}}</dd>
<dt id="gratuitous">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="haughty">haughty</dt>
<dd>{{site.data.glossary.haughty}}</dd>
<dt id="benchmark_id">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="impertinent">impertinent</dt>
<dd>{{site.data.glossary.impertinent}}</dd>
<dt id="intrepid">intrepid</dt>
<dd>{{site.data.glossary.intrepid}}</dd>
</dl>
For this type of list, you must use HTML. The list would then look like this:
```html
{% raw %}<dl class="dl-horizontal">
<dt id="fractious">fractious</dt>
<dd>{{site.data.glossary.fractious}}</dd>
<dt id="gratuitous">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="haughty">haughty</dt>
<dd>{{site.data.glossary.haughty}}</dd>
<dt id="benchmark_id">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="impertinent">impertinent</dt>
<dd>{{site.data.glossary.impertinent}}</dd>
<dt id="intrepid">intrepid</dt>
<dd>{{site.data.glossary.intrepid}}</dd>
</dl>{% endraw %}
```
If you squish your screen small enough, at a certain breakpoint this style reverts to the regular `dl` class.
Although I like the side-by-side view for shorter definitions, I found it problematic with longer definitions.
{% include links.html %}

363
pages/mydoc/mydoc_help_api.md
View File

@ -1,363 +0,0 @@
---
title: Help APIs and UI tooltips
tags: [publishing, single_sourcing, content_types]
last_updated: July 3, 2016
keywords: API, content API, UI text, inline help, context-sensitive help, popovers, tooltips
summary: "You can loop through files and generate a JSON file that developers can consume like a help API. Developers can pull in values from the JSON into interface elements, styling them as popovers for user interface text, for example. The beauty of this method is that the UI text remains in the help system (or at least in a single JSON file delivered to the dev team) and isn't hard-coded into the UI."
sidebar: mydoc_sidebar
permalink: mydoc_help_api.html
folder: mydoc
---
## Full code demo of content API
You can create a help API that developers can use to pull in content.
For the full code demo, see the notes in the [Tooltips file](tooltips.html).
In this demo, the popovers pull in and display content from the information in a <a target="_blank" rel="noopener" href="tooltips.json">tooltips.json</a> file located in the same directory.
Instead of placing the JSON source in the same directory, you could also host the JSON file on another site.
Additionally, instead of tooltip popovers, you could also print content directly to the page. Basically, whatever you can stuff into a JSON file, developers can integrate it onto a page.
## Diagram overview
Here's a diagram showing the basic idea of the help API:
<img src="images/helpapi.svg" style="width: 650px;"/>
Is this really an API? Well, sort of. The help content is pushed out into a JSON file that other websites and applications can easily consume. The endpoints don't deliver different data based on parameters added to a URL. But the overall concept is similar to an API: you have a client requesting resources from a server.
Note that in this scenario, the help is openly accessible on the web. If you have a private system, it's more complicated.
To deliver help this way using Jekyll, follow the steps in each of the sections below.
## 1. Create a "collection" for the help content
A collection is another content type that extends Jekyll beyond the use of pages and posts. Call the collection "tooltips."
Add the following information to your configuration file to declare your collection:
```
collections:
tooltips:
output: false
```
In your Jekyll project's root directory, create a new folder called "_tooltips" and put every page that you want to be part of that tooltips collection inside that folder.
In Jekyll, folders that begin with an underscore ("_") aren't included in the output. However, in the collection information that you add to your configuration file, if you change `output` to `true`, the tooltips folder will appear in the output, and each page inside tooltips will be generated. You most likely don't want this for tooltips (you just want the JSON file), so make the `output` setting `false`.
## 2. Create tooltip definitions in a YAML file
Inside the \_data folder, create a YAML file called something like definitions.yml. Add the definitions for each of your tooltips here like this:
```yaml
basketball: "Basketball is a sport involving two teams of five players each competing to put a ball through a small circular rim 10 feet above the ground. Basketball requires players to be in top physical condition, since they spend most of the game running back and forth along a 94-foot-long floor."
```
The definition of basketball is stored this data file so that you can re-use it in other parts of the help as well. You'll likely want the definition to appear not only in the tooltip in the UI, but also in the regular documentation as well.
## 3. Create pages in your collection
Create pages inside your new tooltips collection (that is, inside the \_tooltips folder). Each page needs to have a unique `id` in the frontmatter as well as a `product`. Then reference the definition you created in the definitions.yml file.
Here's an example:
```yaml
{% raw %}
---
doc_id: basketball
product: mydoc
---
{{site.data.definitions.basketball}}{% endraw %}
```
(Note: Avoid using `id`, as it seems to generate out as `/tooltips/basketball` instead of just `basketball.)
You need to create a separate file for each tooltip you want to deliver.
The product attribute is required in the frontmatter to distinguish the tooltips produced here from the tooltips for other products in the same \_tooltips folder. When creating the JSON file, Jekyll will iterate through all the pages inside \_tooltips, regardless of any subfolders included here.
## 4. Create a JSON file that loops through your collection pages
Now it's time to create a JSON file with Liquid code that iterates through our tooltip collection and grabs the information from each tooltip file.
Inside your project's pages directory (e.g., mydoc), add a file called "tooltips.json." (You can use whatever name you want.) Add the following to your JSON file:
{% raw %}
```liquid
---
layout: null
search: exclude
---
{
"entries":
[
{% for page in site.tooltips %}
{
"doc_id": "{{ page.doc_id }}",
"body": "{{ page.content | strip_newlines | replace: '\', '\\\\' | replace: '"', '\\"' }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
}
```
{% endraw %}
This code will loop through all pages in the tooltips collection and insert the `id` and `body` into key-value pairs for the JSON code. Here's an example of what that looks like after it's processed by Jekyll in the site build:
```json
{
"entries": [
{
"doc_id": "baseball",
"body": "{{site.data.definitions.baseball}}"
},
{
"doc_id": "basketball",
"body": "{{site.data.definitions.basketball}}"
},
{
"doc_id": "football",
"body": "{{site.data.definitions.football}}"
},
{
"doc_id": "soccer",
"body": "{{site.data.definitions.soccer}}"
}
]
}
```
You can also view the same JSON file here: <a target="_blank" rel="noopener" href="tooltips.json">tooltips.json</a>.
You can add different fields depending on how you want the JSON to be structured. Here we just have to fields: `doc_id` and `body`. And the JSON is looking just in the tooltips collection that we created.
{% include tip.html content="Check out [Google's style guide](https://google.github.io/styleguide/jsoncstyleguide.xml) for JSON. These best practices can help you keep your JSON file valid." %}
Note that you can create different JSON files that specialize in different content. For example, suppose you have some getting started information. You could put that into a different JSON file. Using the same structure, you might add an `if` tag that checks whether the page has frontmatter that says `type: getting_started` or something. Or you could put the content into separate collection entirely (different from tooltips).
By chunking up your JSON files, you can provide a quicker lookup. (I'm not sure how big the JSON file can be before you experience any latency with the jQuery lookup.)
## 5. Build your site and look for the JSON file
When you build your site, Jekyll will iterate through every page in your _tooltips folder and put the page id and body into this format. In the output, look for the JSON file in the tooltips.json file. You'll see that Jekyll has populated it with content. This is because of the triple hyphen lines in the JSON file &mdash; this instructs Jekyll to process the file.
## 6. Allow CORS access to your help if stored on a remote server
You can simply deliver the JSON file to devs to add to the project. But if you have the option, it's best to keep the JSON file stored in your own help system. Assuming you have the ability to update your content on the fly, this will give you completely control over the tooltips without being tied to a specific release window.
When people make calls to your site *from other domains*, you must allow them access to get the content. To do this, you have to enable something called CORS (cross origin resource sharing) within the server where your help resides.
In other words, people are going to be executing calls to reach into your site and grab your content. Just like the door on your house, you have to unlock it so people can get in. Enabling CORS is unlocking it.
How you enable CORS depends on the type of server.
If your server setup allows htaccess files to override general server permissions, create an .htaccess file and add the following:
```
Header set Access-Control-Allow-Origin "*"
```
Store this in the same directory as your project. This is what I've done in a directory on my web host (bluehost.com). Inside http://idratherassets.com/wp-content/apidemos/, I uploaded a file called ".htaccess" with the preceding code.
After I uploaded it, I renamed it to .htaccess, right-clicked the file and set the permissions to 774.
To test whether your server permissions are set correctly, open a terminal and run the following curl command pointing to your tooltips.json file:
```
curl -I http://idratherassets.com/wp-content/apidemos/tooltips.json
```
The `-I` command tells cURL to return the request header only.
If the server permissions are set correctly, you should see the following line somewhere in the response:
```xml
Access-Control-Allow-Origin: *
```
If you don't see this response, CORS isn't allowed for the file.
If you have an AWS S3 bucket, you can supposedly add a CORS configuration to the bucket permissions. Log into AWS S3 and click your bucket. On the right, in the Permissions section, click **Add CORS Configuration**. In that space, add the following policy:
```xml
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
```
(Although this should work, in my experiment it doesn't. And I'm not sure why...)
In other server setups, you may need to edit one of your Apache configuration files. See [Enable CORS](http://enable-cors.org/server.html) or search online for ways to allow CORS for your server.
If you don't have CORS enabled, users will see a CORS error/warning message in the console of the page making the request.
{% include tip.html content="If enabling CORS is problematic, you could always just send developers the tooltips.json file and ask them to place it on their own server." %}
## 7. Explain how developers can access the help
Developers can access the help using the `.get` method from jQuery, among other methods. Here's an example of how to get tooltips for basketball, baseball, football, and soccer:
```js
{% raw %}var url = "tooltips.json";
$.get( url, function( data ) {
/* Bootstrap popover text is defined inside a data-content attribute inside an element. That's
why I'm using attr here. If you just want to insert content on the page, use append and remove the data-content argument from the parentheses.*/
$.each(data.entries, function(i, page) {
if (page.doc_id == "basketball") {
$( "#basketball" ).attr( "data-content", page.body );
}
if (page.doc_id == "baseball") {
$( "#baseball" ).attr( "data-content", page.body );
}
if (page.doc_id == "football") {
$( "#football" ).attr( "data-content", page.body );
}
if (page.doc_id == "soccer") {
$( "#soccer" ).attr( "data-content", page.body );
}
});
});{% endraw %}
```
View the <a target="_blank" rel="noopener" href="tooltips.html" class="noCrossRef">tooltip demo</a> for a demonstration. See the source code for full code details.
The `url` in the demo is relative, but you could equally point it to an absolute path on a remote host assuming CORS is enabled on the host.
The `each` method looks through all the JSON content to find the item whose `page.id` is equal to `basketball`. It then looks for an element on the page named `#basketball` and adds a `data-content` attribute to that element.
{% include warning.html content="Make sure your JSON file is valid. Otherwise, this method won't work. I use the [JSON Formatter extension for Chrome](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en). When I go to the tooltips.json page in my browser, the JSON content &mdash; if valid &mdash; is nicely formatted (and includes some color coding). If the file isn't valid, it's not formatted and there isn't any color. You can also check the JSON formatting using [JSON Formatter and Validator](http://jsonformatter.curiousconcept.com/). If your JSON file isn't valid, identify the problem area using the validator and troubleshoot the file causing issues. It's usually due to some code that isn't escaping correctly." %}
Why `data-content`? Well, in this case, I'm using [Bootstrap popovers](http://getbootstrap.com/javascript/#popovers) to display the tooltip content. The `data-content` attribute is how Bootstrap injects popovers.
Here's the section on the page where the popover is inserted:
```
<p>Basketball <span class="glyphicon glyphicon-info-sign" id="basketball" data-toggle="popover"></span></p>
```
Notice that I just have `id="basketball"` added to this popover element. Developers merely need to add a unique ID to each tooltip they want to pull in the help content. Either you tell developers the unique ID they should add, or ask them what IDs they added (or just tell them to use an ID that matches the field's name).
In order to use jQuery and Bootstrap, you'll need to add the appropriate references in the head tags of your page:
```js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'right',
trigger: 'hover',
html: true
});
</script>
```
Again, see the <a class="noCrossRef" href="tooltips.html">Tooltip Demo</a> for a demo of the full code.
Note that even though you reference a Bootstrap JS script, Bootstrap's popovers require you to initialize them using the above code as well &mdash; they aren't turned on by default.
View the source code of the <a target="_blank" rel="noopener" href="tooltips.html" class="noCrossRef">tooltip demo</a> for the full comments.
## 8. Create easy links to embed the help in your help site
You might also want to insert the same content into different parts of your help site. For example, if you have tooltips providing definitions for fields, you'll probably want to create a page in your help that lists those same definitions.
You could use the same method developers use to pull help content into their applications. But it will probably be easier to simply use Jekyll's tags for doing it.
Here's how you would reuse the content:
```html
{% raw %}<h2>Reuse Demo</h2>
<table>
<thead>
<tr>
<th>Sport</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basketball</td>
<td>{{site.data.definitions.basketball}}</td>
</tr>
<tr>
<td>Baseball</td>
<td>{{site.data.definitions.baseball}}</td>
</tr>
<tr>
<td>Football</td>
<td>{{site.data.definitions.football}}</td>
</tr>
<tr>
<td>Soccer</td>
<td>{{site.data.definitions.soccer}}</td>
</tr>
</tbody>
</table>{% endraw %}
```
And here's the code:
<h2>Reuse Demo</h2>
<table>
<thead>
<tr>
<th>Sport</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basketball</td>
<td>{{site.data.definitions.basketball}}</td>
</tr>
<tr>
<td>Baseball</td>
<td>{{site.data.definitions.baseball}}</td>
</tr>
<tr>
<td>Football</td>
<td>{{site.data.definitions.football}}</td>
</tr>
<tr>
<td>Soccer</td>
<td>{{site.data.definitions.soccer}}</td>
</tr>
</tbody>
</table>
Now you have both documentation and UI tooltips generated from the same definitions file.
{% include links.html %}

29
pages/mydoc/mydoc_hyperlinks.md
View File

@ -1,29 +0,0 @@
---
title: Links
audience: writer, designer
tags: [formatting, navigation]
keywords: links, hyperlinks, cross references, related links, relationship tables
summary: "When creating links, you can use standard HTML or Markdown formatting. However, you can also implement an automated approach to linking that makes linking much less error-prone (meaning less chances of broken links in your output) and requiring less effort."
last_updated: July 3, 2016
sidebar: mydoc_sidebar
permalink: mydoc_hyperlinks.html
folder: mydoc
---
## Create an external link
When linking to an external site, use Markdown formatting because it's simplest:
```
[Google](http://google.com)
```
## Linking to internal pages
When linking to internal pages, you can manually link to the pages like this:
```
[Icons](mydoc_icons.html)
```
However, if you change the file name, you'll have to update all of your links.

242
pages/mydoc/mydoc_icons.md
View File

@ -1,242 +0,0 @@
---
title: Icons
tags: [formatting]
keywords: font icons, buttons, images, vectors, font awesome, glyphicons
last_updated: July 16, 2016
summary: "You can integrate font icons through the Font Awesome and Glyphical Halflings libraries. These libraries allow you to embed icons through their libraries delivered as a link reference. You don't need any image libraries downloaded in your project."
sidebar: mydoc_sidebar
permalink: mydoc_icons.html
folder: mydoc
---
## Font icon options
The theme has two font icon sets integrated: Font Awesome and Glyphicons Halflings. The latter is part of Bootstrap, while the former is independent. Font icons allow you to insert icons drawn as vectors from a CDN (so you don't have any local images on your own site).
## External icons
When you link to an external site, like [Jekyll](http://jekyllrb.com), an icon appears after the link. If you want to remove this icon, comment out this style in css/customstyles.css.
```css
/* this part adds an icon after external links, using FontAwesome*/
a[href^="http://"]:after, a[href^="https://"]:after {
content: "\f08e";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: none;
padding-left: 3px;
}
```
## See Font Awesome icons available
Go to the [Font Awesome library](http://fortawesome.github.io/Font-Awesome/icons/) to see the available icons.
The Font Awesome icons allow you to adjust their size by simply adding `fa-2x`, `fa-3x` and so forth as a class to the icon to adjust their size to two times or three times the original size. As vector icons, they scale crisply at any size.
Here's an example of how to scale up a camera icon:
```html
<i class="fa fa-camera-retro"></i> normal size (1x)
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
```
Here's what they render to:
<i class="fa fa-camera-retro"></i> 1x
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
With Font Awesome, you always use the `i` tag with the appropriate class. You also implement `fa` as a base class first. You can use font awesome icons inside other elements. Here I'm using a Font Awesome class inside a Bootstrap alert:
```html
<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Warning: </b>This is a special warning message.
```
Here's the result:
<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle fa-lg"></i> This is a special warning message.</div>
The notes, tips, warnings, etc., are pre-coded with Font Awesome and stored in the alerts.yml file. That file includes the following:
{% raw %}
```yaml
tip: '<div class="alert alert-success" role="alert"><i class="fa fa-check-square-o"></i> <b>Tip: </b>'
note: '<div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note: </b>'
important: '<div class="alert alert-warning" role="alert"><i class="fa fa-warning"></i> <b>Important: </b>'
warning: '<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Warning: </b>'
end: '</div>'
callout_danger: '<div class="bs-callout bs-callout-danger">'
callout_default: '<div class="bs-callout bs-callout-default">'
callout_primary: '<div class="bs-callout bs-callout-primary">'
callout_success: '<div class="bs-callout bs-callout-success">'
callout_info: '<div class="bs-callout bs-callout-info">'
callout_warning: '<div class="bs-callout bs-callout-warning">'
hr_faded: '<hr class="faded"/>'
hr_shaded: '<hr class="shaded"/>'
```
{% endraw %}
This means you can insert a tip, note, warning, or important alert simply by using these tags.
```liquid
{% raw %}{% include note.html content="Add your note here." %}{% endraw %}
```
```liquid
{% raw %}{% include tip.html content="Add your tip here." %}{% endraw %}
```
```liquid
{% raw %}{% include important.html content="Add your important info here." %}{% endraw %}
```
{% raw %}
```liquid
{% include warning.html content="Add your warning here." %}
```
{% endraw %}
Here's the result:
{% include note.html content="Add your note here." %}
{% include tip.html content="Here's my tip." %}
{% include important.html content="This information is very important." %}
{% include warning.html content="If you overlook this, you may die." %}
The color scheme is the default colors from Bootstrap. You can modify the icons or colors as needed.
## Creating your own combinations
You can innovate with your own combinations. Here's a similar approach with a file download icon:
```html
<div class="alert alert-success" role="alert"><i class="fa fa-download fa-lg"></i> This is a special tip about some file to download....</div>
```
And the result:
<div class="alert alert-success" role="alert"><i class="fa fa-download fa-lg"></i> This is a special tip about some file to download....</div>
Grab the right class name from the [Font Awesome library](http://fortawesome.github.io/Font-Awesome/icons/) and then implement it by following the pattern shown previously.
If you want to make your fonts even larger than the 5x style, add a custom style to your stylesheet like this:
```css
.fa-10x{font-size:1700%;}
```
Then any element with the attribute `fa-10x` will be enlarged 1700%.
## Glyphicon icons available
Glyphicons work similarly to Font Awesome. Go to the [Glyphicons library](http://getbootstrap.com/components/#glyphicons) to see the icons available.
Although the Glyphicon Halflings library doesn't provide the scalable classes like Font Awesome, there's a [StackOverflow trick](http://stackoverflow.com/questions/24960201/how-do-i-make-glyphicons-bigger-change-size) to make the icons behave in a similar way. This theme's stylesheet (customstyles.css) includes the following to the stylesheet:
```css
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
```
Now you just add `gi-5x` or whatever to change the size of the font icon:
```html
<span class="glyphicon glyphicon-globe gi-5x"></span>
```
And here's the result:
<span class="glyphicon glyphicon-globe gi-5x"></span>
Glypicons use the `span` element instead of `i` to attach their classes.
Here's another example:
```html
<span class="glyphicon glyphicon-download"></span>
```
<span class="glyphicon glyphicon-download"></span>
And magnified:
```html
<span class="glyphicon glyphicon-download gi-3x"></span>
```
<span class="glyphicon glyphicon-download gi-3x"></span>
You can also put glyphicons inside other elements:
```html
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<b>Error:</b> Enter a valid email address
</div>
```
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<b>Error:</b> Enter a valid email address
</div>
## Callouts
The previously shown alerts might be fine for short messages, but with longer notes, the solid color takes up a bit of space. In this theme, you also have the option of using callouts, which are pretty common in Bootstrap's documentation but surprisingly not offered as an explicit element. Their styles have been copied into this theme, in a way similar to the alerts:
```html
<div class="bs-callout bs-callout-info">
This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. </div>
```
<div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-question-sign"></span> This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. </div>
And here's the shortcode:
{% raw %}
```
{{site.data.alerts.callout_info}This is a special callout information message.{{site.data.alerts.end}}
{% endraw %}
```
Here's the result:
{{site.data.alerts.callout_info}}This is a special callout information message.{{site.data.alerts.end}}
You can use any of the following:
{% raw %}
```
{{site.data.alerts.callout_default}}
{{site.data.alerts.callout_primary}}
{{site.data.alerts.callout_success}}
{{site.data.alerts.callout_info}}
{{site.data.alerts.callout_warning}}
```
{% endraw %}
The only difference is the color of the left bar.
Callouts are explained in a bit more detail in [Alerts][mydoc_alerts].
{% include links.html %}

99
pages/mydoc/mydoc_images.md
View File

@ -1,99 +0,0 @@
---
title: Images
tags: [formatting]
keywords: images, screenshots, vectors, svg, markdown syntax
last_updated: July 3, 2016
summary: "Store images in the images folder and use the image.html include to insert images. This include has several options, including figcaptions, that extract the content from the formatting."
sidebar: mydoc_sidebar
permalink: mydoc_images.html
folder: mydoc
---
## Image Include Template
Instead of using Markdown or HTML syntax directly in your page for images, the syntax for images has been extracted out into an image include that allows you to pass the parameters you need. Include the image.html like this:
```liquid
{% raw %}
{% include image.html file="jekyll.png" url="http://jekyllrb.com" alt="Jekyll" caption="This is a sample caption" %}
{% endraw %}
```
The available include properties are as follows:
| Property | description |
|-------|--------|
| file | The name of the file. Store it in the /images folder. If you want to organize your images in subfolders, reference the subfolder path here, like this: `mysubfolder/jekyllrb.png` |
| url | Whether to link the image to a URL |
| alt | Alternative image text for accessibility and SEO |
| caption | A caption for the image |
| max-width | a maximum width for the image (in pixels). Just specify the number, not px.|
The properties of the include get populated into the image.html template.
Here's the result:
{% include image.html file="jekyll.png" url="http://jekyllrb.com" alt="Jekyll" caption="This is a sample caption" %}
## Inline image includes
For inline images, such as with a button that you want to appear inline with text, use the inline_image.html include, like this:
```liquid
Click the **Android SDK Manager** button {%raw%}{% include inline_image.html
file="androidsdkmanagericon.png" alt="SDK button" %}{%endraw%}
```
Click the **Android SDK Manager** button {% include inline_image.html file="androidsdkmanagericon.png" alt="SDK button" %}
The inline_image.html include properties are as follows:
| Property | description |
|-------|--------|
| file | The name of the file |
| type | The type of file (png, svg, and so on) |
| alt | Alternative image text for accessibility and SEO |
## SVG Images
You can also embed SVG graphics. If you use SVG, you need to use the HTML syntax so that you can define a width/container for the graphic. Here's a sample embed:
```liquid
{% raw %}{% include image.html file="helpapi.svg" url="http://idratherbewriting.com/documentation-theme-jekyll/mydoc_help_api/" alt="Building a Help API" caption="A help API provides a JSON file at a web URL with content that can be pulled into different targets" max-width="600" %}{% endraw %}
```
Here's the result:
{% include image.html file="helpapi.svg" url="http://idratherbewriting.com/documentation-theme-jekyll/mydoc_help_api/" alt="Building a Help API" caption="A help API provides a JSON file at a web URL with content that can be pulled into different targets" max-width="600" %}
The stylesheet even handles SVG display in IE 9 and earlier through the following style (based on this [gist](https://gist.github.com/larrybotha/7881691)):
```css
/*
* Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
*
* [1] IE9
* [2] IE10+
*/
/* 1 */
.ie9 img[src$=".svg"] {
width: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src$=".svg"] {
width: 100%;
}
}
```
Also, if you're working with SVG graphics, note that Firefox does not support SVG fonts. In Illustrator, when you do a Save As with your AI file and choose SVG, to preserve your fonts, in the Font section, select "Convert to outline" as the Type (don't choose SVG in the Font section).
Also, remove the check box for "Use textpath element for text on a path". And select "Embed" rather than "Link." The following screenshot shows the settings I use. Your graphics will look great in Firefox.
{% include image.html file="illustratoroptions.png" caption="Essential options for SVG with Illustrator" %}
{% include links.html %}

157
pages/mydoc/mydoc_install_jekyll_on_mac.md
View File

@ -1,157 +0,0 @@
---
title: Install Jekyll on Mac
tags: [getting_started, troubleshooting]
keywords:
summary: "Installation of Jekyll on Mac is usually less problematic than on Windows. However, you may run into permissions issues with Ruby that you must overcome. You should also use Bundler to be sure that you have all the required gems and other utilities on your computer to make the project run. "
sidebar: mydoc_sidebar
permalink: mydoc_install_jekyll_on_mac.html
folder: mydoc
---
## Ruby and RubyGems
Ruby and [RubyGems](https://rubygems.org/pages/download) are usually installed by default on Macs. Open your Terminal and type `which ruby` and `which gem` to confirm that you have Ruby and Rubygems. You should get a response indicating the location of Ruby and Rubygems.
If you get responses that look like this:
```
/usr/local/bin/ruby
```
and
```
/usr/local/bin/gem
```
Great! Skip down to the [Bundler](#bundler) section.
However, if your location is something like `/Users/MacBookPro/.rvm/rubies/ruby-2.2.1/bin/gem`, which points to your system location of Rubygems, you will likely run into permissions errors when trying to get a gem. A sample permissions error (triggered when you try to install the jekyll gem such as `gem install jekyll`) might look like this for Rubygems:
```
>ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
```
Instead of changing the write permissions on your operating system's version of Ruby and Rubygems (which could pose security issues), you can install another instance of Ruby (one that is writable) to get around this.
## Install Homebrew
Homebrew is a package manager for the Mac, and you can use it to install an alternative instance of Ruby code. To install Homebrew, run this command:
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
If you already had Homebrew installed on your computer, be sure to update it:
```
brew update
```
## Install Ruby through Homebrew
Now use Homebrew to install Ruby:
```
brew install ruby
```
Log out of terminal, and then then log back in.
When you type `which ruby` and `which gem`, you should get responses like this:
```
/usr/local/bin/ruby
```
And this:
```
/usr/local/bin/gem
```
Now Ruby and Rubygems are installed under your username, so these directories are writeable.
Note that if you don't see these paths, try restarting your computer or try installing rbenv, which is a Ruby version management tool. If you still have issues getting a writeable version of Ruby, you need to resolve them before installing Bundler.
<h2 id="bundler">Install the Jekyll gem</h2>
At this point you should have a writeable version of Ruby and Rubygem on your machine.
Now use `gem` to install Jekyll:
```
gem install jekyll
```
You can now use Jekyll to create new Jekyll sites following the quick-start instructions on [Jekyllrb.com](http://jekyllrb.com).
## Installing dependencies through Bundler
Some Jekyll themes will require certain Ruby gem dependencies. These dependencies are stored in something called a Gemfile, which is packaged with the Jekyll theme. You can install these dependencies through Bundler. (Although you don't need to install Bundler for this Documentation theme, it's a good idea to do so.)
[Bundler](http://bundler.io/) is a package manager for RubyGems. You can use it to get all the gems (or Ruby plugins) that you need for your Jekyll project.
You install Bundler by using the gem command with RubyGems:
```
gem install bundler
```
If you're prompted to switch to superuser mode (`sudo`) to get the correct permissions to install Bundler in that directory, avoid doing this. All other applications that need to use Bundler will likely not have the needed permissions to run.
Bundler goes out and retreives all the gems that are specified in a Jekyll project's Gemfile. If you have a gem that depends on other gems to work, Bundler will go out and retrieve all of the dependencies as well. (To learn more about Bundler, see [About Ruby Gems][mydoc_about_ruby_gems_etc].
The vanilla Jekyll site you create through `jekyll new my-awesome-site` doesn't have a Gemfile, but many other themes (including the Documentation theme for Jekyll) do have a Gemfile.
## Serve the Jekyll Documentation theme
1. Browse to the directory where you downloaded the Documentation theme for Jekyll.
2. Type `jekyll serve`
3. Go to the preview address in the browser. (Make sure you include the `/` at the end.)
## Resolve "No Github API authentication" errors {#githuberror}
After making an edit, Jekyll auto-rebuilds the site. If you have the Gemfile in the theme with the github-pages gem, you may see the following error:
```
GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.
```
If you see this error, you will need to take some additional steps to resolve it. (Note that this error only appears if you have the github-pages gem in your gemfile.) The resolution involves adding a Github token and a cert file.
{% include note.html content="These instructions apply to Mac OS X, but they're highly similar to Windows. These instructions are adapted from a post on [Knight Codes](http://knightcodes.com/miscellaneous/2016/09/13/fix-github-metadata-error.html). If you're on Windows, see the Knight Codes post for details instead of following along below." %}
To resolve the "No Github API authentication" error:
1. Follow Github's instructions to [create a personal access token](https://help.github.com/articles/creating-an-access-token-for-command-line-use/).
2. Open the **.bash_profile** file in your user directory:
```
open ~/.bash_profile
```
The file will open in your default terminal editor. If you don't have a .bash_profile file, you can just create a file with this name. Note that files that begin with `.` are hidden, so if you're looking in your user directory for the file, use `ls -a` to see hidden files.
3. In your **.bash_profile** file, reference your token as a system variable like this:
```
export JEKYLL_GITHUB_TOKEN=abc123abc123abc123abc123abc123abc123abc123abc123
```
Replace `abc123...` with your own token that you generated in step 1.
4. Go to **[https://curl.haxx.se/ca/cacert.pem][https://curl.haxx.se/ca/cacert.pem]. Right-click the page, select **Save as**, and save the file on your computer (save it somewhere safe, where you won't delete it). Name the file **cacert**.
5. Open your **.bash_profile** file again and add this line, replacing `Users/johndoe/projects/` with the path to your cacert.pem file:
```
export SSL_CERT_FILE=/Users/johndoe/projects/cacert.pem
```
6. Close and restart your terminal.
Browse to your jekyll project and run `bundle exec jekyll serve`. Make an edit to a file and observe that no Github API errors appear when Jekyll rebuilds the project.
{% include links.html %}

93
pages/mydoc/mydoc_install_jekyll_on_windows.md
View File

@ -1,93 +0,0 @@
---
title: Install Jekyll on Windows
permalink: mydoc_install_jekyll_on_windows.html
keywords: jekyll on windows, pc, ruby, ruby dev kit
sidebar: mydoc_sidebar
folder: mydoc
---
{% include tip.html content="For a better terminal emulator on Windows, use [Git Bash](https://git-for-windows.github.io/). Git Bash gives you Linux-like control on Windows." %}
## Install Ruby and Ruby Development Kit
First you must install Ruby because Jekyll is a Ruby-based program and needs Ruby to run.
1. Go to [RubyInstaller for Windows](http://rubyinstaller.org/downloads/).
2. Under **RubyInstallers**, download and install one of the Ruby installers under the **WITH DEVKIT** list (usually the recommended/highlighted option).
3. Double-click the downloaded file and proceed through the wizard to install it. Run the `ridk install` step on the last stage of the installation wizard.
4. Open a new command prompt window or Git Bash session.
<h2 id="bundler">Install the Jekyll gem</h2>
At this point you should have Ruby and Rubygem on your machine.
Now use `gem` to install Jekyll:
```
gem install jekyll
```
You can now use Jekyll to create new Jekyll sites following the quick-start instructions on [Jekyllrb.com](http://jekyllrb.com).
## Installing dependencies through Bundler
Some Jekyll themes will require certain Ruby gem dependencies. These dependencies are stored in something called a Gemfile, which is packaged with the Jekyll theme. You can install these dependencies through Bundler. (Although you don't need to install Bundler for this Documentation theme, it's a good idea to do so.)
[Bundler](http://bundler.io/) is a package manager for RubyGems. You can use it to get all the gems (or Ruby plugins) that you need for your Jekyll project.
You install Bundler by using the gem command with RubyGems:
## Install Bundler
1. Browse to the directory where you downloaded the Documentation theme for Jekyll.
2. Delete or rename the existing `Gemfile` and `Gemfile.lock` files.
3. Install Bundler: `gem install bundler`
4. Initialize Bundler: `bundle init`
This will create a new Gemfile.
3. Open the Gemfile in a text editor.
Typically you can open files from the Command Prompt by just typing the filename, but because Gemfile doesn't have a file extension, no program will automatically open it. You may need to use your File Explorer and browse to the directory, and then open the Gemfile in a text editor such as Notepad.
4. Remove the existing contents. Then paste in the following:
```
source "https://rubygems.org"
gem 'wdm'
gem 'jekyll'
```
The [wdm gem](https://rubygems.org/gems/wdm/versions/0.1.1) allows for the polling of the directory and rebuilding of the Jekyll site when you make changes. This gem is needed for Windows users, not Mac users.
5. Save and close the file.
6. Type `bundle install`.
Bundle retrieves all the needed gems and gem dependencies and downloads them to your computer. At this time, Bundle also takes a snapshot of all the gems used in your project and creates a Gemfile.lock file to store this information.
## Git Clients for Windows
Although you can use the default command prompt with Windows, it's recommended that you use [Git Bash](https://git-for-windows.github.io/) instead. The Git Bash client will allow you to run shell scripts and execute other Unix commands.
## Serve the Jekyll Documentation theme
1. Browse to the directory where you downloaded the Documentation theme for Jekyll.
2. Type `jekyll serve`
3. Go to the preview address in the browser. (Make sure you include the `/` at the end.)
Unfortunately, the Command Prompt doesn't allow you to easily copy and paste the URL, so you'll have to type it manually.
## Resolving Github Metadata errors {#githuberror}
After making an edit, Jekyll auto-rebuilds the site. If you have the Gemfile in the theme with the github-pages gem, you may see the following error:
```
GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.
```
If so, you will need to take some additional steps to resolve it. (Note that this error only appears if you have the github-pages gem in your gemfile.) The resolution involves adding a Github token and a cert file.
See this post on [Knight Codes](http://knightcodes.com/miscellaneous/2016/09/13/fix-github-metadata-error.html) for instructions on how to fix the error. You basically generate a personal token on Github and set it as a system variable. You also download a certification file and set it as a system variable. This resolves the issue.
{% include links.html %}

43
pages/mydoc/mydoc_installing_bundler.md
View File

@ -1,43 +0,0 @@
---
title: Installing Bundler
published: false
sidebar: mydoc_sidebar
permalink: mydoc_installing_bundler.html
folder: mydoc
---
If you get permissions errors when trying to install Bundler, follow these steps:
if you get a permissions error when trying to install bundler, then do this:
Install Brew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install rbenv, a Ruby Version Mgmt Tool:
brew install rbenv
Initialize rbenv:
rbenv init
Log out of terminal or iTerm, and then back in
Install bundler:
gem install bundler
Now you can use Bundler to get any project dependencies you need. Usually you would add a gemfile to your project and then use Bundler to install the gems and all the dependencies you need.
Create a gemfile:
bundle init
Open the gemfile:
open gemfile
Paste in the gems you want bundler to get for you:
source 'https://rubygems.org'
gem 'github-pages'
gem 'pygments.rb'
gem 'redcarpet'
gem 'jekyll'
Run Bundler:
bundle install
Execute Bundler against your project:
bundle exec jekyll serve
(Instead of jekyll serve, run one of the other build commands.)
{% include links.html %}

30
pages/mydoc/mydoc_introduction.md
View File

@ -1,30 +0,0 @@
---
title: Introduction
sidebar: mydoc_sidebar
permalink: mydoc_introduction.html
folder: mydoc
---
## Overview
This site provides documentation, training, and other notes for the Jekyll Documentation theme. There's a lot of information about how to do a variety of things here, and it's not all unique to this theme. But by and large, understanding how to do things in Jekyll depends on how your theme is coded. As a result, these additional details are provided.
The instructions here are geared towards technical writers working on documentation. You may have a team of one or more technical writers working on documentation for multiple projects. You can use this same theme to author all of your documentation for each of your products. The theme is built to accommodate documentation for multiple products on the same site.
## Survey of features
Some of the more prominent features of this theme include the following:
* Bootstrap framework
* [Navgoco multi-level sidebar](http://www.komposta.net/article/navgoco) for table of contents
* Ability to specify different sidebars for different products
* Top navigation bar with drop-down menus
* Notes, tips, and warning information notes
* Tags for alternative navigation
* Advanced landing page layouts from the [Modern Business theme](http://startbootstrap.com/template-overviews/modern-business/).
## Getting started
To get started, see [Getting Started][index].
{% include links.html %}

43
pages/mydoc/mydoc_iterm_profiles.md
View File

@ -1,43 +0,0 @@
---
title: iTerm profiles
tags: [publishing]
keywords: iterm, terminal, build shortcuts, mac
last_updated: July 3, 2016
summary: "You can set up profiles in iTerm to facilitate the build process with just a few clicks. This can make it a lot easier to quickly build multiple outputs."
sidebar: mydoc_sidebar
permalink: mydoc_iterm_profiles.html
folder: mydoc
---
## About iTerm profiles
When you're working with tech docs, a lot of times you have builds that push files onto different servers, or that build the content for different environments. It can be a hassle to type out these commands each time. Instead, it's easier to configure iTerm with profiles that initiate the scripts.
## Set up profiles
1. Open iTerm and go to **Profiles > Open Profiles.**
2. Click **Edit Profiles**.
3. Click the + button in the lower-left corner to create a new profile.
4. In the **Name** field, type a name describing the output, such as `Doc theme -- designers`.
5. In the **Send text at start** field, type the command for the build script, such as this:
```
JEKYLL_ENV=production jekyll serve
```
Leave the Login shell option selected.
6. In the Working Directory section, select **Directory** and enter the directory for your project, such as **/Users/tjohnson/projects/documentation-theme-jekyll**.
7. Close the profiles panel.
Here's an example:
{% include image.html file="itermexample.png" caption="iTerm profile example" %}
## Launching a profile
1. In iTerm, make sure the Toolbar is shown. Go to **View > Toggle Toolbar**.
2. Click the **New** button and select your profile.
{% include tip.html content="When you're done with the session, make sure to click <b>Ctrl+C</b>." %}
{% include links.html %}

115
pages/mydoc/mydoc_kb_layout.md
View File

@ -1,115 +0,0 @@
---
title: Knowledge-base layout
tags: [special_layouts]
keywords: knowledge base, support portal, grid, doc portal
last_updated: July 3, 2016
summary: "This shows a sample layout for a knowledge base. Each square could link to a tag archive page. In this example, font icons from Font Awesome are used for the graphics, and the layout is pulled from the Modern Business theme. ."
sidebar: mydoc_sidebar
permalink: mydoc_kb_layout.html
toc: false
folder: mydoc
---
Here's the sample knowledge-base style layout:
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Knowledge Base Categories</h2>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-tree fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Getting started</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="tag_getting_started.html" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Navigation</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="tag_navigation.html" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Single sourcing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="tag_single_sourcing.html" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Formatting</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="tag_formatting.html" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
## Generating a list of all pages with a certain tag
If you don't want to link to a tag archive index, but instead want to list all pages that have a certain tag, you could use this code:
```html
{% raw %}Getting started pages:
<ul>
{% assign sorted_pages = site.pages | sort: 'title' %}
{% for page in sorted_pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{ page.url | remove: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>{% endraw %}
```
Here's the result:
Getting started pages:
<ul>
{% assign sorted_pages = site.pages | sort: 'title' %}
{% for page in sorted_pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{ page.url | remove: "/"}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% include links.html %}

33
pages/mydoc/mydoc_labels.md
View File

@ -1,33 +0,0 @@
---
title: Labels
tags: [formatting]
keywords: labels, buttons, bootstrap, api methods
last_updated: July 3, 2016
summary: "Labels are just a simple Bootstrap component that you can include in your pages as needed. They represent one of many Bootstrap options you can include in your theme."
sidebar: mydoc_sidebar
permalink: mydoc_labels.html
folder: mydoc
---
## About labels
Labels might come in handy for adding button-like tags next to elements, such as POST, DELETE, UPDATE methods for endpoints. You can use any classes from Bootstrap in your content.
```html
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
```
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
You can have a label appear within a heading simply by including the span tag in the heading. However, you can't mix Markdown syntax with HTML, so you'd have to hard-code the heading ID for the auto-TOC to work.
{% include links.html %}

133
pages/mydoc/mydoc_lists.md
View File

@ -1,133 +0,0 @@
---
title: Lists
keywords: bulleted lists, numbered lists
tags: [formatting]
summary: "This page shows how to create both bulleted and numbered lists"
sidebar: mydoc_sidebar
permalink: mydoc_lists.html
---
## Bulleted Lists
This is a bulleted list:
```
* first item
* second item
* third item
```
**Result:**
* first item
* second item
* third item
## Numbered list
This is a simple numbered list:
```
1. First item.
1. Second item.
1. Third item.
```
**Result:**
1. First item.
1. Second item.
1. Third item.
You can use whatever numbers you want &mdash; when the Markdown filter processes the content, it will assign the correct numbers to the list items.
## Complex Lists
Here's a more complex list:
```
1. Sample first item.
* sub-bullet one
* sub-bullet two
2. Continuing the list
1. sub-list numbered one
2. sub-list numbered two
3. Another list item.
```
**Result:**
1. Sample first item.
* sub-bullet one
* sub-bullet two
2. Continuing the list
1. sub-list numbered one
2. sub-list numbered two
3. Another list item.
## Another Complex List
Here's a list with some intercepting text:
```
1. Sample first item.
This is a result statement that talks about something....
2. Continuing the list
{% include note.html content="Remember to do this. If you have \"quotes\", you must escape them." %}
Here's a list in here:
* first item
* second item
3. Another list item.
```js
function alert("hello");
```
4. Another item.
```
**Result:**
1. Sample first item.
This is a result statement that talks about something....
2. Continuing the list
{% include note.html content="Remember to do this. If you have \"quotes\", you must escape them." %}
Here's a list in here:
* first item
* second item
3. Another list item.
```js
function alert("hello");
```
4. Another item.
### Key Principle to Remember with Lists
The key principle is to line up the first character after the dot following the number:
{% include image.html file="liningup.png" caption="Lining up the left edge ensures the list stays in tact." %}
For the sake of simplicity, use two spaces after the dot for numbers 1 through 9. Use one space for numbers 10 and up. If any part of your list doesn't align symmetrically on this left edge, the list will not render correctly. Also note that this is characteristic of kramdown-flavored Markdown and may not yield the same results in other Markdown flavors.

114
pages/mydoc/mydoc_navtabs.md
View File

@ -1,114 +0,0 @@
---
title: Navtabs
tags: [formatting]
keywords: navigation tabs, hide sections, tabbers, interface tabs
last_updated: July 3, 2016
summary: "Navtabs provide a tab-based navagation directly in your content, allowing users to click from tab to tab to see different panels of content. Navtabs are especially helpful for showing code samples for different programming languages. The only downside to using navtabs is that you must use HTML instead of Markdown."
sidebar: mydoc_sidebar
permalink: mydoc_navtabs.html
folder: mydoc
---
## Common uses
Navtabs are particularly useful for scenarios where you want to show a variety of options, such as code samples for Java, .NET, or PHP, on the same page.
While you could resort to single-source publishing to provide different outputs for each unique programming language or role, you could also use navtabs to allow users to select the content you want.
Navtabs are better for SEO since you avoid duplicate content and drive users to the same page.
## Navtabs demo
The following is a demo of a navtab. Refresh your page to see the tab you selected remain active.
<ul id="profileTabs" class="nav nav-tabs">
<li class="active"><a class="noCrossRef" href="#profile" data-toggle="tab">Profile</a></li>
<li><a class="noCrossRef" href="#about" data-toggle="tab">About</a></li>
<li><a class="noCrossRef" href="#match" data-toggle="tab">Match</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile" markdown="1">
## Profile
Praesent sit amet fermentum leo. Aliquam feugiat,
1. nibh in u ltrices mattis
2. felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor.
* Quisque ut condimentum massa.
* ut condimentum massa.
> Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
</div>
<div role="tabpanel" class="tab-pane" id="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.about</p></div>
<div role="tabpanel" class="tab-pane" id="match">
<h2>Match</h2>
<p>Vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.</p>
</div>
</div>
## Code
Here's the code for the above (with the filler text abbreviated):
```html
<ul id="profileTabs" class="nav nav-tabs">
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#about" data-toggle="tab">About</a></li>
<li><a href="#match" data-toggle="tab">Match</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<h2>Profile</h2>
<p>Praesent sit amet fermentum leo....</p>
</div>
<div role="tabpanel" class="tab-pane" id="about">
<h2>About</h2>
<p>Lorem ipsum ...</p></div>
<div role="tabpanel" class="tab-pane" id="match">
<h2>Match</h2>
<p>Vel vehicula ....</p>
</div>
</div>
```
## Design constraints
Bootstrap automatically clears any floats after the navtab. Make sure you aren't trying to float any element to the right of your navtabs, or there will be some awkward space in your layout.
## Appearance in the mini-TOC
If you put a heading in the navtab content, that heading will appear in the mini-TOC as long as the heading tag has an ID. If you don't want the headings for each navtab section to appear in the mini-TOC, omit the ID attribute from the heading tag. Without this ID attribute in the heading, the mini-TOC won't insert the heading title into the mini-TOC.
## Must use HTML
You must use HTML within the navtab content because each navtab section is surrounded with HTML, and you can't use Markdown inside of HTML.
## Match up ID tags
Each tab's `href` attribute must match the `id` attribute of the tab content's `div` section. So if your tab has `href="#acme"`, then you add `acme` as the ID attribute in `<div role="tabpanel" class="tab-pane" id="acme">`.
## Set an active tab
One of the tabs needs to be set as active, depending on what tab you want to be open by default (usually the first one).
```html
<div role="tabpanel" class="tab-pane active" id="acme">
```
## Sets a cookie
The navtabs are part of Bootstrap, but this theme sets a cookie to remember the last tab's state. The js/customscripts.js file has a long chunk of JavaScript that sets the cookie. The JavaScript comes from [this StackOverflow thread](http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload).
By setting a cookie, if the user refreshes the page, the active tab is the tab the user last selected (rather than defaulting to the default active tab).
## Functionality to implement
One piece of functionality I'd like to implement is the ability to set site-wide nav tab options. For example, if the user always chooses PHP instead of Java in the code samples, it would be great to set this option site-wide by default. However, this functionality isn't yet coded.
{% include links.html %}

183
pages/mydoc/mydoc_pages.md
View File

@ -1,183 +0,0 @@
---
title: Pages
tags: [getting_started, formatting, content_types]
keywords: pages, authoring, exclusion, frontmatter
last_updated: July 16, 2016
summary: "This theme primarily uses pages. You need to make sure your pages have the appropriate frontmatter. One frontmatter tag your users might find helpful is the summary tag. This functions similar in purpose to the shortdesc element in DITA."
sidebar: mydoc_sidebar
permalink: mydoc_pages.html
folder: mydoc
---
## Where to author content
Use a text editor such as Sublime Text, WebStorm, IntelliJ, or Atom to create pages. Atom is recommended because it's created by Github, which is driving some of the Jekyll development through Github Pages.
## Where to save pages
You can store your pages in any folder structures you want, with any level of folder nesting. The site output will pull all of those pages out of their folders and put them into the root directory. Check out the \_site folder, which is where Jekyll is generated, to see the difference between your project's structure and the resulting site output.
The listing of all pages in the root directory (which happens when you add a permalink property to the pages) is what allows the relative linking and offline viewing of the site to work.
## Frontmatter
Make sure each page has frontmatter at the top like this:
```yaml
---
title: Alerts
tags: [formatting]
keywords: notes, tips, cautions, warnings, admonitions
last_updated: July 3, 2016
summary: "You can insert notes, tips, warnings, and important alerts in your content."
sidebar: mydoc_sidebar
permalink: mydoc_alerts.html
---
```
Frontmatter is always formatted with three hyphens at the top and bottom. Your frontmatter must have a `title` and `permalink` value. All the other values are optional.
Note that you cannot use variables in frontmatter.
The following table describes each of the frontmatter that you can use with this theme:
| Frontmatter | Required? | Description |
|-------------|-------------|-------------|
| **title** | Required | The title for the page |
| **tags** | Optional | Tags for the page. Make all tags single words, with underscores if needed (rather than spaces). Separate them with commas. Enclose the whole list within brackets. Also, note that tags must be added to \_data/tags_doc.yml to be allowed entrance into the page. This prevents tags from becoming somewhat random and unstructured. You must create a tag page for each one of your tags following the pattern shown in the tags folder. (Tag pages aren't automatically created.) |
| **keywords** | Optional | Synonyms and other keywords for the page. This information gets stuffed into the page's metadata to increase SEO. The user won't see the keywords, but if you search for one of the keywords, it will be picked up by the search engine. |
| **last_updated** | Optional | The date the page was last updated. This information could helpful for readers trying to evaluate how current and authoritative information is. If included, the last_updated date appears in the footer of the page in small font.|
| **sidebar** | Required | Refers to the sidebar data file for this page. Don't include the ".yml" file extension for the sidebar &mdash; just provide the file name. If no sidebar is specified, this value will inherit the `default` property set in your \_config.yml file for the page's frontmatter. |
| **summary** | Optional | A 1-2 word sentence summarizing the content on the page. This gets formatted into the summary section in the page layout. Adding summaries is a key way to make your content more scannable by users (check out [Jakob Nielsen's site](http://www.nngroup.com/articles/corporate-blogs-front-page-structure/) for a great example of page summaries.) The only drawback with summaries is that you can't use variables in them. |
| **permalink**| Required | The permalink *must* match the filename in order for automated links to work. Additionally, you must include the ".html" in the filename. Do not put forward slashes around the permalink (this makes Jekyll put the file inside a folder in the output). When Jekyll builds the site, it will put the page into the root directory rather than leaving it in a subdirectory or putting it inside a folder and naming the file index.html. Having all files flattened in the root directory is essential for relative linking to work and for all paths to JS and CSS files to be valid. |
| **datatable** | Optional | 'true'. If you add `datatable: true` in the frontmatter, scripts for the [jQuery Datatables plugin](https://www.datatables.net/) get included on the page. You can see the scripts that conditionally appear by looking in the \_layouts/default.html page. |
| **toc** | Optional | If you specify `toc: false` in the frontmatter, the page won't have the table of contents that appears below the title. The toc refers to the list of jump links below the page title, not the sidebar navigation. You probably want to hide the TOC on the homepage and product landing pages.|
## Colons in page titles
If you want to use a colon in your page title, you must enclose the title's value in quotation marks.
## Page names and excluding files from outputs
By default, everything in your project is included in the output. You can exclude all files that don't belong to that project by specifying the file name, the folder name, or by using wildcards in your configuration file:
```yaml
exclude:
- filename.md
- subfolder_name/
- mydoc_*
- gitignore
```
Wildcards will exclude every match after the `*`.
## Saving pages as drafts
If you add `published: false` in the frontmatter, your page won't be published. You can also move draft pages into the \_drafts folder to exclude them from the build. With posts, you can also keep them as drafts by omitting the date in the title.
## Markdown or HTML format
Pages can be either Markdown or HTML format (specified through either an .md or .html file extension).
If you use Markdown, you can also include HTML formatting where needed. But if your format is HTML, you must add a `markdown="1"` attribute to the element in order to use Markdown inside that HTML element:
```
<div markdown="1">This is a [link](http://exmaple.com).</div>
```
For your Markdown files, note that a space or two indent will set text off as code or blocks, so avoid spacing indents unless intentional.
If you have a lot of HTML, as long as the top and bottom tags of the HTML are flush left in a Markdown file, all the tags inside those bookend HTML tags will render as HTML, regardless of their indentation. (This can be especially useful for tables.)
## Page names
I recommend prefixing your page names with the product, such as "mydoc_pages" instead of just "pages." This way if you have other products that also have topics with generic names such as "pages," there won't be naming conflicts.
Additionally, consider adding the product name in parentheses after the title, such as "Pages (Mydoc)" so that users can clearly navigate different topics for each product.
## Kramdown Markdown
Kramdown is the Markdown flavor used in the theme. This mostly aligns with Github-flavored Markdown, but with some differences in the indentation allowed within lists. Basically, Kramdown requires you to line up the indent between list items with the first starting character after the space in your list item numbering. See this [blog post on Kramdown and Rouge](http://idratherbewriting.com/2016/02/21/bug-with-kramdown-and-rouge-with-github-pages/) for more details.
You can use standard Multimarkdown syntax for tables. You can also use fenced code blocks with lexers specifying the type of code. The configuration file shows the Markdown processor and extension:
```yaml
highlighter: rouge
markdown: kramdown
kramdown:
input: GFM
auto_ids: true
hard_wrap: false
syntax_highlighter: rouge
```
## Automatic mini-TOCs
By default, a TOC appears at the top of your pages and posts. If you don't want the TOC to appear for a specific page, such as for a landing page or other homepage, add `toc: false` in the frontmatter of the page.
The mini-TOC requires you to use the `##` Markdown syntax for headings. If you use `<h2>` elements, you must add an ID attribute for the heading element in order for it to appear in the mini-TOC (for example, `<h2 id="mysampleid">Heading</h2>`.
## Headings
Use pound signs before the heading title to designate the level. Note that kramdown requires headings to have one space before and after the heading. Without this space above and below, the heading won't render into HTML.
```
## Second-level heading
```
**Result:**
## Second-level heading
-----
```
### Third-level heading
```
**Result:**
### Third-level heading
------
```
#### Fourth-level heading
```
**Result:**
#### Fourth-level heading
## Headings with ID Tags {#someIdTag}
If you want to use a specific ID tag with your heading, add it like this:
```
## Headings with ID Tags {#someIdTag}
```
Then you can reference it with a link like this on the same page:
```
[Some link](#someIdTag)
```
**Result:**
[Some link](#someIdTag)
For details about linking to headings on different pages, see [Automated links to headings on pages][mydoc_hyperlinks.html#bookmarklinks].
## Specify a particular page layout
The configuration file sets the default layout for pages as the "page" layout.
You can create other layouts inside the layouts folder. If you create a new layout, you can specify that your page use your new layout by adding `layout: mylayout.html` in the page's frontmatter. Whatever layout you specify in the frontmatter of a page will override the layout default set in the configuration file.
## Comments
Disqus, a commenting system, is integrated into the theme. In the configuration file, specify the Disqus code for the universal code, and Disqus will appear. If you don't add a Disqus value, the Disqus form isn't included.
{% include links.html %}

47
pages/mydoc/mydoc_posts.md
View File

@ -1,47 +0,0 @@
---
title: Posts
tags: [getting_started, formatting, content_types]
keywords: posts, blog, news, authoring, exclusion, frontmatter
last_updated: Feb 25, 2016
summary: "You can use posts when you want to create blogs or news type of content."
sidebar: mydoc_sidebar
permalink: mydoc_posts.html
folder: mydoc
---
## About posts
Posts are typically used for blogs or other news information because they contain a date and are sorted in reverse chronological order.
You create a post by adding a file in the \_posts folder that is named yyyy-mm-dddd-permalink.md, which might be 2016-02-25-my-latest-updates.md. You can use any number of subfolders here that you want.
Posts use the post.html layout in the \_layouts folder when you are viewing the post.
The news.html file in the root directory shows a reverse chronological listing of the 10 latest posts
## Allowed frontmatter
The frontmatter you can use with posts is as follows:
```yaml
---
title: My sample post
tags: content_types
keywords: pages, authoring, exclusion, frontmatter
sidebar: mydoc_sidebar
permalink: mydoc_pages.html
summary: "This is some summary frontmatter for my sample post."
---
```
| Frontmatter | Required? | Description |
|-------------|-------------|-------------|
| **title** | Required | The title for the page |
| **tags** | Optional | Tags for the page. Make all tags single words, with underscores if needed. Separate them with commas. Enclose the whole list within brackets. Also, note that tags must be added to \_data/tags_doc.yml to be allowed entrance into the page. This prevents tags from becoming somewhat random and unstructured. You must create a tag page for each one of your tags following the sample pattern in the tabs folder. (Tag pages aren't automatically created.) |
| **keywords** | Optional | Synonyms and other keywords for the page. This information gets stuffed into the page's metadata to increase SEO. The user won't see the keywords, but if you search for one of the keywords, it will be picked up by the search engine. |
| **sidebar** | Required | Refers to the sidebar data file for this page. Don't include the ".yml" file extension for the sidebar &mdash; just provide the file name. If no sidebar is specified, this value will inherit the `default` property set in your \_config.yml file for the page's frontmatter. |
| **permalink**| Required | This theme uses permalinks to facilitate the linking. You specify the permalink want for the page, and the \_site output will put the page into the root directory when you publish. Follow the same convention here as you do with page permalinks -- list the file name followed by the .html extension. |
| **summary** | Optional | A 1-2 word sentence summarizing the content on the page. This gets formatted into the summary section in the page layout. Adding summaries is a key way to make your content more scannable by users (check out [Jakob Nielsen's site](http://www.nngroup.com/articles/corporate-blogs-front-page-structure/) for a great example of page summaries.) The only drawback with summaries is that you can't use variables in them. |
{% include links.html %}

74
pages/mydoc/mydoc_publishing_github_pages.md
View File

@ -1,74 +0,0 @@
---
title: Publishing on Github Pages
sidebar: mydoc_sidebar
permalink: mydoc_publishing_github_pages.html
summary: "You can publish your project on Github Pages, which is a free web hosting service provided by Github. All you need is to put your content into a Github repo branch called gh-pages and make this your default branch in your repo. With a Jekyll site, you just commit your entire project into the gh-pages branch and Github Pages will build the site for you."
folder: mydoc
---
## Set up your Github repo
1. Make sure you have Git installed. You can download and install [Git for Windows here](https://git-scm.com/download/win) and [Git for Mac here](https://git-scm.com/download/mac). If you're on a Mac, chances are you might already have git installed. You can check by opening up a terminal and typing `which git`.{{end}}
1. Go to [Github.com](http://github.com) and sign up for an account.
2. Click the **+** button in the upper-right corner and select **New repository**.
3. Name the repository something like **mydoctheme**.
4. Type a description..
5. Select the **Initialize this repository with a README** check box.
6. Add a license if desired.
7. Leave the other options at the defaults and click **Create repository**.
8. Click the **Settings** button.
9. Go to your repository's home page, and click the branch drop-down menu.
10. Create a new branch called **gh-pages**.
11. Click **Settings** and change the default branch to **gh-pages**.
11. Go back to your repository's homepage. With the gh-pages branch selected, copy the **https clone url**:
12. Open a terminal, browse to a convenient location for your project, and type `git clone https://github.com/tomjoht/myreponame.git`, replacing the `https://github.com/tomjoht/myreponame.git` with your repository's https clone URL that you copied.
13. Move the jekyll theme files into this new folder that you just created in the previous step.
14. Open the \_config.yml file and add the following:
```
url: tomjoht.github.io
baseurl: /myreponame
```
Change the url to your github account name, and the baseurl to your repo name.
## Install Bundler
Bundler is a package manager for Ruby that will install all dependencies you might need to build your site locally. I recommend installing Bundler through homebrew. (Sorry, these instructions apply to Mac only.)
1. Install [homebrew](http://brew.sh/):
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
2. Install Bundler:
```
gem install bundler
```
## Add the github pages gem
1. In terminal, browse to your Jekyll project directory.
2. Type `bundle init`. This creates a Gemfile and Gemfile.lock in your project.
3. Type `open gemfile`. This opens the gemfile in your default text editor.
4. Add the following in the gemfile (replacing the existing contents):
```
source 'https://rubygems.org'
gem 'github-pages'
```
5. Run `bundle install`.
14. Add the new jekyll files to git: `git add --all`.
15. Commit the files: `git commit -m "committing my jekyll theme"`.
16. Push the files up to your github repo: `git push`.
Github Pages will now automatically build your site. Wait a minute or two, and then visit tomjoht.github.io/yourreponame, replacing this path with your github account and branch.
## Customize your URL
You can also customize your Github URL. More instructions on this later....
{% include links.html %}

35
pages/mydoc/mydoc_push_build_to_server.md
View File

@ -1,35 +0,0 @@
---
title: Pushing builds to server
tags: [publishing]
keywords: AWS, Amazon, command line, pushing build
last_updated: July 3, 2016
summary: "You can push your build to AWS using commands from the command line. By including your copy commands in commands, you can package all of the build and deploy process into executable scripts."
sidebar: mydoc_sidebar
permalink: mydoc_push_build_to_server.html
folder: mydoc
---
## Pushing to AWS S3
If you have the AWS Command Line Interface installed and are pushing your builds to AWS, the following commands show how you can build and push to an AWS location from the command line:
```
aws s3 cp ~/users/tjohnson/projects/mydocproject/ s3://[aws path]docpath/mydocproject --recursive
aws s3 cp ~/users/tjohnson/projects/anotherdocproject2/ s3://[aws path]docpath/anotherdocproject --recursive
```
The first path in the argument is the local location; the second path is the destination.
## Pushing to a regular server
If you're pushing to a regular server that you can ssh into, you can use `scp` commands to push your build. Here's an example:
```
scp -r /users/tjohnson/projects/mydocproject/ name@domain:/var/www/html/mydocproject
```
Similar to the above, the first path is the local location; the second path is the destination.
{% include links.html %}

48
pages/mydoc/mydoc_release_notes_50.md
View File

@ -1,48 +0,0 @@
---
title: Release notes 5.0
tags: [getting_started]
keywords: release notes, announcements, what's new, new features
last_updated: July 3, 2016
summary: "Version 5.0 of the Documentation theme for Jekyll changes some fundamental ways the theme works to provide product-specific sidebars, intended to accommodate a site where multiple products are grouped together on the same site rather than generated out as separate outputs."
sidebar: mydoc_sidebar
permalink: mydoc_release_notes_50.html
folder: mydoc
---
## Unique sidebars for each product
In previous versions of the theme, I built the theme to generate different outputs for different scenarios based on various filtering attributes that might include product, version, platform, and audience variants.
However, this model results in siloed outputs and lots of separate file directories to manage. Instead of having 30 separate sites for your content (or however many variants you might have been producing), in this version of the theme I've moved towards a strategy of having one site with multiple products.
For each product, you can associate a unique sidebar with each of the product's pages. This allows you to have all your documentation on one site, but with separate navigation that is tailored to a view of that product.
You can still output to both web and PDF. And if you really need multiple site outputs, you can still do so by using multiple configuration files that trigger different builds. But my conclusion after using the multiple site output model for some years is that it's a bad practice for tech comm.
## Permalinks
With this theme, since you'll be publishing to one site, I've implement permalinks instead of relative links. Using permalinks means the way you store pages is much more flexible. You can store topics in folders and subfolders, etc., to any degree. But note that with permalinks you can't view the content offline (outside of Jekyll's preview server) nor on a separate site other than the one specified in the configuration file. Permalinks are how Jekyll was designed to work, and the sites just work better that way.
## Kramdown and Rouge
I also switched from redcarpet and Pygments to Kramdown and Rouge to align with the current direction of Jekyll 3.0. Kramdown is a Markdown filter (it's slightly different from Github-flavored Markdown). Rouge is a syntax highlighter. Pygments had some dependencies on Python, which made it more cumbersome for Windows users.
## Blog feature
I included a blog feature with this version of the theme. You can write posts and view them through the News link. There's also an archive for blog posts that sorts posts by year.
Additionally, the tagging system works across both the blog and pages, so your tags allow users to move laterally across the site based on topics they're interested in. When you view a tag archive, the sidebar shows a list of tags.
## Updated documentation
I updated the documentation for the theme. The switch from the multi-site outputs to the single-site with multiple sidebars required updating a lot of different parts of the documentation and code.
## Fixed errors
Previously I had some errors with the HTML that showed up in w3c HTML validator analyses. This caused some small problems in certain browsers or systems less tolerant of the errors. I fixed all of the errors.
## Accessing the old theme
If you want to access the old theme, you can still find it [here](https://github.com/tomjoht/jekylldoctheme-separate-outputs).
{% include links.html %}

40
pages/mydoc/mydoc_release_notes_60.md
View File

@ -1,40 +0,0 @@
---
title: Release notes 6.0
tags: [getting_started]
keywords: release notes, announcements, what's new, new features
last_updated: July 16, 2016
summary: "Version 6.0 of the Documentation theme for Jekyll, released July 4, 2016, implements relative links so you can view the files offline or on any server without configuring urls and baseurls. Additionally, you can store pages in subdirectories. Templates for alerts and images are available."
sidebar: mydoc_sidebar
permalink: mydoc_release_notes_60.html
folder: mydoc
---
## Relative links
You can now view the site offline rather than solely through the Jekyll preview server or deployed on a web server. The linking approach in both the sidebar and with inline links uses relative linking throughout.
## Subfolders for pages
You can creates folders and subfolders for your pages, similar to how you can store posts in folders and subfolders. When Jekyll builds the site, all pages get pushed into the root directory as single html files (rather than being pushed inside folders, or remaining in subfolders). See [Pages][mydoc_pages] for more details.
## Alerts templates
You can use include templates for notes, tips, and warnings. These include templates make it easier to insert notes. If you make an error, you're immediately made aware since the site won't build. See [Alerts][mydoc_alerts] for more details.
## Image templates
Similar to alerts, images also have include templates. You can insert both regular images and inline images, such as images that are a button or icon. See [Images][mydoc_images] for more details.
## Automated links using Markdown formatting
Instead of using YAML references to handle links, I've switched to a Markdown reference style approach. A links.html file iterates through the sidebar files and formats the content in the Markdown reference. You then just use Markdown syntax for the links. See [Links][mydoc_hyperlinks] for more details.
## Workflow maps
If you want to display a workflow map for a process, you can do so by adding some properties in your frontmatter. The workflow map helps guide users through a process. Both simple and complex workflow maps are available. For more details, see [Workflow maps][mydoc_workflow_maps].
## Upgrading
If you want to upgrade from an earlier version of the theme, I recommend that you download the new theme and copy of your Markdown files into the new theme. You'll then need to make adjustments to your page frontmatter, to the sidebar table of contents, links, image references, and alert references. In short, there's no easy upgrade path. But all of this won't take too long if you don't have mountains of content.
{% include links.html %}

120
pages/mydoc/mydoc_search_configuration.md
View File

@ -1,120 +0,0 @@
---
title: Search configuration
tags: [publishing, navigation]
keywords: search, json, configuration, findability
last_updated: July 3, 2016
summary: "The search feature uses JavaScript to look for keyword matches in a JSON file. The results show instant matches, but it doesn't provide a search results page like Google. Also, sometimes invalid formatting can break the JSON file."
sidebar: mydoc_sidebar
permalink: mydoc_search_configuration.html
folder: mydoc
---
## About search
The search is configured through the search.json file in the root directory. The search is a simple search that looks at content in pages. It looks at titles, summaries, keywords, and tags.
However, the search doesn't work like google &mdash; you can't hit return and see a list of results on the search results page, with the keywords in bold. Instead, this search shows a list of page titles that contain keyword matches. It's fast, but simple.
## Excluding pages from search
By default, every page is included in the search. Depending on the type of content you're including, you may find that some pages will break the JSON formatting. If that happens, then the search will no longer work.
If you want to exclude a page from search add `search: exclude` in the page's frontmatter.
## Troubleshooting search
You should exclude any files from search that you don't want appearing in the search results. For example, if you have a tooltips.json file or prince-list.txt, don't include it, as the formatting will break the JSON format.
If any formatting in the search.json file is invalid (in the build), search won't work. You'll know that search isn't working if no results appear when you start typing in the search box.
If this happens, point your browser to your build's search.json file at http://localhost:4000/search.json (or your public github pages site), copy the entire search.json page as it's output on the browser, and then use a [JSON validator](http://jsonlint.com/) to validate the output by pasting what you copied into the validator. Look for the line causing trouble. It will be highlighted. Edit the file that's causing the problem to either exclude it from the search or fix the syntax so that it doesn't invalidate the JSON. (Note that tabs in the body will invalidate JSON, as will certain characters in the file's front matter. For example, the summary: cannot have " quotes in it.
The search.json file already tries to strip out content that would otherwise make the JSON invalid.
## Including the body field in search
I've found that including the `body` field in the search creates too many problems, and so I've removed `body` from the search. You can see the results of including the `body` by adding this along with the other fields in search.json:
{% raw %}
```json
"body": "{{ page.content | strip_html | strip_newlines | replace: '\', '\\\\' | replace: '"', '\\"' | replace: ' ', ' ' }}",
```
{% endraw %}
Note that the last replace, `| replace: '^t', ' ' `, looks for any tab character and replaces it with four spaces. (Tab characters invalidate JSON.) If you run into other problematic formatting, you can use regex expressions to find and replace the content. See [Regular Expressions](http://www.ultraedit.com/support/tutorials_power_tips/ultraedit/regular_expressions.html) for details on finding and replacing code.
It's possible that the formatting may not account for all the scenarios that would invalidate the JSON. (Sometimes it's an extra comma after the last item that makes it invalid.)
Note that including the body in the search creates other problems as well. The search results show the most immediate matches in the JSON file. If several topics have matches for the keyword in the body, these matches might appear before other files that have matches in the title, summary, or keywords. This is because this simple search does not provide any weighting mechanisms for the content.
## Customizing search results
At some point, you may want to customize the search results more. Here's a little more detail that will be helpful. The search.json file retrieves various page values:
```json
{% raw %}---
title: search
layout: none
search: exclude
---
[
{% for page in site.pages %}
{% unless page.search == "exclude" %}
{
"title": "{{ page.title | escape }}",
"tags": "{{ page.tags }}",
"keywords": "{{page.keywords}}",
"url": "{{ page.url | remove: "/"}}",
"summary": "{{page.summary | strip }}"
},
{% endunless %}
{% endfor %}
{% for post in site.posts %}
{
"title": "{{ post.title | escape }}",
"tags": "{{ post.tags }}",
"keywords": "{{post.keywords}}",
"url": "{{ post.url }}",
"summary": "{{post.summary | strip }}"
}
{% unless forloop.last %},{% endunless %}
{% endfor %}
]
{% endraw %}
```
The \_includes/topnav.html file then makes use of these values:
```html
<li>
<!--start search-->
<div id="search-demo-container">
<input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
<ul id="results-container"></ul>
</div>
<script src="{{ "js/jekyll-search.js" }}" type="text/javascript"></script>
<script type="text/javascript">
SimpleJekyllSearch.init({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
dataSource: '{{ "search.json" }}',
searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "'", "\"}}">{title}</a></li>',
noResultsText: '{{site.data.strings.search_no_results_text}}',
limit: 10,
fuzzy: true,
})
</script>
<!--end search-->
</li>
```
Where you see `{url}` and `{title}`, the search is retrieving the values for these as specified in the search.json file.
## More robust search
Overall, the built-in search only works for small documentation projects. If you have more robust search needs, consider integrating [Google Custom Search](https://cse.google.com/cse/), [Algolia](http://algolia.com), or [Swifttype](http://swiftype.com).
{% include links.html %}

110
pages/mydoc/mydoc_series.md
View File

@ -1,110 +0,0 @@
---
title: Series
tags: [content_types]
keywords: series, connected articles, tutorials, hello world
last_updated: July 3, 2016
summary: "You can automatically link together topics belonging to the same series. This helps users know the context within a particular process."
sidebar: mydoc_sidebar
permalink: mydoc_series.html
folder: mydoc
---
## Using series for pages
You create a series by looking for all pages within a tag namespace that contain certain frontmatter. Here's a <a href="mydoc_seriesdemo1.html">demo</a>.
## 1. Create the series button
First create an include that contains your series button:
{% raw %}
```html
<div class="seriesContext">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Series Demo <span class="caret"></span></button>
<ol class="dropdown-menu">
{% assign pages = site.pages | sort:"weight" %}
{% for p in pages %}
{% if p.series == "ACME series" %}
{% if p.url == page.url %}
<li class="active"> → {{p.weight}}. {{p.title}}</li>
{% else %}
<li>
<a href="{{p.url | remove: "/"}}">{{p.weight}}. {{p.title}}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ol>
</div>
</div>
```
{% endraw %}
Change "ACME series" to the name of your series.
Save this in your \_includes/custom folder as something like series\_acme.html.
{% include warning.html content="With pages, there isn't a universal namespace created from tags or categories like there is with Jekyll posts. As a result, you have to loop through all pages. If you have a lot of pages in your site (e.g., 1,000+), then this looping will create a slow build time. If this is the case, you will need to rethink the approach to looping here." %}
## 2. Create the "next" include
Now create another include for the Next button at the bottom of the page. Copy the following code, changing the series name to your series'name:
{% raw %}
```html
<p>{% assign series_pages = site.tags.series_acme %}
{% for p in pages %}
{% if p.series == "ACME series" %}
{% assign nextTopic = page.weight | plus: "1" %}
{% if p.weight == nextTopic %}
<a href="{{p.url}}"><button type="button" class="btn btn-primary">Next: {{p.weight}} {{p.title}}</button></a>
{% endif %}
{% endif %}
{% endfor %}
</p>
```
{% endraw %}
Change "acme" to the name of your series.
Save this in your \_includes/custom/mydoc folder as series\_acme\_next.html.
## 3. Add the correct frontmatter to each of your series pages
Now add the following frontmatter to each page in the series:
```json
series: "ACME series"
weight: 1.0
```
With weights, Jekyll will treat 10 as coming after 1. If you have more than 10 items, consider changing `plus: "1.0"` to `plus: "0.1"`.
Additionally, if your page names are prefaced with numbers, such as "1. Download the code," then the {% raw %}`{{p.weight}}`{% endraw %} will create a duplicate number. In that case, just remove the {% raw %}`{{p.weight}}`{% endraw %} from both code samples here.
## 4. Add links to the series button and next button on each page.
On each series page, add a link to the series button at the top and a link to the next button at the bottom.
{% raw %}
```liquid
<!-- your frontmatter goes here -->
{% include custom/series_acme.html %}
<!-- your page content goes here ... -->
{% include custom/series_acme_next.html %}
```
{% endraw %}
## Changing the series drop-down color
The Bootstrap menu uses the `primary` class for styling. If you change this class in your theme, the Bootstrap menu should automatically change color as well. You can also just use another Bootstrap class in your button code. Instead of `btn-primary`, use `btn-info` or `btn-warning`. See [Labels][mydoc_labels] for more Bootstrap button classes.
## Using a collection with your series
Instead of copying and pasting the button includes on each of your series, you could also create a collection and define a layout for the collection that has the include code. For more information on creating collections, see [Collections][mydoc_collections] for more details.
{% include links.html %}

22
pages/mydoc/mydoc_seriesdemo1.md
View File

@ -1,22 +0,0 @@
---
title: Series demo 1
summary: "This is the first post in the series."
series: "ACME series"
weight: 1
last_updated: July 3, 2016
sidebar: mydoc_sidebar
permalink: mydoc_seriesdemo1.html
folder: mydoc
---
{% include custom/series_acme_next.html %}
This is the first post in the series.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
{% include links.html %}

24
pages/mydoc/mydoc_seriesdemo2.md
View File

@ -1,24 +0,0 @@
---
title: Series demo 2
summary: "This is the second post in the series."
series: "ACME series"
weight: 2
last_updated: July 3, 2016
sidebar: mydoc_sidebar
permalink: mydoc_seriesdemo2.html
folder: mydoc
---
{% include custom/series_acme_next.html %}
This is the second post in the series.
Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo.
{% include links.html %}

24
pages/mydoc/mydoc_seriesdemo3.md
View File

@ -1,24 +0,0 @@
---
title: Series demo 3
last_updated: May 17, 2016
summary: "This is the third post in the series."
series: "ACME series"
weight: 3
last_updated: July 3, 2016
sidebar: mydoc_sidebar
permalink: mydoc_seriesdemo3.html
folder: mydoc
---
{% include custom/series_acme_next.html %}
This is the third post in the series.
Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
{% include links.html %}

26
pages/mydoc/mydoc_seriesdemo4.md
View File

@ -1,26 +0,0 @@
---
title: Series demo 4
summary: "This is the fourth post in the series."
series: "ACME series"
weight: 4
last_updated: July 3, 2016
sidebar: mydoc_sidebar
permalink: mydoc_seriesdemo4.html
folder: mydoc
---
{% include custom/series_acme_next.html %}
This is the fourth post in the series.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in ultrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius.
{% include links.html %}

167
pages/mydoc/mydoc_shuffle.html
View File

@ -1,167 +0,0 @@
---
title: Shuffle layout
tags: [special_layouts]
last_updated: November 30, 2015
keywords: shuffle, card layout, dynamic grid, doc portal, support portal
summary: "This layout shows an example of a knowledge-base style navigation system, where there is no hierarchy, just groups of pages that have certain tags."
permalink: mydoc_shuffle.html
sidebar: mydoc_sidebar
folder: mydoc
---
{% if site.output == "pdf" %}
{{site.data.alerts.note}} The content on this page doesn't display well on PDF, but I included it anyway so you could see the problems this layout poses if you're including it in PDF. {{site.data.alerts.end}}
{% endif %}
{% unless site.output == "pdf" %}
<script src="js/jquery.shuffle.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
{% endunless %}
<div class="filter-options">
<button class="btn btn-primary" data-group="all">All</button>
<button class="btn btn-primary" data-group="getting_started">Getting Started</button>
<button class="btn btn-primary" data-group="formatting">Formatting</button>
<button class="btn btn-primary" data-group="publishing">Publishing</button>
<button class="btn btn-primary" data-group="content-types">Content types</button>
<button class="btn btn-primary" data-group="single_sourcing">Single Sourcing</button>
<button class="btn btn-primary" data-group="special_layouts">Special Layouts</button>
</div>
<div id="grid" class="row">
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["getting_started"]'>
<div class="panel panel-default">
<div class="panel-heading">Getting started</div>
<div class="panel-body">
If you're getting started with Jekyll, see the links in this section. It will take you from the beginning level to comfortable.
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["content-types"]'>
<div class="panel panel-default">
<div class="panel-heading">Content types</div>
<div class="panel-body">
This section lists different content types and how to work with them.
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "content-types" %}
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["formatting"]'>
<div class="panel panel-default">
<div class="panel-heading">Formatting</div>
<div class="panel-body">
These topics get into formatting syntax, such as images and tables, that you'll use on each of your pages:
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "formatting" %}
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["single_sourcing"]'>
<div class="panel panel-default">
<div class="panel-heading">Single Sourcing</div>
<div class="panel-body">These topics cover strategies for single_sourcing. Single sourcing refers to strategies for re-using the same source in different outputs for different audiences or purposes.
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "single_sourcing" %}
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["publishing"]'>
<div class="panel panel-default">
<div class="panel-heading">Publishing</div>
<div class="panel-body">When you're building, publishing, and deploying your Jekyll site, you might find these topics helpful.
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "publishing" %}
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["special_layouts"]'>
<div class="panel panel-default">
<div class="panel-heading">Special Layouts</div>
<div class="panel-body">
These pages highlight special layouts outside of the conventional page and TOC hierarchy.
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "special_layouts" %}
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- sizer -->
<div class="col-xs-6 col-sm-4 col-md-1 shuffle_sizer"></div>
</div><!-- /#grid -->
{% unless site.output == "pdf" %}
{% include initialize_shuffle.html %}
{% endunless %}
{{site.data.alerts.note}} This was mostly an experiment to see if I could break away from the hierarchical TOC and provide a different way of arranging the content. However, this layout is somewhat problematic because it doesn't allow you to browse other navigation options on the side while viewing a topic.{{site.data.alerts.end}}

84
pages/mydoc/mydoc_sidebar_navigation.md
View File

@ -1,84 +0,0 @@
---
title: Sidebar Navigation
tags: [getting_started]
last_updated: July 3, 2016
keywords: sidebar, accordion, yaml, iteration, for loop, navigation, attributes, conditional filtering
summary: "The sidebar navigation uses a jQuery component called Navgoco. The sidebar is a somewhat complex part of the theme that remembers your current page, highlights the active item, stays in a fixed position on the page, and more. This page explains a bit about how the sidebar was put together."
sidebar: mydoc_sidebar
permalink: mydoc_sidebar_navigation.html
folder: mydoc
---
## Navgoco foundation
The sidebar uses the [Navgoco jQuery plugin](https://github.com/tefra/navgoco) as its basis. Why not use Bootstrap? Navgoco provides a few features that I couldn't find in Bootstrap:
* Navgoco sets a cookie to remember the user's position in the sidebar. If you refresh the page, the cookie allows the plugin to remember the state.
* Navgoco inserts an `active` class based on the navigation option that's open. This is essential for keeping the accordion open.
* Navgoco includes the expand and collapse features of a sidebar.
In short, the sidebar has some complex logic here. I've integrated Navgoco's features with the sidebar.html and sidebar data files to build the sidebar. It's probably the most impressive part of this theme. (Other themes usually aren't focused on creating hierarchies of pages, but this kind of hierarchy is important in a documentation site.)
## Accordion sidebar feature
The sidebar.html file (inside the \_includes folder) contains the `.navgoco` method called on the `#mysidebar` element.
There are some options to set within the `.navgoco` method. The only noteworthy option is `accordion`. This option makes it so when you expand a section, the other sections collapse. It's a way of keeping your navigation controls condensed.
The value for `accordion` is a Boolean (`true` or `false`). By default, the `accordion` option is set as `true`. If you don't want the accordion, set it to `false`. Note that there's also a block of code near the bottom of sidebar.html that is commented out. Uncomment out that section to have the Collapse all and Expand All buttons appear.
There's a danger with setting the accordion to `false`. If you click Expand All and the sidebar expands beyond the dimensions of the browser, users will be stuck. When that happens, it's hard to collapse it. As a best practice, leave the sidebar's accordion option set to `true`.
## Fixed position sidebar
The sidebar has one other feature &mdash; this one from Bootstrap. If the user's viewport is tall enough, the sidebar remains fixed on the page. This allows the user to scroll down the page and still keep the sidebar in view.
In the customsscripts.js file in the js folder, there's a function that adds an `affix` class if the height of the browser window is greater than 800 pixels. If the browser's height is less than 800 pixels, the `nav affix` class does not get inserted. As a result, the sidebar can slide up and down as the user scrolls up and down the page.
Depending on your content, you may need to adjust `800` pixel number. If your sidebar is so long that having it in a fixed position makes it so the bottom of the sidebar gets cut off, increase the `800` pixel number here to a higher number.
## Opening sidebar links into external pages
In the attributes for each sidebar item, if you use `external_url` instead of `url`, the theme will insert the link into an `a href` element that opens in a blank target.
For example, the sidebar.html file contains the following code:
{% raw %}
```liquid
{% if folderitem.external_url %}
<li><a href="{{folderitem.external_url}}" target="_blank" rel="noopener">{{folderitem.title}}</a></li>
```
{% endraw %}
You can see that the `external_url` is a condition that applies a different formatting. Although this feature is available, I recommend putting any external navigation links in the top navigation bar instead of the side navigation bar.
## Sidebar item highlighting
The sidebar.html file inserts an `active` class into the sidebar element when the `url` attribute in the sidebar data file matches the page URL.
For example, the sidebar.html file contains the following code:
{% raw %}
```liquid
{% elsif page.url == folderitem.url %}
<li class="active"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
```
{% endraw %}
If the `page.url` matches the `subfolderitem.url`, then an `active` class gets applied. If not, the `active` class does not get applied.
The `page.url` in Jekyll is a site-wide variable. If you insert {% raw %}`{{page.url}}`{% endraw %} on a page, it will render as follows: {{page.url}}. The `url` attribute in the sidebar item must match the page URL in order to get the `active` class applied.
This is why the `url` value in the sidebar data file looks something like this:
```yaml
- title: Understanding how the sidebar works
permalink: mydoc_understand_sidebar.html
output: web, pdf
```
Note that the url does not include the project folder where the file is stored. This is because the site uses permalinks, which pulls the topics out of subfolders and places them into the root directory when the site builds.
Now the page.url and the item.url can match and the `active` class can get applied. With the `active` class applied, the sidebar section remains open.
{% include links.html %}

27
pages/mydoc/mydoc_special_layouts.md
View File

@ -1,27 +0,0 @@
---
title: Special layouts overview
tags: [special_layouts]
keywords: layouts, information design, presentation
last_updated: July 3, 2016
summary: "This theme has a few special layouts. Special layouts include the JS files they need directly in the page. The JavaScript for each special layout does not load by default for every page in the site."
sidebar: mydoc_sidebar
permalink: mydoc_special_layouts.html
folder: mydoc
---
{% include note.html content="By \"layout,\" I'm not referring to the layouts in \_layouts in the project files. I'm referring to special ways of presenting information on the same \"page\" layout." %}
## FAQ layout
See {{site.data.mydoc_urls.mydoc_faq.link}} for an example of the FAQ format, which follows an accordion, collapse/expand format. This code is from Bootstrap.
## Knowledgebase layout
See {{site.data.mydoc_urls.mydoc_kb_layout.link}} for a possible layout for knowledge base articles. This layout looks for pages containing specific tags.
## Shuffle layout
If you want a dynamic card layout that allows you to filter the cards, see {{site.data.mydoc_urls.mydoc_shuffle.link}}. This uses the Shuffle JS library.
{% include links.html %}

12
pages/mydoc/mydoc_support.md
View File

@ -1,12 +0,0 @@
---
title: Support
tags: [getting_started, troubleshooting]
keywords: questions, troubleshooting, contact, support
last_updated: July 3, 2016
summary: "Contact me for any support issues."
sidebar: mydoc_sidebar
permalink: mydoc_support.html
folder: mydoc
topnav: topnav
---

55
pages/mydoc/mydoc_supported_features.md
View File

@ -1,55 +0,0 @@
---
title: Supported features
tags:
- getting_started
keywords: "features, capabilities, scalability, multichannel output, dita, hats, comparison, benefits"
last_updated: "July 16, 2016"
summary: "If you're not sure whether Jekyll and this theme will support your requirements, this list provides a semi-comprehensive overview of available features."
published: true
sidebar: mydoc_sidebar
permalink: mydoc_supported_features.html
folder: mydoc
---
Before you get into exploring Jekyll as a potential platform for help content, you may be wondering if it supports some basic features needed to fulfill your tech doc requirements. The following table shows what is supported in Jekyll and this theme.
## Supported features
Features | Supported | Notes
--------|-----------|-----------
Content re-use | Yes | Supports re-use through Liquid. You can re-use variables, snippets of code, entire pages, and more. In DITA speak, this includes conref and keyref. See [Content reuse][mydoc_content_reuse] for more details.|
Markdown | Yes | You can author content using Markdown syntax, specifically [kramdown](https://kramdown.gettalong.org/). This is a wiki-like syntax for HTML that you can probably pick up in 10 minutes. Where Markdown falls short, you can use HTML. Where HTML falls short, you use Liquid, which is a scripting that allows you to incorporate more advanced logic.|
Responsive design | Yes | Uses [Bootstrap framework](http://getbootstrap.com/) for responsive design.
Translation | Yes | To translate content, send the generated HTML to your translation group. You can translate the Markdown source if your translator accepts the format, but usually Markdown is problematic. Note that this theme isn't structured well to accommodate translation projects.|
Collaboration | Yes | You collaborate with Jekyll projects the same way that developers collaborate with software projects. (You don't need a CMS.) Because you're working with text file formats, you can use any version control software (Git, Mercurial, Perforce, Bitbucket, etc.) as a CMS for your files.|
Scalability | Yes | Your site can scale to any size. It's up to you to determine how you will design the information architecture for your pages. You can choose what you display at first, second, third, fourth, and more levels, etc. Note that when your project has thousands of pages, the build time will be longer (maybe 1 minute per thousand pages?). It really depends on how many for loops you have iterating through the pages. I recommend that you use [smaller repos](http://idratherbewriting.com/2017/05/26/big-repos-versus-small-repos/) in your content architecture. |
Lightweight architecture | Yes | You don't need a LAMP stack (Linux, Apache, MySQL, PHP) architecture to get your site running. All of the building is done on your own machine, and you then push the static HTML files onto a server.|
Skinnability | Yes | You can skin your Jekyll site to look identical to pretty much any other site online. If you have a UX team, they can really skin and design the site using all the tools familiar to the modern designer -- JavaScript, HTML5, CSS, jQuery, and more. Jekyll is built on the modern web development stack rather than the XML stack (XSLT, XPath, XQuery). See [this tutorial](http://jekyllrb.com/tutorials/convert-site-to-jekyll/) for details on how to create your own Jekyll theme. |
Support | Yes | The community for your Jekyll site isn't so much other tech writers (as is the case with DITA) but rather the wider web development community. [Jekyll Talk](http://talk.jekyllrb.com) is a great resource. So is [Stack Overflow](https://stackoverflow.com/questions/tagged/jekyll). See the [Getting Help](http://jekyllrb.com/help/) section of Jekyll. |
Blogging features | Yes | There is a simple blogging feature. This appears as [news](news.html) and is intended to promote news that applies across products.|
Versioning | Yes | Jekyll doesn't version your files. You upload your files to a version control system such as Github. Your files are versioned there.
PC platform | Yes | Jekyll runs on Windows. Although the experience working on the command line is better on a Mac, Windows also works, especially now that Jekyll 3.0 dropped dependencies on Python, which wasn't available by default on Windows.
jQuery plugins | Yes | You can use any jQuery plugins you and other JavaScript, CMS, or templating tools. However, note that if you use Ruby plugins, you can't directly host the source files on Github Pages because Github Pages doesn't allow Ruby plugins. Instead, you can just push your output to any web server. If you're not planning to use Github Pages, there are no restrictions on any plugins of any sort. Jekyll makes it super easy to integrate every kind of plugin imaginable. This theme doesn't actually use any plugins, so you can publish on Github if you want.
Bootstrap integration | Yes | This theme is built on [Bootstrap](http://getbootstrap.com/). If you don't know what Bootstrap is, basically this means there are hundreds of pre-built components, styles, and other elements that you can simply drop into your site. For example, the responsive quality of the site comes about from the Bootstrap code base.
Fast-loading pages| Yes | This is one of the Jekyll's strengths. Because the files are static, they loading extremely fast, approximately 0.5 seconds per page. You can't beat this for performance. (A typically database-driven site like WordPress averages about 2.5 + seconds loading time per page.) Because the pages are all static, it means they are also extremely secure. You won't get hacked like you might with a WordPress site.
Themes | Yes | You can have different themes for different outputs. If you know CSS, theming both the web and print outputs is pretty easy.
Open source | Yes | This theme is entirely open source. Every piece of code is open, viewable, and editable. Note that this openness comes at a price &mdash; it's easy to make changes that break the theme or otherwise cause errors.
Offline viewing | Yes | This theme uses relative linking throughout, so you can view the content offline and on any webserver without configuring urls and baseurls in your configuration file.
## Features not available
The following features are not available.
Features | Supported | Notes
--------|-----------|-----------
CMS interface | No | Unlike with WordPress, you don't log into an interface and navigate to your files. You work with text files and preview the site dynamically in your browser. Don't worry -- this is part of the simplicy that makes Jekyll awesome. I recommend using WebStorm as your text editor.
WYSIWYG interface | No | I use WebStorm to author content, because I like working in text file formats. But you can use any Markdown editor you want (e.g., Lightpaper for Mac, Marked) to author your content.
Different outputs | No | This theme provides a single website output that contains documentation for multiple products. Unlike previous iterations of the theme, it's not intended to support different outputs from the same content. However, you can easily set things up to do this by simply creating multiple configuration files and running different builds for each configuration file.
Robust search | No | The search feature is a simplistic JSON search. For more robust search, you should integrate Swiftype or Algolia. However, those services aren't currently integrated into the theme.
Standardized templates | No | You can create pages with any structure you want. The theme does not enforce topic types such as a task or concept as the DITA specification does.
Integration with Swagger | No | You can link to a SwaggerUI output, but there is no built-in integration of SwaggerUI into this documentation theme.
Templates for endpoints | No | Although static site generators work well with API documentation, there aren't any built-in templates specific to endpoints in this theme. You could construct your own, though.
eBook output | No | There isn't an eBook output for the content.
{% include links.html %}

111
pages/mydoc/mydoc_syntax_highlighting.md
View File

@ -1,111 +0,0 @@
---
title: Syntax highlighting
tags: [formatting]
keywords: rouge, pygments, prettify, color coding,
last_updated: July 3, 2016
summary: "You can apply syntax highlighting to your code. This theme uses pygments and applies color coding based on the lexer you specify."
sidebar: mydoc_sidebar
permalink: mydoc_syntax_highlighting.html
folder: mydoc
---
## About syntax highlighting
For syntax highlighting, use fenced code blocks optionally followed by the language syntax you want:
<pre>
```java
import java.util.Scanner;
public class ScannerAndKeyboard
{
public static void main(String[] args)
{ Scanner s = new Scanner(System.in);
System.out.print( "Enter your name: " );
String name = s.nextLine();
System.out.println( "Hello " + name + "!" );
}
}
```
</pre>
This looks as follows:
```java
import java.util.Scanner;
public class ScannerAndKeyboard
{
public static void main(String[] args)
{ Scanner s = new Scanner(System.in);
System.out.print( "Enter your name: " );
String name = s.nextLine();
System.out.println( "Hello " + name + "!" );
}
}
```
Fenced code blocks require a blank line before and after.
If you're using an HTML file, you can also use the `highlight` command with Liquid markup.
<pre>
{% raw %}{% highlight java %}
import java.util.Scanner;
public class ScannerAndKeyboard
{
public static void main(String[] args)
{ Scanner s = new Scanner(System.in);
System.out.print( "Enter your name: " );
String name = s.nextLine();
System.out.println( "Hello " + name + "!" );
}
}
{% endhighlight %}{% endraw %}
</pre>
Result:
{% highlight java %}
import java.util.Scanner;
public class ScannerAndKeyboard
{
public static void main(String[] args)
{ Scanner s = new Scanner(System.in);
System.out.print( "Enter your name: " );
String name = s.nextLine();
System.out.println( "Hello " + name + "!" );
}
}
{% endhighlight %}
The theme has syntax highlighting specified in the configuration file as follows:
```
highlighter: rouge
```
The syntax highlighting is done via the css/syntax.css file.
## Available lexers
The keywords you must add to specify the highlighting (in the previous example, `ruby`) are called "lexers." You can search for "lexers." Here are some common ones I use:
* js
* html
* yaml
* css
* json
* php
* java
* cpp
* dotnet
* xml
* http
{% include links.html %}

141
pages/mydoc/mydoc_tables.md
View File

@ -1,141 +0,0 @@
---
title: Tables
tags: [formatting]
keywords: datatables, tables, grids, markdown, multimarkdown, jquery plugins
last_updated: July 16, 2016
datatable: true
summary: "You can format tables using either multimarkdown syntax or HTML. You can also use jQuery datatables (a plugin) if you need more robust tables."
sidebar: mydoc_sidebar
permalink: mydoc_tables.html
folder: mydoc
---
## Multimarkdown Tables
You can use Multimarkdown syntax for tables. The following shows a sample:
```
| Priority apples | Second priority | Third priority |
|-------|--------|---------|
| ambrosia | gala | red delicious |
| pink lady | jazz | macintosh |
| honeycrisp | granny smith | fuji |
```
**Result:**
| Priority apples | Second priority | Third priority |
|-------|--------|---------|
| ambrosia | gala | red delicious |
| pink lady | jazz | macintosh |
| honeycrisp | granny smith | fuji |
{% include note.html content="You can't use block level tags (paragraphs or lists) inside Markdown tables, so if you need separate paragraphs inside a cell, use `<br/><br/>`." %}
## HTML Tables {#htmltables}
If you need a more sophisticated table syntax, use HTML syntax for the table. Although you're using HTML, you can use Markdown inside the table cells by adding `markdown="span"` as an attribute for the `td` tag, as shown in the following table. You can also control the column widths.
```html
<table>
<colgroup>
<col width="30%" />
<col width="70%" />
</colgroup>
<thead>
<tr class="header">
<th>Field</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td markdown="span">First column **fields**</td>
<td markdown="span">Some descriptive text. This is a markdown link to [Google](http://google.com). Or see [some link][mydoc_tags].</td>
</tr>
<tr>
<td markdown="span">Second column **fields**</td>
<td markdown="span">Some more descriptive text.
</td>
</tr>
</tbody>
</table>
```
**Result:**
<table>
<colgroup>
<col width="30%" />
<col width="70%" />
</colgroup>
<thead>
<tr class="header">
<th>Field</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td markdown="span">First column **fields**</td>
<td markdown="span">Some descriptive text. This is a markdown link to [Google](http://google.com). Or see [some link][mydoc_tags].</td>
</tr>
<tr>
<td markdown="span">Second column **fields**</td>
<td markdown="span">Some more descriptive text.
</td>
</tr>
</tbody>
</table>
## jQuery DataTables
You also have the option of using a [jQuery DataTable](https://www.datatables.net/), which gives you some additional capabilities. To use a jQuery DataTable in a page, include `datatable: true` in a page's frontmatter. This tells the default layout to load the necessary CSS and javascript bits and to include a `$(document).ready()` function that initializes the DataTables library.
You can change the options used to initialize the DataTables library by editing the call to `$('table.display').DataTable()` in the default layout. The available options for Datatables are described in the [DataTable documentation](https://www.datatables.net/manual/options), which is excellent.
You also must add a class of `display` to your tables. You can change the class, but then you'll need to change the trigger defined in the `$(document).ready()` function in the default layout from `table.display` to the class you prefer.
You can also add page-specific triggers (by copying the `<script></script>` block from the default layout into the page) and classes, which lets you use different options on different tables.
If you use an HTML table, adding `class="display"` to the `<table>` tag is sufficient.
Markdown, however, doesn't allow you to add classes to tables, so you'll need to use a trick: add `<div class="datatable-begin"></div>` before the table and `<div class="datatable-end"></div>` after the table. The default layout includes a jQuery snippet that automagically adds the `display` class to any table it finds between those two markers. So you can start with this (we've trimmed the descriptions for display):
```markdown
<div class="datatable-begin"></div>
Food | Description | Category | Sample type
------- | ------------------------------------- | -------- | -----------
Apples | A small, somewhat round ... | Fruit | Fuji
Bananas | A long and curved, often-yellow ... | Fruit | Snow
Kiwis | A small, hairy-skinned sweet ... | Fruit | Golden
Oranges | A spherical, orange-colored sweet ... | Fruit | Navel
<div class="datatable-end"></div>
```
and get this:
<div class="datatable-begin"></div>
Food | Description | Category | Sample type
------- | ------------------------------------------------------------------------------------------------- | -------- | -----------
Apples | A small, somewhat round and often red-colored, crispy fruit grown on trees. | Fruit | Fuji
Bananas | A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates. | Fruit | Snow
Kiwis | A small, hairy-skinned sweet fruit with green-colored insides and seeds. | Fruit | Golden
Oranges | A spherical, orange-colored sweet fruit commonly grown in Florida and California. | Fruit | Navel
<div class="datatable-end"></div>
Notice a few features:
* You can keyword search the table. When you type a word, the table filters to match your word.
* You can sort the column order.
* You can page the results so that you show only a certain number of values on the first page and then require users to click next to see more entries.
Read more of the [DataTable documentation](https://www.datatables.net/manual/options) to get a sense of the options you can configure. You should probably only use DataTables when you have long, massive tables full of information.
{% include note.html content=" Try to keep the columns to 3 or 4 columns only. If you add 5+ columns, your table may create horizontal scrolling with the theme. Additionally, keep the column heading titles short." %}
{% include links.html %}

18
pages/mydoc/mydoc_tag_archives_overview.md
View File

@ -1,18 +0,0 @@
---
title: Tag archives overview
keywords: archives, tagging
last_updated: July 3, 2016
tags: [navigation]
summary: "This is an overview to the tag archives section. Really the only reason this section is listed explicitly in the TOC here is to demonstrate how to add a third-level to the navigation."
sidebar: mydoc_sidebar
permalink: mydoc_tag_archives_overview.html
folder: mydoc
---
## Reasons for tags
Tags provide alternate groupings for your content. In the documentation for this theme, there are a number of equally plausible ways I could have grouped the content. The folder names and items I chose for each item could have been grouped in other ways with good reason.
Tags allow you to go beyond the traditional hierarchical classification and provide other groupings. For example, the same item can belong to two different groups. You can also introduce other dimensions not used in your table of contents, such as platform-specific tags or audience-specific tags.
{% include links.html %}

186
pages/mydoc/mydoc_tags.md
View File

@ -1,186 +0,0 @@
---
title: Tags
audience: writer, designer
tags: [navigation]
last_updated: July 16, 2016
keywords: tags, navigation, buttons, links, association
summary: "Tags provide another means of navigation for your content. Unlike the table of contents, tags can show the content in a variety of arrangements and groupings. Implementing tags in this Jekyll theme is somewhat of a manual process."
sidebar: mydoc_sidebar
permalink: mydoc_tags.html
folder: mydoc
---
## Add a tag to a page
You can add tags to pages by adding `tags` in the frontmatter with values inside brackets, like this:
```
---
title: 5.0 Release Notes
permalink: release_notes_5_0.html
tags: [formatting, single_sourcing]
---
```
## Tags overview
{% include note.html content=" With posts, tags have a namespace that you can access with <code>posts.tags.tagname</code>, where <code>tagname</code> is the name of the tag. You can then list all posts in that tag namespace. But pages don't off this same tag namespace, so you could actually use another key instead of <code>tags</code>. Nevertheless, I'm using the same <code>tags</code> approach for posts as with pages." %}
To prevent tags from getting out of control and inconsistent, first make sure the tag appears in the \_data/tags.yml file. If it's not there, the tag you add to a page won't be read. I added this check just to make sure I'm using the same tags consistently and not adding new tags that don't have tag archive pages.
{% include note.html content="In contrast to WordPress, with Jekyll to get tags on pages you have to build out the functionality for tags so that clicking a tag name shows you all pages with that tag. Tags in Jekyll are much more manual." %}
Additionally, you must create a tag archive page similar to the other pages named tag_{tagname}.html folder. This theme doesn't auto-create tag archive pages.
For simplicity, make all your tags single words (connect them with hyphens if necessary).
## Setting up tags
Tags have a few components.
1. In the \_data/tags.yml file, add the tag names you want to allow. For example:
```json
allowed-tags:
- getting_started
- overview
- formatting
- publishing
- single_sourcing
- special_layouts
- content types
```
3. Create a tag archive file for each tag in your tags_doc.yml list. Name the file following the same pattern in the tags folder, like this: tag_collaboration.html.
Each tag archive file needs only this:
{% raw %}
```liquid
---
title: "Collaboration pages"
tagName: collaboration
search: exclude
permalink: tag_collaboration.html
sidebar: mydoc_sidebar
---
{% include taglogic.html %}
```
{% endraw %}
{% include note.html content="In the \_includes/mydoc folder, there's a taglogic.html file. This file (included in each tag archive file) has common logic for getting the tags and listing out the pages containing the tag in a table with summaries or truncated excerpts. You don't have to do anything with the file &mdash; just leave it there because the tag archive pages reference it." %}
4. Change the title, tagName, and permalink values to be specific to the tag name you just created.
By default, the \_layouts/page.html file will look for any tags on a page and insert them at the bottom of the page using this code:
```liquid
{% raw %}<div class="tags">
{% if page.tags != null %}
<b>Tags: </b>
{% assign projectTags = site.data.tags.allowed-tags %}
{% for tag in page.tags %}
{% if projectTags contains tag %}
<a href="{{ "tag_" | append: tag | append: ".html" }}" class="btn btn-default navbar-btn cursorNorm" role="button">{{page.tagName}}{{tag}}</a>
{% endif %}
{% endfor %}
{% endif %}
</div>{% endraw %}
```
Because this code appears on the \_layouts/page.html file by default, you don't need to do anything in your page to get the tags to appear. However, if you want to alter the placement or change the button color, you can do so within the \_includes/taglogic.html file.
You can change the button color by changing the class on the button from `btn-info` to one of the other button classes bootstrap provides. See [Labels][mydoc_labels] for more options on button class names.
## Retrieving pages for a specific tag
If you want to retrieve pages outside of a particular tag_archive page, you could use this code:
{% raw %}
```liquid
Getting started pages:
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
```
{% endraw %}
Here's how that code renders:
Getting started pages:
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
If you want to sort the pages alphabetically, you have to apply a `sort` filter:
```liquid
{% raw %}
Getting started pages:
<ul>
{% assign sorted_pages = site.pages | sort: 'title' %}
{% for page in sorted_pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% endraw %}
```
Here's how that code renders:
Getting started pages:
<ul>
{% assign sorted_pages = site.pages | sort: 'title' %}
{% for page in sorted_pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: "/"}}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
## Efficiency
Although the tag approach here uses `for` loops, these are somewhat inefficient on a large site. Most of my tech doc projects don't have hundreds of pages (like my blog does). If your project does have hundreds of pages, this `for` loop approach with tags is going to slow down your build times.
Without the ability to access pages inside a universal namespace with the page type, there aren't many workarounds here for faster looping.
With posts (instead of pages), since you can access just the posts inside `posts.tag.tagname`, you can be a lot more efficient with the looping.
Still, if the build times are getting long (e.g., 1 or 2 minutes per build), look into reducing the number of `for` loops on your site.
## Empty tags?
If your page shows "tags:" at the bottom without any value, it could mean a couple of things:
* You're using a tag that isn't specified in your allowed tags list in your tags.yml file.
* You have an empty `tags: []` property in your frontmatter.
If you don't want tags to appear at all on your page, remove the tags property from your frontmatter.
## Remembering the right tags
Since you may have many tags and find it difficult to remember what tags are allowed, I recommend creating a template that prepopulates all your frontmatter with all possible tags. Then just remove the tags that don't apply.
See [WebStorm Text Editor][mydoc_webstorm_text_editor] for tips on creating file templates in WebStorm.
{% include links.html %}

28
pages/mydoc/mydoc_themes.md
View File

@ -1,28 +0,0 @@
---
title: Themes
tags: [publishing]
keywords: themes, styles, colors, css
last_updated: July 3, 2016
summary: "You can choose between two different themes (one green, the other blue) for your projects. The theme CSS is stored in the CSS folder and configured in the configuration file for each project."
sidebar: mydoc_sidebar
permalink: mydoc_themes.html
folder: mydoc
---
{% include note.html content="The [gem-based theme](https://jekyllrb.com/docs/themes/) approach is not yet integrated into this theme." %}
## Theme options
You can choose a green or blue theme, or you can create your own. In the css folder, there are two theme files: theme-blue.css and theme-green.css. These files have the most common CSS elements extracted in their own CSS file. Just change the hex colors to the ones you want.
In the \_includes/head.html file, specify the theme file you want the output to use &mdash; for example, `theme_file: theme-green.css`. See this line:
```html
<link rel="stylesheet" href="css/theme-green.css" />
```
## Theme differences
The differences between the themes is fairly minimal. The main navigation bar, sidebar, buttons, and heading colors change color. That's about it.
In a more sophisticated theming approach, you could use Sass files to generate rules based on options set in a data file, but I kept things simple here.
{% include links.html %}

81
pages/mydoc/mydoc_troubleshooting.md
View File

@ -1,81 +0,0 @@
---
title: Troubleshooting
tags: [troubleshooting]
keywords: trouble, problems, support, error messages, problems, failure, error, #fail
last_updated: July 3, 2016
summary: "This page lists common errors and the steps needed to troubleshoot them."
sidebar: mydoc_sidebar
permalink: mydoc_troubleshooting.html
folder: mydoc
---
## Issues building the site
### Address already in use
When you try to build the site, you get this error in iTerm:
```
jekyll 2.5.3 | Error: Address already in use - bind(2)
```
This happens if a server is already in use. To fix this, edit your config file and change the port to a unique number.
If the previous server wasn't shut down properly, you can kill the server process using these commands:
`ps aux | grep jekyll`
Find the PID (for example, it looks like "22298").
Then type `kill -9 22298` where "22298" is the PID.
Alternatively, type the following to stop all Jekyll servers:
```
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')
```
### shell file not executable
If you run into permissions errors trying to run a shell script file (such as mydoc_multibuild_web.sh), you may need to change the file permissions to make the sh file executable. Browse to the directory containing the shell script and run the following:
```
chmod +x build_writer.sh
```
## shell file not runnable
If you're using a PC, rename your shell files with a .bat extension.
### "page 0" cross references in the PDF
If you see "page 0" cross-references in the PDF, the URL doesn't exist. Check to make sure you actually included this page in the build.
If it's not a page but rather a file, you need to add a `noCrossRef` class to the file so that your print stylesheet excludes the counter from it. Add `class="noCrossRef"` as an attribute to the link. In the css/printstyles.css file, there is a style that should remove the counter from anchor elements with this class.
### The PDF is blank
Check the prince-list.txt file in the output to see if it contains links. If not, you have something wrong with the logic in the prince-list.txt file. Check the conditions.html file in your \_includes to see if the audience specified in your configuration file aligns with the buildAudience in the conditions.html file
### Sidebar not appearing
If you build your site but the sidebar doesn't appear, check the following:
Look in your PDF config file and make sure you have a sidebar property, such as this:
```
pdf_sidebar: product2_sidebar
```
Make sure each TOC item has an output property that specifies web or pdf.
Understanding how the theme works can be helpful in troubleshooting. The \_includes/sidebar.html file loops through the values in the \_data/sidebar.yml file. There are `if` statements that check whether the conditions (as specified in the conditions.html file) are met. If the sidebar.yml item doesn't have the right output, then it won't get displayed in the sidebar. It would instead get skipped.
### Sidebar isn't collapsed
If the sidebar levels aren't collapsed, usually your JavaScript is broken somewhere. Open the JavaScript Console and look to see where the problem is. If one script breaks, then other scripts will break too, so troubleshooting it is a little tricky.
### Search isn't working
If the search isn't working, check the JSON validity in the search.json file in your output folder. Usually something is invalid. Identify the problematic line, fix the file, or put `search: exclude` in the frontmatter of the file to exclude it from search.
{% include links.html %}

90
pages/mydoc/mydoc_webstorm_text_editor.md
View File

@ -1,90 +0,0 @@
---
title: WebStorm Text Editor
keywords: webstorm, sublime, markdown, atom, gnome, notepad ++, textpad, bbedit
last_updated: March 20, 2016
summary: "You can use a variety of text editors when working with a Jekyll project. WebStorm from IntelliJ offers a lot of project-specific features, such as find and replace, that make it ideal for working with tech comm projects."
sidebar: mydoc_sidebar
permalink: mydoc_webstorm_text_editor.html
folder: mydoc
---
## About text editors and WebStorm
There are a variety of text editors available, but I like WebStorm the best because it groups files into projects, which makes it easy to find all instances of a text string, to do find and replace operations across the project, and more.
If you decide to use WebStorm, here are a few tips on configuring the editor.
## Remove unnecessary plugins
By default, WebStorm comes packaged with a lot more functionality than you probably need. You can lighten the editor by removing some of the plugins. Go to **WebStorm > Preferences > Plugins** and clear the check boxes of plugins you don't need.
## Set default tab indent to 3 spaces instead of 4
You can set the way the tab works, and whether it uses spaces or a tab character. For details, see [Code Style. JavaScript](https://www.jetbrains.com/help/webstorm/2016.1/code-style-javascript.html?origin=old_help#d658997e132) in WebStorm's help.
On a Mac, go to **WebStorm > Preferences > Editor > Code Style > Other File Types**. Don't select the "Use tab character" check box. Set **4** for the **Tab size** and **Indent** check boxes.
On Windows, go to **File > Settings > Editor > Code Style > Other File Types** to access the same menu.
## Add the Markdown Support plugin
Since you'll be writing in Markdown, having color coding and other support for Markdown is important. Install the Markdown Support plugin by going to **WebStorm > Preferences > Plugins** and clicking **Install JetBrains Plugin**. Search for **Markdown Support**. You can also implement the Markdown Navigator plugin.
## Enable Soft Wraps (word wrapping)
Most likely you'll want to enable soft wraps, which wraps lines rather than extending them out forever and requiring you to scroll horizontally to see the text. To enable softwrapping, go to **WebStorm > Preferences > Editor > General** and see the Soft Wraps section. Select the **Use soft wraps in editor** check box.
## Exclude a directory
When you're searching for content, you don't want to edit any file that appears in the \_site directory. You can exclude a directory from Webstorm by right-clicking the directory and choosing **Mark Directory As** and then selecting **Excluded**.
## Set tabs to 4 spaces
You can set the default number of spaces a tab sets, including whether Webstorm uses a tab character or spaces. You want spaces, and you want to set this to default number of spaces to ```4```. Note that this is due to the way Kramdown handles the continuation
of lists.
To set the indentation, see the "Tabs and Indents" topic in this [Code Style. Javascript](https://www.jetbrains.com/help/webstorm/2016.1/code-style-javascript.html?origin=old_help#d658997e132) topic in Webstorm's help.
## Shortcuts
It can help to learn a few key shortcuts:
|Command | Shortcuts |
|-------|--------|
| Shift + Shift | Allows you to find a file by searching for its name. |
| Shift + Command + F | Find in whole project. (WebStorm uses the term "Find in path".) |
| Shift + Command + R | Replace in whole project. (Again, WebStorm calls it "Replace in path.") |
| Command + F | Find on page |
| Shift + R | Replace on page |
| Right-click > Add to Favorites | Allows you to add files to a Favorites section, which expands below the list of files in the project pane. |
| Shift + tab | Applies outdenting (opposite of tabbing) |
| Shift + Function + F6 | Rename a file |
| Command + Delete | Delete a file |
| Command + 2 | Show Favorites pane |
| Shift + Option + F | Add to Favorites |
{{site.data.alerts.tip}} If these shortcut keys aren't working for you, make sure you have the "Max OS X 10.5+" keymap selected. Go to <b>WebStorm > Preferences > Keymap</b> and select it there. {{site.data.alerts.end}}
## Finding files
When I want to find a file, I browse to the file in the preview site and copy the page name in the URL. Then in Webstorm I press **Shift** twice and paste in the file name. The search feature automatically highlights the file I want, and I press **Enter**.
## Identifying changed files
When you have the Git and Github integration, changed files appear in blue. This lets you know what needs to be committed to your repository.
## Creating file templates
Rather than insert the frontmatter by hand each time, it's much faster to simply create a Jekyll template. To create a Jekyll template in WebStorm:
1. Right-click a file in the list of project files, and select **New > Edit File Templates**.
If you don't see the Edit File Templates option, you may need to create a file template first. Go to **File > Default Settings > Editor > File and Code Templates**. Create a new file template with an md extension, and then close and restart WebStorm. Then repeat this step and you will see the File Templates option appear in the right context menu.
2. In the upper-left corner of the dialog box that appears, click the **+** button to create a new template.
3. Name it something like Jekyll page. Insert the frontmatter you want, and save it.
To use the Jekyll template, when you create a new file in your WebStorm project, you can select your Jekyll file template.
## Disable pair quotes
By default, each time you type `'`, WebStorm will pair the quote (creating two quotes). You can disable this by going to **WebStorm > Preferences > Editor > Smartkeys**. Clear the **Insert pair quotes** check box.

142
pages/mydoc/mydoc_workflow_maps.md
View File

@ -1,142 +0,0 @@
---
title: Workflow maps
tags: [formatting]
keywords: release notes, announcements, what's new, new features
last_updated: July 16, 2016
summary: "Version 6.0 of the Documentation theme for Jekyll reverts back to relative links so you can view the files offline. Additionally, you can store pages in subdirectories. Templates for alerts and images are available."
sidebar: mydoc_sidebar
permalink: mydoc_workflow_maps.html
folder: mydoc
---
## Workflow maps overview
You can implement workflow maps at the top of your pages. This is helpful if you're describing a process that involves multiple topics. See the following demos:
* [Simple workflow maps][p2_sample1]
* [Complex workflow maps][p2_sample6]
## Simple workflow maps
1. Create an include at \_includes/custom/usermap.html, where usermap.html contains the workflow and links you want. See the usermap.html as an example. It should look something like this:
```xml
<div id="userMap">
<div class="content"><a href="p2_sample1.html"><div class="box box1">Connect to ADB</div></a></div>
<div class="arrow">→</div>
<div class="content"><a href="p2_sample2.html"><div class="box box2">Download and Build the Starter Kit</div></a></div>
<div class="arrow">→</div>
<div class="content"><a href="p2_sample3.html"><div class="box box3">Take a Tour</div></a></div>
<div class="arrow">→</div>
<div class="content"><a href="p2_sample4.html"><div class="box box4">Load Your Widgets</div></a></div>
<div class="arrow">→</div>
<div class="content"><a href="p2_sample5.html"><div class="box box5">Query for Something</div></a></div>
<div class="clearfix"></div>
</div>
```
You can have only 5 possible workflow squares across. Also, the links must be manually coded HTML like those shown, not automated Markdown links. (This is because the boxes are linked.)
2. Where you want the user maps to appear, add the sidebar properties shown in red below:
<pre>
---
title: Sample 1 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample1
folder: product2
<span class="red">simple_map</span>: true
<span class="red">map_name</span>: usermap
<span class="red">box_number</span>: 1
---
</pre>
In the page.html layout, the following code gets activated when `simple_map` equals `true`:
```
{% raw %}{% if page.simple_map == true %}
<script>
$(document).ready ( function(){
$('.box{{page.box_number}}').addClass('active');
});
</script>
{% include custom/{{page.map_name}}.html %}
{% endif %}{% endraw %}
```
The script adds an `active` class to the box number, which automatically makes the active workflow box become highlighted based on the page you're viewing.
The `map_name` gets used as the name of the included file.
## Complex workflow maps
The simpler user workflow allows for 5 workflow steps. If you have a more complex workflow, with multiple possible steps, branching, and more, consider using a complex workflow map. This map uses modals to show a list of instructions and links for each step.
1. Create an include at \_includes/custom/usermapcomplex.html, where usermapcomplex.html contains the workflow and links you want. See the usermapcomplex.html as an example. The code in that file simply implements Bootstrap modals to create the pop-up boxes. Add your custom content inside the modal body:
```
<div class="modal-body">
<p>This is just dummy text ... Your first steps should be to get started. You will need to do the following:</p>
<ul>
<li><a href="p2_sample6.html">Sample 6</a></li>
<li><a href="p2_sample7.html">Sample 7</a></li>
<li><a href="p2_sample8.html">Sample 8</a></li>
</ul>
<p>If you run into any of these setup issues, you must solve them before you can continue on.</p>
</div>
```
The existing usermapcomplex.html file just has 3 workflow square modals. If you need more, duplicate the modal code. In the duplicated code, make sure you make the following values in red unique (but the same within the same modal):
<pre>
<button type="button" class="btn btn-default btn-lg modalButton3" data-toggle="modal" data-target="<span class="red">#myModal3</span>">Publish your app</button>
<!-- Modal -->
<div class="modal fade" id="<span class="red">myModal3</span>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
</pre>
2. For each topic where you want the modal to appear, insert the following properties in your frontmatter:
<pre>
---
title: Sample 6 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample6
<span class="red">complex_map: true</span>
<span class="red">map_name: usermapcomplex</span>
<span class="red">box_number: 1</span>
toc: false
folder: product2
---
</pre>
When your frontmatter contains `complex_map` equal to `true`, the following code gets activated in the page layout.html file:
```
In the page.html layout, the following code gets activated when `map` equals `true`:
```
{% raw %}{% if page.complex_map == true %}
<script>
$(document).ready ( function(){
$('.modalButton{{page.box_number}}').addClass('active');
});
</script>
{% include custom/{{page.map_name}}.html %}
{% endif %}{% endraw %}
```
```
{% include links.html %}

426
pages/mydoc/mydoc_yaml_tutorial.md
View File

@ -1,426 +0,0 @@
---
title: YAML tutorial in the context of Jekyll
tags: [formatting]
keywords: search
summary: "YAML is a format that relies on white spacing to separate out the various elements of content. Jekyll lets you use Liquid with YAML as a way to parse through the data. Storing items for your table of contents is one of the most common uses of YAML with Jekyll."
sidebar: mydoc_sidebar
permalink: mydoc_yaml_tutorial.html
folder: mydoc
---
<style>
.result {
background-color: #f0f0f0;
border: 1px solid #dedede;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
## Overview
One of the most interesting features of Jekyll is the ability to separate out data elements from formatting elements using a combination of YAML and Liquid. This setup is most common when you're trying to create a table of contents.
Not many Jekyll themes actually have a robust table of contents, which is critical when you are creating any kind of documentation or reference material that has a lot of pages.
Here's the basic approach in creating a table of contents. You store your data items in a YAML file using YAML syntax. (I'll go over more about YAML syntax in a later section.) You then create your HTML structure in another file, such as sidebar.html. You might leverage one of the many different table of content frameworks (such as [Navgoco](https://github.com/tefra/navgoco)) that have been created for this HTML structure.
Then, using Liquid syntax for loops and conditions, you access all of those values from the data file and splice them into HTML formatting. This will become more clear as we go through some examples.
## YAML overview
Rather than just jump into YAML at the most advanced level, I'm going to start from ground zero with an introduction to YAML and how you access basic values in your data files using Jekyll.
Note that you don't actually have to use Jekyll when using YAML. YAML is used in a lot of other systems and is a format completely independent of Jekyll. However, because Jekyll uses Liquid, it gives you a lot of power to parse through your YAML data and make use of it.
YAML itself doesn't do anything on its own &mdash; it's just a way of storing your data in a specific structure that other utilities can parse.
## YAML basics
You can read about YAML from a lot of different sources. Here are some basic characteristics of YAML:
* YAML ("YAML Ain't Markup Language") doesn't use markup tags. This means you won't see any kind of angle brackets. It uses white space as a way to form the structure. This makes YAML much more human readable.
* Because YAML does use white space for the structure, YAML is extremely picky about the exactness of spaces. If you have just one extra space somewhere, it can cause the whole file to be invalid.
* For each new level in YAML, you indent two spaces. Each level provides a different access point for the content. You use dot notation to access each new level.
* Because tabs are not universally implemented the same way in editors, a tab might not equate to two spaces. In general, it's best to manually type two spaces to create a new level in YAML.
* YAML has several types of elements. The most common are mappings and lists. A mapping is simply a key-value pair. A list is a sequence of items. List start with hyphens.
* Items at each level can have various properties. You can create conditions based on the properties.
* You can use "for" loops to iterate through a list.
I realize a lot of this vague and general; however, it will become a lot more clear as we go through some concrete examples.
In the \_data folder, there's a file called samplelist.yml. All of these examples come from that file.
## Example 1: Simple mapping
**YAML:**
```yaml
name:
husband: Tom
wife: Shannon
```
**Markdown + Liquid:**
```liquid
{% raw %}<p>Husband's name: {{site.data.samplelist.name.husband}}</p>
<p>Wife's name: {{site.data.samplelist.name.wife}}</p>{% endraw %}
```
Notice that in order to access the data file, you use `site.data.samplelist` where as `samplelist` is the name of the YAML file.
**Result:**
<div class="result">
<p>Husband's name: {{site.data.samplelist.name.husband}}</p>
<p>Wife's name: {{site.data.samplelist.name.wife}}</p>
</div>
## Example 2: Line breaks
**YAML:**
```yaml
feedback: >
This is my feedback to you.
Even if I include linebreaks here,
all of the linebreaks will be removed when the value is inserted.
block: |
This pipe does something a little different.
It preserves the breaks.
This is really helpful for code samples,
since you can format the code samples with
the appropriate
```
**Markdown:**
```liquid
{% raw %}<p><b>Feedback</b></p>
<p>{{site.data.samplelist.feedback}}</p>
<p><b>Block</b></p>
<p>{{site.data.samplelist.block}}</p>{% endraw %}
```
**Result:**
<div class="result">
<p><b>Feedback</b></p>
<p>{{site.data.samplelist.feedback}}</p>
<p><b>Block</b></p>
<p>{{site.data.samplelist.block}}</p>
</div>
The right angle bracket `>` allows you to put the value on the next lines (which must be indented). Even if you create a line break, the output will remove all of those line breaks, creating one paragraph.
The pipe `|` functions like the angle bracket in that it allows you to put the values for the mapping on the next lines (which again must be indented). However, the pipe does preserve all of the line breaks that you use. This makes the pipe method ideal for storing code samples.
## Example 3: Simple list
**YAML**:
```yaml
bikes:
- title: mountain bikes
- title: road bikes
- title: hybrid bikes
```
**Markdown + Liquid:**
```liquid
{% raw %}<ul>
{% for item in site.data.samplelist.bikes %}
<li>{{item.title}}</li>
{% endfor %}
</ul>{% endraw %}
```
**Result:**
<div class="result">
<ul>
{% for item in site.data.samplelist.bikes %}
<li>{{item.title}}</li>
{% endfor %}
</ul>
</div>
Here we use a "for" loop to get each item in the bikes list. By using `.title` we only get the `title` property from each list item.
## Example 4: List items
**YAML:**
```yaml
salesteams:
- title: Regions
subfolderitems:
- location: US
- location: Spain
- location: France
```
**Markdown + Liquid:**
{% raw %}
```
{% for item in site.data.samplelist.salesteams %}
<h3>{{item.title}}</h3>
<ul>
{% for entry in item.subfolderitems %}
<li>{{entry.location}}</li>
{% endfor %}
</ul>
{% endfor %}
```
{% endraw %}
**Result:**
<div class="result">
{% for item in site.data.samplelist.salesteams %}
<h3>{{item.title}}</h3>
<ul>
{% for entry in item.subfolderitems %}
<li>{{entry.location}}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
Hopefully you can start to see how to wrap more complex formatting around the YAML content. When you use a "for" loop, you choose the variable of what to call the list items. The variable you choose to use becomes how you access the properties of each list item. In this case, I decided to use the variable `item`. In order to get each property of the list item, I used `item.subfolderitems`.
Each list item starts with the hyphen `–`. You cannot directly access the list item by referring to a mapping. You only loop through the list items. If you wanted to access the list item, you would have to use something like `[1]`, which is how you access the position in an array. You cannot access a list item like you can access a mapping key.
## Example 5: Table of contents
**YAML:**
```yaml
toc:
- title: Group 1
subfolderitems:
- page: Thing 1
- page: Thing 2
- page: Thing 3
- title: Group 2
subfolderitems:
- page: Piece 1
- page: Piece 2
- page: Piece 3
- title: Group 3
subfolderitems:
- page: Widget 1
- page: Widget 2 it's
- page: Widget 3
```
**Markdown + Liquid:**
{% raw %}
```liquid
{% for item in site.data.samplelist.toc %}
<h3>{{item.title}}</h3>
<ul>
{% for entry in item.subfolderitems %}
<li>{{entry.page}}</li>
{% endfor %}
</ul>
{% endfor %}
```
{% endraw %}
**Result:**
<div class="result">
{% for item in site.data.samplelist.toc %}
<h3>{{item.title}}</h3>
<ul>
{% for entry in item.subfolderitems %}
<li>{{entry.page}}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
This example is similar to the previous one, but it's more developed as a real table of contents.
## Example 6: Variables
**YAML:**
```yaml
something: &hello Greetings earthling!
myref: *hello
```
**Markdown:**
{% raw %}
```liquid
{{ site.data.samplelist.myref }}
```
{% endraw %}
**Result:**
<div class="result">
{{ site.data.samplelist.myref }}
</div>
This example is notably different. Here I'm showing how to reuse content in YAML file. If you have the same value that you want to repeat in other mappings, you can create a variable using the `&` symbol. Then when you want to refer to that variable's value, you use an asterisk `*` followed by the name of the variable.
In this case the variable is `&hello` and its value is `Greetings earthling!` In order to reuse that same value, you just type `*hello`.
I don't use variables much, but that's not to say they couldn't be highly useful. For example, let's say you put name of the product in parentheses after each title (because you have various products that you're providing documentation for in the same site). You could create a variable for that product name so that if you change how you're referring to it, you wouldn't have to change all instances of it in your YAML file.
## Example 7: Positions in lists
**YAML:**
```yaml
about:
- zero
- one
- two
- three
```
**Markdown:**
```
{% raw %}{{ site.data.samplelist.about[0] }}{% endraw %}
```
**Result:**
<div class="result">
{{ site.data.samplelist.about[0] }}
</div>
You can see that I'm accessing one of the items in the list using `[0]`. This refers to the position in the array where a list item is. Like most programming languages, you start counting at zero, not one.
I wanted to include this example because it points to the challenge in getting a value from a specific list item. You can't just call out a specific item in a list like you can with a mapping. This is why you usually iterate through the list items using a "for" loop.
## Example 8: Properties from list items at specific positions
**YAML:**
```yaml
numbercolors:
- zero:
properties: red
- one:
properties: yellow
- two:
properties: green
- three:
properties: blue
```
**Markdown + Liquid:**
{% raw %}
```liquid
{{ site.data.samplelist.numbercolors[0].properties }}
```
{% endraw %}
**Result:**
<div class="result">
{{ site.data.samplelist.numbercolors[0].properties }}
</div>
This example is similar as before; however, in this case were getting a specific property from the list item in the zero position.
## Example 9: Conditions
**YAML:**
```yaml
mypages:
- section1: Section 1
audience: developers
product: acme
url: facebook.com
- section2: Section 2
audience: writers
product: acme
url: google.com
- section3: Section 3
audience: developers
product: acme
url: amazon.com
- section4: Section 4
audience: writers
product: gizmo
url: apple.com
- section5: Section 5
audience: writers
product: acme
url: microsoft.com
```
**Markdown + Liquid:**
```liquid
{% raw %}<ul>
{% for sec in site.data.samplelist.mypages %}
{% if sec.audience == "writers" %}
<li>{{sec.url}}</li>
{% endif %}
{% endfor %}
</ul>
{% endraw %}
```
**Result:**
<div class="result">
<ul>
{% for sec in site.data.samplelist.mypages %}
{% if sec.audience == "writers" %}
<li>{{sec.url}}</li>
{% endif %}
{% endfor %}
</ul>
</div>
This example shows how you can use conditions in order to selectively get the YAML content. In your table of contents, you might have a lot of different pages. However, you might only want to get the pages for a particular audience. Conditions lets you get only the items that meet those audience attributes.
Now let's adjust the condition just a little. Let's add a second condition so that the `audience` property has to be `writers` and the `product` property has to be gizmo. This is how you would write it:
```liquid
{% raw %}<ul>
{% for sec in site.data.samplelist.mypages %}
{% if sec.audience == "writers" and sec.product == "gizmo" %}
<li>{{sec.url}}</li>
{% endif %}
{% endfor %}
</ul>{% endraw %}
```
And here is the result:
<div class="result">
<ul>
{% for sec in site.data.samplelist.mypages %}
{% if sec.audience == "writers" and sec.product == "gizmo" %}
<li>{{sec.url}}</li>
{% endif %}
{% endfor %}
</ul>
</div>
## More resources
For more examples and explanations, see this helpful post on tournemille.com: [How to create data-driven navigation in Jekyll](http://www.tournemille.com/blog/How-to-create-data-driven-navigation-in-Jekyll).
{% include links.html %}

239
pages/product1/p1_landing_page.html
View File

@ -1,239 +0,0 @@
---
title: Product 1
keywords: mydoc
sidebar: product1_sidebar
toc: false
permalink: p1_landing_page.html
folder: product1
---
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Services Panels</h2>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-tree fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Service Tabs -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Service Tabs</h2>
</div>
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#service-one" data-toggle="tab"><i class="fa fa-tree"></i> Service One</a>
</li>
<li class=""><a href="#service-two" data-toggle="tab"><i class="fa fa-car"></i> Service Two</a>
</li>
<li class=""><a href="#service-three" data-toggle="tab"><i class="fa fa-support"></i> Service Three</a>
</li>
<li class=""><a href="#service-four" data-toggle="tab"><i class="fa fa-database"></i> Service Four</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="service-one">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
<div class="tab-pane fade" id="service-two">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
<div class="tab-pane fade" id="service-three">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
<div class="tab-pane fade" id="service-four">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
</div>
</div>
</div>
<!-- Service List -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Service List</h2>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-tree fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bomb fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bank fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Six</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-paper-plane fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Seven</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-space-shuttle fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Eight</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-recycle fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Nine</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
</div>
</div>

25
pages/product1/p1_sample1.md
View File

@ -1,25 +0,0 @@
---
title: Sample 1 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample1.html
folder: product1
---
## Sample Content
"Lorem Ipsum" is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

25
pages/product1/p1_sample2.md
View File

@ -1,25 +0,0 @@
---
title: Sample 2 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample2.html
folder: product1
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

25
pages/product1/p1_sample3.md
View File

@ -1,25 +0,0 @@
---
title: Sample 3 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample3.html
folder: product1
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

25
pages/product1/p1_sample4.md
View File

@ -1,25 +0,0 @@
---
title: Sample 4 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample4.html
folder: product1
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

25
pages/product1/p1_sample5.md
View File

@ -1,25 +0,0 @@
---
title: Sample 5 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample5.html
folder: product1
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

25
pages/product1/p1_sample6.md
View File

@ -1,25 +0,0 @@
---
title: Sample 6 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample6.html
folder: product1
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

25
pages/product1/p1_sample7.md
View File

@ -1,25 +0,0 @@
---
title: Sample 7 Topic (Product 1)
keywords: sample
summary: "This is just a sample topic..."
sidebar: product1_sidebar
permalink: p1_sample7.html
folder: product1
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

239
pages/product2/p2_landing_page.html
View File

@ -1,239 +0,0 @@
---
title: Product 2
keywords: mydoc
sidebar: product2_sidebar
toc: false
permalink: p2_landing_page.html
folder: product2
---
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Services Panels</h2>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-tree fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Service Tabs -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Service Tabs</h2>
</div>
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#service-one" data-toggle="tab"><i class="fa fa-tree"></i> Service One</a>
</li>
<li class=""><a href="#service-two" data-toggle="tab"><i class="fa fa-car"></i> Service Two</a>
</li>
<li class=""><a href="#service-three" data-toggle="tab"><i class="fa fa-support"></i> Service Three</a>
</li>
<li class=""><a href="#service-four" data-toggle="tab"><i class="fa fa-database"></i> Service Four</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="service-one">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
<div class="tab-pane fade" id="service-two">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
<div class="tab-pane fade" id="service-three">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
<div class="tab-pane fade" id="service-four">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem. Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum, nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem neque velit in. At quia quaerat asperiores.</p>
</div>
</div>
</div>
</div>
<!-- Service List -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Service List</h2>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-tree fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bomb fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bank fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Six</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-paper-plane fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Seven</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-space-shuttle fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Eight</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
<div class="media">
<div class="pull-left">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-recycle fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="media-body">
<h4 class="media-heading">Service Nine</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
</div>
</div>
</div>
</div>

29
pages/product2/p2_sample1.md
View File

@ -1,29 +0,0 @@
---
title: Sample 1 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample1.html
simple_map: true
map_name: usermap
box_number: 1
folder: product2
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

29
pages/product2/p2_sample10.md
View File

@ -1,29 +0,0 @@
---
title: Sample 10 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample10.html
complex_map: true
map_name: usermapcomplex
box_number: 2
toc: false
folder: product2
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

29
pages/product2/p2_sample11.md
View File

@ -1,29 +0,0 @@
---
title: Sample 11 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample11.html
complex_map: true
map_name: usermapcomplex
box_number: 2
toc: false
folder: product2
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

29
pages/product2/p2_sample12.md
View File

@ -1,29 +0,0 @@
---
title: Sample 12 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample12.html
complex_map: true
map_name: usermapcomplex
box_number: 3
toc: false
folder: product2
---
## Sample Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
## More sample content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
{% include links.html %}

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