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

Made sidebar configurable based on product, platform, version properties in configuration file. Also added ability to add series that link together pages.

Browse Source
This commit is contained in:
Tom Johnson 2015-05-17 19:01:41 -07:00
parent 4945f23b2d
commit 6d98971517
40 changed files with 808 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
_config.yml
View File

@ -1,57 +1,56 @@
# the audience for this site. even if you're not single sourcing, you still need to define an audience here.
project: documentation-theme-jekyll-designer
audience: designer
# your project's title. appears in the top nav home button.
title: Jekyll for Designers
product: all
# currently the version is used only in the print cover
version: 2.0
platform: all
version: all
topnav_title: Jekyll for Designers
topnav_version: 2.0
# appears above the sidebar (optional)
tagline: Guide for designers
# You can leave the url empty so that you can upload the files into any domain. You just need to define the baseurl.
url: "http://tomjohnson1492.github.io"
baseurl: "/documentation-theme-jekyll/designer"
# the subpath of your site. If you're publishing to the root directory, just type "". Usually set this as your project name.
baseurl: "/documentation-theme-jekyll"
# this is how you will preview the site on your local machine. leave as is.
host: 127.0.0.1
# specified here in case you have multiple sites and want to view them simultaneously in different tabs (you'll need different ports)
port: 4006
# Add a feedback email for the top navigation bar
host: 127.0.0.1
url: "http://tomjohnson1492.github.io"
feedback_email: tomjohnson1492@gmail.com
# whether you want the sidebar to use an accordion, so that other sections in the toc collapse when one section expands.
sidebar_accordion: true
# Disqus shortname for commenting features. leave blank if you don't want a comment form.
disqus_shortname: idrbwjekyll
# Insert your google analytics tracking number. leave blank if you don't want google analytics integration.
google_analytics: UA-408430-5
markdown: redcarpet
# options for the redcarpet markdown processing. leave as is, especially the "with_toc_data" or the mini-toc won't appear.
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
# pygments requires you to install a gem on your machine. if you don't want this, use rouge instead.
highlighter: pygments
# put all files or directories that you want to exclude from your project here.
print: false
floating_nav: true
# suffix: index.html
exclude:
- _drafts
- bower_components
- .idea
- _site
# these are defaults that get applied to each page or post's frontmatter. leave as is.
permalink: :title
defaults:
-
scope:
@ -81,17 +80,6 @@ defaults:
sass:
sass_dir: _sass
# this enables the tooltip collection.
collections:
tooltips:
output: true
# is this a print build? if so, put true. otherwise, false.
print: false
floating_nav: true
# this option allows you to add a suffix to the permalinks in case you're publishing on a host such as Salesforce's site.com.
# on Salesforce's site.com, uploaded files must have index.html to display correctly. Most likely just ignore or remove this section unless
# you're publishing on Salesforce.
# suffix: index.html
output: true

178
_data/sidebar.yml
View File

@ -7,241 +7,411 @@ entries:
subcategories:
- title: Overview
audience: writer, designer
platform: all
product: all
version: all
print: true
items:
- title: Cover
url: /titlepage/
audience: writer, designer
platform: all
product: all
version: all
print: true
web: false
- title: Introduction
url: /
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Getting started
url: /getting_started/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Setting up the configuration files
url: /config_setup/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Supported features
url: /supported_features/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Troubleshooting
url: /troubleshooting/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Content types
audience: writer, designer
platform: all
product: all
version: all
print: true
items:
- title: Pages and posts
url: /pages/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Collections
url: /collections/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Formatting
audience: writer, designer
platform: all
product: all
version: all
print: true
items:
- title: Alerts
url: /alerts/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Images
url: /images/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Links
url: /links/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Syntax highlighting
url: /syntax_highlighting/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Videos
url: /videos/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Labels
url: /labels/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Icons
url: /icons/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Tables
url: /tables/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Tooltips
url: /adding_tooltips/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Navtabs
url: /navtabs/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Shortcuts for Jekyll syntax
url: /shortcuts_for_jekyll_syntax/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Single Sourcing
audience: writer, designer
platform: all
product: all
version: all
print: true
items:
- title: Conditional logic
url: /conditional_logic/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Content re-use
url: /content_reuse/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Excluding files
url: /excluding_files/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Publishing
audience: writer, designer
platform: all
product: all
version: all
print: true
items:
- title: Build arguments
url: /build_arguments/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Create a PDF
url: /create_pdf/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Creating a help API
url: /help_api/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Setting up iTerm profiles
url: /iterm_profiles/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Common Git commands
url: /git_commands/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Navigation
audience: writer
platform: all
product: all
version: all
print: true
items:
- title: Configuring sidebar and top navigation
url: /navigation/
audience: designer, writer
platform: all
product: all
version: all
print: true
- title: Tags
url: /tags/
audience: writer, designer
platform: all
product: all
version: all
print: true
- title: Special Layouts
audience: designer
audience: designer, writer
platform: all
product: all
version: all
print: true
print: false
items:
- title: Special layouts
url: /special_layouts/
audience: designer
platform: all
product: all
version: all
print: true
- title: Creating a series
url: /series/
audience: designer
platform: all
product: all
version: all
print: all
- title: FAQ layout
url: /faq/
audience: designer
platform: all
product: all
version: all
print: true
- title: KB layout
url: /kb_layout/
audience: designer
platform: all
product: all
version: all
print: true
- title: Scroll
url: /scroll/
audience: designer
platform: all
product: all
version: all
print: true
- title: Shuffle
url: /shuffle/
audience: designer
platform: all
product: all
version: all
print: true
- title: Tag archives
audience: designer, w riter
audience: designer, writer
platform: all
product: all
version: all
print: false
items:
- title: Overview
audience: writer, designer
url: /tag-archives-overview/
audience: writer, designer
platform: all
product: all
version: all
print: false
thirdlevel: #demo's how to add a third level to the sidebar nav.
- title: Third level title
audience: writer, designer
platform: all
product: all
version: all
print: false
thirdlevelitems:
- title: Overview pages
url: /tag-overview/
audience: writer, designer
platform: all
product: all
version: all
print: false
- title: Getting Started pages
url: /tag-getting-started/
audience: writer, designer
platform: all
product: all
version: all
print: false
- title: Single Sourcing pages
url: /tag-single-sourcing/
audience: writer, designer
platform: all
product: all
version: all
print: false
- title: Publishing pages
url: /tag-publishing/
audience: writer, designer
platform: all
product: all
version: all
print: false
- title: Formatting pages
url: /tag-formatting/
audience: writer, designer
platform: all
product: all
version: all
print: false
- title: Special layout pages
url: /tag-special-layouts/
audience: writer, designer
platform: all
product: all
version: all
print: false

1
_data/tags.yml
View File

@ -5,6 +5,7 @@ allowed-tags:
- publishing
- single-sourcing
- special-layouts
- content types

21
_data/topnav.yml
View File

@ -7,14 +7,23 @@ topnav:
- title: About
url: /about/
audience: writer, designer
platform: all
product: all
version: all
- title: Github repo
external_url: https://github.com/tomjohnson1492/documentation-theme-jekyll
audience: writer, designer
platform: all
product: all
version: all
- title: My blog
external_url: http://idratherbewriting.com
audience: writer, designer
platform: all
product: all
version: all
#Topnav dropdowns
topnav_dropdowns:
@ -22,16 +31,28 @@ topnav_dropdowns:
subcategories:
- title: Jekyll resources
audience: writer, designer
platform: all
product: all
version: all
items:
- title: Jekyll documentation
external_url: http://jekyllrb.com/docs/home/
audience: writer, designer
platform: all
product: all
version: all
- title: Jekyll Talk
external_url: https://talk.jekyllrb.com/
audience: designer, writer
platform: all
product: all
version: all
- title: Jekyll on Stackoverflow
external_url: http://stackoverflow.com/questions/tagged/jekyll
audience: writer, designer
platform: all
product: all
version: all

19
_includes/custom/acme_series.html Normal file
View File

@ -0,0 +1,19 @@
<div class="seriesContext">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Acme Process <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 | prepend: site.baseurl | append: site.suffix}}">{{p.weight}}. {{p.title}}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ol>
</div>
</div>

32
_includes/custom/conditions.html
View File

@ -1,15 +1,19 @@
{% if site.audience == "writer" %}
{% assign buildAudience = "writer" %}
{% assign sidebar = site.data.sidebar.entries %}
{% assign topnav = site.data.topnav.topnav %}
{% assign topnav_dropdowns = site.data.topnav.topnav_dropdowns %}
{% assign fileName = "writer_guide" %}
{% elsif site.audience == "designer" %}
{% assign buildAudience = "designer" %}
{% assign sidebar = site.data.sidebar.entries %}
{% assign topnav = site.data.topnav.topnav %}
{% assign topnav_dropdowns = site.data.topnav.topnav_dropdowns %}
{% assign fileName = "designer_guide" %}
{% if site.project == "documentation-theme-jekyll-writer" %}
{% assign audience = "writer" %}
{% assign sidebar = site.data.sidebar.entries %}
{% assign topnav = site.data.topnav.topnav %}
{% assign topnav_dropdowns = site.data.topnav.topnav_dropdowns %}
{% assign version = "all" %}
{% assign product = "all" %}
{% assign platform = "all" %}
{% endif %}
{% if site.project == "documentation-theme-jekyll-designer" %}
{% assign audience = "designer" %}
{% assign sidebar = site.data.sidebar.entries %}
{% assign topnav = site.data.topnav.topnav %}
{% assign topnav_dropdowns = site.data.topnav.topnav_dropdowns %}
{% assign version = "all" %}
{% assign product = "all" %}
{% assign platform = "all" %}
{% endif %}

33
_includes/custom/homepage.md Normal file
View File

@ -0,0 +1,33 @@
{% include linkrefs.html %}
This is a Jekyll theme intended for documentation projects. What makes this theme unique is the approach in using Jekyll for single sourcing, that is, producing multiple outputs from the same theme. For example, you might have 3 different help systems that you're generating from the same Jekyll files. More than anything, this Jekyll theme shows you how to use Jekyll for documentation projects from the perspective of a technical writer.
Note that I'm using this theme for my own technical writing projects, so this is an evolving project.
## Intended audience
Although this theme could be used for any website, I'm assuming that my main audience involves technical writers. Very few technical writers are even aware of Jekyll as a platform, let alone how to use it for tech comm scenarios. The instructions for this theme, therefore, are extensive because they discuss a lot of Jekyll basics as well. I'm not going to assume that you're already familiar with Jekyll, or that you're a UX guru, or that you know how to do backflips in Liquid. I'll try to hold your hand as much as possible.
## Supported features
As far as I can tell, Jekyll supports most of the features a technical writer needs to author and publish content. Most importantly, using Jekyll allows you to take full advantage of a modern web development platform.
As a quick overview, this theme specifically provides the following:
* Bootstrap framework with responsive design
* Integrated search
* Navigation sidebar and top navigation
* Font Awesome
* Options for creating multiple builds for different audiences
See {{supported_features}} for an extensive list.
## Getting started
To get started, see {{getting_started}}. It explains how to create a new project.
## Questions
Feel free to ask me a question if there's something I haven't addressed here.
Tom Johnson <br /><a href="mailto:">tomjohnson1492@gmail.com</a>

11
_includes/custom/links.html
View File

@ -47,3 +47,14 @@
{% capture navigation %}<a href="{{"/navigation" | prepend: site.baseurl}}">Creating navigation</a>{% endcapture %}
{% capture tags %}<a href="{{"/tags" | prepend: site.baseurl}}">Creating tags</a>{% endcapture %}
{% comment %} <!-- SPECIAL LAYOUTS --> {% endcomment %}
{% capture special_layouts %}<a href="{{"/special_layouts" | prepend: site.baseurl}}">Special layouts</a>{% endcapture %}
{% capture series %}<a href="{{"/series" | prepend: site.baseurl}}">Series widget</a>{% endcapture %}
{% capture shuffle %}<a href="{{"/shuffle" | prepend: site.baseurl}}">Shuffle layout</a>{% endcapture %}
{% capture scroll %}<a href="{{"/scroll" | prepend: site.baseurl}}">Scroll layout</a>{% endcapture %}
{% capture kb-layout %}<a href="{{"/kb-layout" | prepend: site.baseurl}}">Knowledgebase layout</a>{% endcapture %}
{% capture faq %}<a href="{{"/faq" | prepend: site.baseurl}}">FAQ layout</a>{% endcapture %}

10
_includes/pagination.html
View File

@ -1,10 +0,0 @@
<ul class="pagination">
{% assign thisSeries = page.series %}
{% for p in site.pages %}
{% if p.series == thisSeries and p.permalink == page.url %}
<li class="active"><a href="{{p.permalink | prepend: site.baseurl}}index.html">{{p.title}}</a></li>
{% else %}
<li><a href="{{p.permalink | prepend: site.baseurl}}index.html">{{p.title}}</a></li>
{% endif %}
{% endfor %}
</ul>

9
_includes/sidebar.html
View File

@ -48,11 +48,11 @@
{% for entry in sidebar %}
{% for subcategory in entry.subcategories %}
{% if subcategory.audience contains buildAudience %}
{% if subcategory.audience contains audience and subcategory.product contains product and subcategory.platform contains platform and subcategory.version contains version and subcategory.web != false %}
<li><a href="#">{{ subcategory.title }}</a>
<ul>
{% for item in subcategory.items %}
{% if item.audience contains buildAudience and item.web != false %}
{% if item.audience contains audience and item.product contains product and item.platform contains platform and item.version contains version and item.web != false %}
{% if item.external_url %}
<li><a href="{{item.external_url}}" target="_blank">{{subcategory.title}}</a></li>
{% elsif page.url contains item.url %}
@ -98,6 +98,5 @@
</p>
{% endif %}
</div>
<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above.-->
<script>$("li.active").parents('li').toggleClass("active");</script>
<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above.-->
<script>$("li.active").parents('li').toggleClass("active");</script>

12
_includes/topnav.html
View File

@ -23,7 +23,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="fa fa-home fa-lg navbar-brand" href="{{ "/index.html" | prepend: site.baseurl }}">&nbsp;<span class="projectTitle"> {{site.title}} {{1.0}}</span></a>
<a class="fa fa-home fa-lg navbar-brand" href="{{ "/index.html" | prepend: site.baseurl }}">&nbsp;<span class="projectTitle"> {{site.topnav_title}} {{site.topnav_version}}</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
@ -33,12 +33,12 @@
{% for entry in topnav %}
{% for subcategory in entry.subcategories %}
{% if subcategory.audience contains buildAudience %}
{% if subcategory.audience contains audience and subcategory.product contains product and subcategory.platform contains platform and subcategory.version contains version and subcategory.web != false %}
{% if subcategory.external_url %}
<li><a href="{{subcategory.external_url}}" target="_blank">{{subcategory.title}}</a></li>
{% elsif page.url contains subcategory.url %}
<li class="active"><a href="{{subcategory.url | prepend: site.baseurl | append: site.suffix}}">{{subcategory.title}}</a></li>
{% else %}
{% else %}
<li><a href="{{subcategory.url | prepend: site.baseurl | append: site.suffix}}">{{subcategory.title}}</a></li>
{% endif %}
{% endif %}
@ -50,15 +50,15 @@
<!-- entries with drop-downs appear here -->
<!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
{% for entry in topnav_dropdowns %}
{% for subcategory in entry.subcategories %}
{% if subcategory.audience contains buildAudience %}
{% if subcategory.audience contains audience and subcategory.product contains product and subcategory.platform contains platform and subcategory.version contains version and subcategory.web != false %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ subcategory.title }}<b class="caret"></b></a>
<ul class="dropdown-menu">
{% for subitem in subcategory.items %}
{% if subitem.audience contains buildAudience %}
{% if subitem.audience contains audience and subitem.product contains product and subitem.platform contains platform and subitem.version contains version and subitem.web != false% %}
{% if subitem.external_url %}
<li><a href="{{subitem.external_url}}" target="_blank">{{subitem.title}}</a></li>
{% elsif page.url contains subitem.url %}

21
_layouts/page.html
View File

@ -1,22 +1,23 @@
---
layout: default
comments: true
---
<div class="post-header">
<h1 class="post-title-main">{{ page.title }}</h1>
<h1 class="post-title-main">{% if page.homepage == true %} {{site.homepage_title}} {% else %}{{ page.title }}{% endif %}</h1>
{% include pagemetadata.html %}
<div class="post-content">
{% if page.summary %}
<div class="summary">{{page.summary}}</div>
{% endif %}
{% if page.summary %}
<div class="summary">{{page.summary}}</div>
{% endif %}
{{content}}
{{content}}
{% include disqus.html %}
{% include disqus.html %}
</div>
</div>
<!-- Footer -->
{% include footer.html %}
<!-- Footer -->
{% include footer.html %}

2
build_designer.sh
View File

@ -1 +1 @@
jekyll serve --config configs/config_designer.yml --destination ../documentation-theme-jekyll-builds/designer
jekyll serve --config config_base.yml,config_designer.yml

6
build_designer_pdf.sh
View File

@ -1,2 +1,6 @@
jekyll serve --config configs/config_designer_pdf.yml --destination ../documentation-theme-jekyll-builds/designer_guide.pdf
jekyll serve --config config_base.yml,config_designer.yml,config_designer_pdf.yml&
sleep 9
prince --input-list=../documentation-theme-jekyll-builds/designer-pdf/prince-file-list.txt -o ../documentation-theme-jekyll-builds/pdf-output/designer.pdf
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')

1
build_designer_prince.sh
View File

@ -1 +0,0 @@
prince --input-list=../documentation-theme-jekyll-builds/designer-pdf/prince-file-list.txt -o ../documentation-theme-jekyll-builds/pdf-output/designer.pdf

3
build_writer.sh
View File

@ -1,2 +1 @@
jekyll serve --config configs/config_writer.yml --destination ../documentation-theme-jekyll-builds/writer
jekyll serve --config_base.yml,config config_writer.yml

7
build_writer_pdf.sh
View File

@ -1 +1,6 @@
jekyll serve --config configs/config_writer_pdf.yml --destination ../documentation-theme-jekyll-builds/writer_guide.pdf
jekyll serve --config_base.yml,config_writer.yml,config config_writer_pdf.yml&
sleep 9
prince --input-list=../documentation-theme-jekyll-builds/writer-pdf/prince-file-list.txt -o ../documentation-theme-jekyll-builds/pdf-output/writer.pdf
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')

1
build_writer_prince.sh
View File

@ -1 +0,0 @@
prince --input-list=../documentation-theme-jekyll-builds/writer-pdf/prince-file-list.txt -o ../documentation-theme-jekyll-builds/pdf-output/writer.pdf

65
config_base.yml Normal file
View File

@ -0,0 +1,65 @@
host: 127.0.0.1
#url: "http://tomjohnson1492.github.io"
feedback_email: tomjohnson1492@gmail.com
sidebar_accordion: true
disqus_shortname: idrbwjekyll
google_analytics: UA-408430-5
markdown: redcarpet
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
highlighter: pygments
print: false
floating_nav: true
# suffix: index.html
exclude:
- _drafts
- bower_components
- .idea
- _site
permalink: :title
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page"
comments: true
search: true
-
scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true
search: true
-
scope:
path: ""
type: "tooltips"
values:
layout: "page"
tooltip: true
search: true
sass:
sass_dir: _sass
collections:
tooltips:
output: true

19
config_designer.yml Normal file
View File

@ -0,0 +1,19 @@
project: documentation-theme-jekyll-designer
audience: designer
product: all
platform: all
version: all
topnav_title: Jekyll for Designers
topnav_version: 2.0
tagline: Guide for designers
baseurl: "/documentation-theme-jekyll/designer"
port: 4006

19
config_designer_pdf.yml Normal file
View File

@ -0,0 +1,19 @@
baseurl: "/documentation-theme-jekyll/designer-pdf"
host: 127.0.0.1
port: 4005
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page_print"
comments: true
search: true
print: true
destination: ../documentation-theme-jekyll-builds/designer_guide.pdf

22
config_writer.yml Normal file
View File

@ -0,0 +1,22 @@
# mandatory definitions
project: documentation-theme-jekyll-writer
audience: writer
product: all
platform: all
version: all
topnav_title: Jekyll for writers
topnav_version: "2.0"
tagline: Guide for writers
baseurl: "/documentation-theme-jekyll/writer"
port: 4008
destination: ../documentation-theme-jekyll-builds/writer

6
config_writer_pdf.yml Normal file
View File

@ -0,0 +1,6 @@
jekyll serve --config config_writer_pdf.yml,config_writer.yml, config_base.yml&
sleep 9
prince --input-list=../documentation-theme-jekyll-builds/writer-pdf/prince-file-list.txt -o ../documentation-theme-jekyll-builds/pdf-output/writer.pdf
kill -9 $(ps aux | grep '[j]ekyll' | awk '{print $2}')

90
configs/config_designer.yml
View File

@ -1,90 +0,0 @@
# the audience for this site. even if you're not single sourcing, you still need to define an audience here.
audience: designer
# your project's title. appears in the top nav home button.
title: Jekyll for Designers
# currently the version is used only in the print cover
version: 2.0
# appears above the sidebar (optional)
tagline: Guide for designers
# leave the url empty so that you can upload the files into any domain. You just need to define the baseurl.
# url: "http://idratherbewriting.com"
# the subpath of your site. If you're publishing to the root directory, just type "". Usually set this as your project name.
baseurl: "/documentation-theme-jekyll/designer"
# this is how you will preview the site on your local machine. leave as is.
host: 127.0.0.1
# specified here in case you have multiple sites and want to view them simultaneously in different tabs (you'll need different ports)
port: 4007
# Add a feedback email for the top navigation bar
feedback_email: tomjohnson1492@gmail.com
# whether you want the sidebar to use an accordion, so that other sections in the toc collapse when one section expands.
sidebar_accordion: true
# Disqus shortname for commenting features. leave blank if you don't want a comment form.
disqus_shortname: idrbwjekyll
# Insert your google analytics tracking number. leave blank if you don't want google analytics integration.
google_analytics: UA-408430-5
markdown: redcarpet
# options for the redcarpet markdown processing. leave as is, especially the "with_toc_data" or the mini-toc won't appear.
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
# pygments requires you to install a gem on your machine. if you don't want this, use rouge instead.
highlighter: pygments
# put all files or directories that you want to exclude from your project here.
exclude:
- _drafts
- bower_components
- .idea
- _site
# these are defaults that get applied to each page or post's frontmatter. leave as is.
permalink: :title
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page"
comments: true
search: true
-
scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true
search: true
-
scope:
path: ""
type: "tooltips"
values:
layout: "page"
tooltip: true
search: true
sass:
sass_dir: _sass
# this enables the tooltip collection.
collections:
tooltips:
output: true
# is this a print build? if so, put true. otherwise, false.
print: false

77
configs/config_designer_pdf.yml
View File

@ -1,77 +0,0 @@
# the audience for this site. even if you're not single sourcing, you still need to define an audience here.
audience: designer
# your project's title. appears in the top nav home button.
title: Jekyll for Designers 2.0
# currently the version is used only in the print cover
version: 2.0
# appears above the sidebar (optional)
tagline: Guide for designers
# the base hostname & protocol for your site (everything at the .com or .org and before)
url: "http://127.0.0.1:4005"
# the subpath of your site. If you're publishing to the root directory, just type "". Usually set this as your project name.
baseurl: "/documentation-theme-jekyll/designer-pdf"
# this is how you will preview the site on your local machine. leave as is.
host: 127.0.0.1
port: 4005 # specified here in case you have multiple sites and want to view them simultaneously (you'll need different ports)
feedback_email: tomjohnson1492@gmail.com
markdown: redcarpet
# options for the redcarpet markdown processing. leave as is, especially the "with_toc_data" or the mini-toc won't appear.
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
highlighter: pygments
# put all files or directories that you want to exclude from your project here.
exclude:
- _drafts
- bower_components
- .idea
- _site
# these are defaults that get applied to each page or post's frontmatter. note that the default layout for pages is page_print instead of page.
permalink: :title
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page_print"
comments: true
search: true
-
scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true
search: true
-
scope:
path: ""
type: "tooltips"
values:
layout: "page"
tooltip: true
search: true
sass:
sass_dir: _sass
# this enables the tooltip collection.
collections:
tooltips:
output: true
# is this a print build? if so, put true. otherwise, false.
print: true

87
configs/config_writer.yml
View File

@ -1,87 +0,0 @@
# the audience for this site. even if you're not single sourcing, you still need to define an audience here.
audience: writer
# your project's title. appears in the top nav home button.
title: Jekyll for Technical Writers 2.0
# currently the version is used only in the print cover
version: 2.0
# appears above the sidebar (optional)
tagline: Guide for technical writers
# the base hostname & protocol for your site (everything at the .com or .org and before)
url: "http://idratherbewriting.com"
# the subpath of your site. If you're publishing to the root directory, just type "". Usually set this as your project name.
baseurl: "/documentation-theme-jekyll/writer"
# this is how you will preview the site on your local machine. leave as is.
host: 127.0.0.1
# specified here in case you have multiple sites and want to view them simultaneously in different tabs (you'll need different ports)
port: 4008
# whether you want the sidebar to use an accordion, such that other sections collapse when one expands.
sidebar_accordion: true
# Disqus shortname for commenting features. leave blank if you don't want a comment form.
disqus_shortname: idrbwjekyll
# Insert your google analytics tracking number. leave blank if you don't want google analytics integration.
google_analytics: UA-408430-5
feedback_email: tomjohnson1492@gmail.com
markdown: redcarpet
# options for the redcarpet markdown processing. leave as is, especially the "with_toc_data" or the mini-toc won't appear.
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
highlighter: pygments
# put all files or directories that you want to exclude from your project here.
exclude:
- _drafts
- bower_components
- .idea
- _site
# this enables the tooltip collection.
collections:
tooltips:
output: true
# these are defaults that get applied to each page or post's frontmatter. leave as is.
permalink: :title
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page"
comments: true
search: true
-
scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true
search: true
-
scope:
path: ""
type: "tooltips"
values:
layout: "page"
tooltip: true
search: true
sass:
sass_dir: _sass
# is this a print build? if so, put true. otherwise, false.
print: false

77
configs/config_writer_pdf.yml
View File

@ -1,77 +0,0 @@
# the audience for this site. even if you're not single sourcing, you still need to define an audience here.
audience: writer
# your project's title. appears in the top nav home button.
title: Jekyll for Technical Writers 2.0
# currently the version is used only in the print cover
version: 2.0
# appears above the sidebar (optional)
tagline: Guide for technical writers
# the base hostname & protocol for your site (everything at the .com or .org and before)
url: "http://127.0.0.1:4005"
# the subpath of your site. If you're publishing to the root directory, just type "". Usually set this as your project name.
baseurl: "/documentation-theme-jekyll/writer-pdf"
# this is how you will preview the site on your local machine. leave as is.
host: 127.0.0.1
port: 4005 # specified here in case you have multiple sites and want to view them simultaneously (you'll need different ports)
feedback_email: tomjohnson1492@gmail.com
markdown: redcarpet
# options for the redcarpet markdown processing. leave as is, especially the "with_toc_data" or the mini-toc won't appear.
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
highlighter: pygments
# put all files or directories that you want to exclude from your project here.
exclude:
- _drafts
- bower_components
- .idea
- _site
# these are defaults that get applied to each page or post's frontmatter. note that the default layout for pages is page_print instead of page.
permalink: :title
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "page_print"
comments: true
search: true
-
scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true
search: true
-
scope:
path: ""
type: "tooltips"
values:
layout: "page"
tooltip: true
search: true
sass:
sass_dir: _sass
# this enables the tooltip collection.
collections:
tooltips:
output: true
# is this a print build? if so, put true. otherwise, false.
print: true

11
css/customstyles.css
View File

@ -661,4 +661,13 @@ div#toc ul li ul li {list-style-type:none;}
background-color: #FAFAFA;
}
span.tagTitle {font-weight: 500;}
span.tagTitle {font-weight: 500;}
li.activeSeries {
font-weight: bold;
}
.seriesContext .dropdown-menu li.active {
font-weight: bold;
margin-left: 20px;
}

39
index.md
View File

@ -7,42 +7,15 @@ tags: overview
{% if site.audience == "writer" %}
{{note}} This is the version of the documentation designed for writers. It has a subset of topics from the designers output.{{end}}
{% include custom/homepage.md %}
{% endif %}
{% if site.audience == "designer" %}
{{note}} This is the version of the documentation designed for designers. The set of topics included here is comprehensive.{{end}}
{% include custom/homepage.md %}
{% endif %}
This is a Jekyll theme intended for documentation projects. What makes this theme unique is the approach in using Jekyll for single sourcing, that is, producing multiple outputs from the same theme. For example, you might have 3 different help systems that you're generating from the same Jekyll files. More than anything, this Jekyll theme shows you how to use Jekyll for documentation projects from the perspective of a technical writer.
Note that I'm using this theme for my own technical writing projects, so this is an evolving project.
## Intended audience
Although this theme could be used for any website, I'm assuming that my main audience involves technical writers. Very few technical writers are even aware of Jekyll as a platform, let alone how to use it for tech comm scenarios. The instructions for this theme, therefore, are extensive because they discuss a lot of Jekyll basics as well. I'm not going to assume that you're already familiar with Jekyll, or that you're a UX guru, or that you know how to do backflips in Liquid. I'll try to hold your hand as much as possible.
## Supported features
As far as I can tell, Jekyll supports most of the features a technical writer needs to author and publish content. Most importantly, using Jekyll allows you to take full advantage of a modern web development platform.
As a quick overview, this theme specifically provides the following:
* Bootstrap framework with responsive design
* Integrated search
* Navigation sidebar and top navigation
* Font Awesome
* Options for creating multiple builds for different audiences
See {{supported_features}} for an extensive list.
## Getting started
To get started, see {{getting_started}}. It explains how to create a new project.
## Questions
Feel free to ask me a question if there's something I haven't addressed here.
Tom Johnson <br /><a href="mailto:">tomjohnson1492@gmail.com</a>

14
pages/content_types/pages.md
View File

@ -22,8 +22,9 @@ Make sure each page has frontmatter at the top like this:
title:
permalink: //
tags: []
keywords: audience:
last_updated
keywords:
audience:
last_updated:
summary:
---
{% include linkrefs.html %}
@ -62,7 +63,6 @@ To create a Jekyll template:
To use the Jekyll template, when you create a new file in your WebStorm project, you can select your Jekyll file template.
## Markdown or HTML format
Pages can be either Markdown or HTML format (specified through either an .md or .html file extension).
@ -79,14 +79,6 @@ Store all your pages inside the pages folder. The number of subfolders inside yo
If you want to use a colon in your page title, you must enclose the title's value in quotation marks.
## Pages versus posts
Most of the theme is designed for using pages, but you can also use posts. Posts are intended for blog entries. They have dates in the filenames, and they sort chronologically when get the posts. Create posts inside the _posts folder.
The latest_posts.html file shows the latest posts. The tagindex.html file sorts posts by tags. The archive.html sorts posts by date.
{{note}} I haven't done much testing with posts, so you may run into some snags there. I'm planning to convert my blog (idratherbewriting.com) to Jekyll using this same theme, and when I do, I'll iron out all the issues with posts. {{end}}
## Github-flavored Markdown
You can use standard Multimarkdown syntax for tables. You can also use fenced code blocks. The configuration file shows the Markdown processor and extensiosn:

16
pages/content_types/posts.md Normal file
View File

@ -0,0 +1,16 @@
---
title: Posts
permalink: /posts/
tags: []
keywords:
audience:
last_updated:
summary: "Posts are designed for blog-like entries. This theme hasn't been designed with much functionality around posts. It's assumed you're using pages for everything."
---
{% include linkrefs.html %}
Most of the theme is designed for using pages, but you can also use posts. Posts are intended for blog entries. They have dates in the filenames, and they sort chronologically when get the posts. Create posts inside the _posts folder.
The latest_posts.html file shows the latest posts. The tagindex.html file sorts posts by tags. The archive.html sorts posts by date.
{{note}} I haven't done much testing with posts, so you may run into some snags there. I'm planning to convert my blog (idratherbewriting.com) to Jekyll using this same theme, and when I do, I'll iron out all the issues with posts. {{end}}

82
pages/overview/config_setup.md
View File

@ -12,44 +12,72 @@ summary: "The configuration file contains important settings for your project. S
## Importance of Configuration File
The configuration file serves important functions with single sourcing. Usually for each site output, you create a unique configuration file for that output.
The configuration file serves important functions with single sourcing. For each site output, you create a unique configuration file for that output.
The configuration file contains all the settings and other details unique to that site build, such as variables, titles, output directories, build folders, and more.
The configuration file contains all the settings and other details unique to that site output, such as variables, titles, output directories, build folders, and more.
## Configuration File Options
{{warning}} This theme is coded to look for specific values set by the configuration file. If something isn't working correctly, check to make sure that you have the configuration values that are defined here properly configured.{{end}}
## Configuration file options
Some of the options you can set in the configuration file determine theme settings. For sample values, see the default configuration file.
Note that you can arbitrary key value pairs in the configuration file, and then you can access them through `site.yourkey`. However, the values in these tables are used to control different aspects of the theme.
| Field | Description |
|-------|-----------|
| **title** | Appears in the top navigation bar as the link to home |
| **version** | Appears next to the title |
| **tagline** | Appears at the top of the left navigation bar |
| **url** | Optional. Recommended to not include this, since it allows you to easily push help from one domain to another (such as from a test environment to a production environment. As long as the baseurl's folder remains the same, the help will display well. I think the only use for the url is for the RSS feed. |
| **baseurl** | Everything that comes after the domain (acme.com). If you publish at acme.com/folder/version/role, then the baseurl is folder/version/role. Jekyll is hard-coded to only display properly when placed inside this baseurl folder. |
| **port** | The port used in the preview mode. This is only for the live preview and doesn't affect the published output. |
| **feedback_email** | Gets configured as the email address in the Send Feedback button in the top navigation bar. |
| **sidebar_accordion** | Boolean. Whether you want the navigation sidebar to use the accordion effect or not. The accordion effect means when you expand a section, the other sections auto-collapse. If you put false, then you can expand multiple sections at once. At the bottom of the navigation sidebar, two links will appear: Collapse All and Expand All. |
| **disqus_shortname** | The disqus site shortname, which is used for comments. If you don't want comment forms via disqus, leave this blank or omit altogether. |
| **markdown** | The processer to use for Markdown. This is a Jekyll-specific setting. |
| **redcarpet** | Extensions used with redcarpet. You can read more about them by searching for redcarpet extensions online. {% include custom/toc_id_note.html %} |
| **highlighter** | The syntax highlighter used. Rouge is also an option. I think Pygments does a better job. You will need to [install Pygments](http://pygments.org/download/) on your machine or else you will see an error. |
| **exclude** | A list of files and directories that you want excluded from the build. By default, all the content in your project is included in the output. |
| **permalink** | The structure used for the link URLs. To read more about permalinks, see [Permalinks](http://jekyllrb.com/docs/permalinks/). |
| **defaults** | Here you can set default values for frontmatter based on the content type (page, post, or collection). |
| **sass** | The directory for sass files. This is a Jekyll-specific settings. Sass isn't customized in this theme. |
| **collections** | Any specific collections (custom content types that extend beyond pages or posts) that you want to define. This theme defines a collection called tooltips. You access this collection by using site.tooltips instead of site.pages or site.posts. Put the tooltip content types inside a folder in your project called \_tooltips.
| **print** | Boolean. Whether this build is a print build or not. This setting allows you to run conditions in your content such as {% raw %} {% if site.print == true %} do this... {% endif %} {% endraw %}. |
| **floating_nav** | Boolean. If you add `false`, then the sidebar navigation won't apply a fixed floating property. When the user scrolls. the nav bar won't stay in the same place. If you have a large nav bar, you may want to turn off the floating properties. Also, for small screens with viewports of 600px of height or smaller, the fixed nav is automatically turned off because the options tend to extend past the visible screen. Usually leave this set to `true` or omit the option altogether (the default is true).
| **suffix** | If you publish on Salesforce's site.com, you have to add index.html to the permalink or else the page won't render. I'm not sure why. If you add `suffix: index.html` in your config file, this file will be appended in the URLs. If you're not publishing to Salesforce, don't add this property to your configuration file.
## Cascading configuration files
When you build or serve Jekyll, you specify the configuration file that you want Jekyll to use. If you have multiple sites you're building, you can put all the common configuration values into a base configuration file. For the unique configuration files, you put them into another configuration file. Jekyll will read multiple configuration files.
The documentation on Jekyll for using multiple configuration files isn't very clear. In my experience, the build command needs to look like this:
```
jekyll serve --config config_base.yml,config_designer.yml
```
Later configuration files will override settings in earlier configuration files.
{{warning}} You cannot use a space after the period.{{end}}
## Configuration settings
| Field | Required? | Description |
|-------|-----------|-----------|
|
| **project** | Required| A unique name for the project. The _includes/custom/conditions.html file will use this project name to determine what sidebar and top nav data files to use. Make this value unique. |
| **audience** | Required | The audience for the output. Each sidebar entry in the _data/sidebar.yml files needs to have an audience attribute that matches the value here in order for the sidebar item to be included.|
| **platform** | Required | The platform for the output. The function is the same as audience -- the sidebar file matches up with attributes defined in the configuration file to determine what sidebar items are included in the build.|
| **product** | Required | Same function as audience, platform, and version.
| **version** | Required | Same function as audience, platform, and product.
| **destination** | Required | The folder where the site is built. If you put this into your same folder as your other files, Jekyll may start building and rebuilding in an infinite loop because it detects more files in the project folder. It's better to specify a folder outside your project folder, by using `../`. |
| **tagline** | Optional | Appears above the sidebar. Usually you put some tag related to the site specific build, such as the audience.|
| **topnav_title** | Required | Appears next to the home button in the top nav bar.|
| **topnav_version** | Optional | Appears next to the title (which is next to the home button) in the top nav bar.|
| **baseurl** | Optional | The folder where the help will appear when published. If you're publishing one version of your doc into a root directory, this isn't needed. However, most likely you will publish each output into its own folder, so add a value for the baseurl. Note that your site *must* be published in this baseurl in order to display correctly. This is because the links in the published site build are not all relative in the same way. However, you can publish the same output onto different domains (as long as you keep the same baseurl folder on those different domains).
| **url** | Optional. | Recommended to not include this, since it allows you to easily push help from one domain to another (such as from a test environment to a production environment. As long as the baseurl's folder remains the same, the help will display well. I think the only use for the url is for the RSS feed. |
| **baseurl** | Optional | The baseurl is everything that comes after the domain (acme.com). If you publish at acme.com/folder/version/role, then the baseurl is folder/version/role. Jekyll is hard-coded to only display properly when placed inside this baseurl folder. |
| **port** | Required | The port used in the preview mode. This is only for the live preview and doesn't affect the published output. If you serve multiple outputs simultaneously, the port must be unique. |
| **feedback_email** | Gets configured as the email address in the Send Feedback button in the top navigation bar.|
| **sidebar_accordion** | Required | Boolean. Whether you want the navigation sidebar to use the accordion effect or not. The accordion effect means when you expand a section, the other sections auto-collapse. If you put false, then you can expand multiple sections at once. At the bottom of the navigation sidebar, two links will appear: Collapse All and Expand All.|
| **floating_nav** | Optional | Boolean. Whether you want the nav bar to float or not when users scroll down. |
| **disqus_shortname** | Optional | The disqus site shortname, which is used for comments. If you don't want comment forms via disqus, leave this blank or omit it altogether. |
| **markdown** | Required | The processor to use for Markdown. This is a Jekyll-specific setting. |
| **redcarpet** | Required | Extensions used with redcarpet. You can read more about them by searching for redcarpet extensions online. {% include custom/toc_id_note.html %} |
| **highlighter** | Optional | The syntax highlighter used. Rouge is also an option. I think Pygments does a better job. You will need to [install Pygments](http://pygments.org/download/) on your machine or else you will see an error. |
| **exclude** | Optional | A list of files and directories that you want excluded from the build. By default, all the content in your project is included in the output. |
| **permalink** | Required | The structure used for the link URLs. To read more about permalinks, see [Permalinks](http://jekyllrb.com/docs/permalinks/). |
| **defaults** | Optional | Here you can set default values for frontmatter based on the content type (page, post, or collection). |
| **sass** | Required | The directory for sass files. This is a Jekyll-specific settings. Sass isn't customized in this theme. |
| **collections** | Optional | Any specific collections (custom content types that extend beyond pages or posts) that you want to define. This theme defines a collection called tooltips. You access this collection by using site.tooltips instead of site.pages or site.posts. Put the tooltip content types inside a folder in your project called \_tooltips. |
| **print** | Optional | Boolean. Whether this build is a print build or not. This setting allows you to run conditions in your content such as {% raw %} {% if site.print == true %} do this... {% endif %} {% endraw %}. |
| **floating_nav** | Optional | Boolean. If you add `false`, then the sidebar navigation won't apply a fixed floating property. When the user scrolls. the nav bar won't stay in the same place. If you have a large nav bar, you may want to turn off the floating properties. Also, for small screens with viewports of 600px of height or smaller, the fixed nav is automatically turned off because the options tend to extend past the visible screen. Usually leave this set to `true` or omit the option altogether (the default is true).|
| **suffix** | Optional | If you publish on Salesforce's site.com, you have to add index.html to the permalink or else the page won't render. If you add `suffix: index.html` in your config file, this file will be appended in the URLs. If you're not publishing to Salesforce, don't add this property to your configuration file.|
## Where to store configuration files
If you have a lot of different site builds (perhaps because you're single sourcing many different outputs), you'll probably want to group the configuration files into a specific folder.
In this theme, the configuration files are listed in the root directory. There are some build scripts in the root directory that simply reference the configuration files.
In this theme, the configuration files are grouped inside the configs folder. There are some build scripts in the root directory that simply reference the configuration files.
For reasons unknown to me, Jekyll won't work if you put the configuration files into a subdirectory and are using multiple configuration files.
## Default config in root

52
pages/overview/getting_started.md
View File

@ -27,21 +27,32 @@ Before you start installing the theme, make sure you have all of these prerequis
## Step 2: Build the theme
Before you start customizing the theme, make sure you can build the theme with the default content and settings first.
1. Make sure you satisfy all the prerequisites as listed in the previous section, "Prerequisites."
1. Download the theme from the [documentation-theme-jekyll Github repository](https://github.com/tomjohnson1492/documentation-theme-jekyll) and unzip it into your ~username/projects folder.
You can either download the theme files directly by clicking the **Download Zip** button on the right of the repo, or use git to clone the repository to your local machine. Note, however, that you won't be using the pull command to update the theme since you'll be customizing it with your own content and won't want to overwrite those customizations, so there isn't a huge need to clone it.
2. After downloading the theme, note some unique aspects of the file structure:
* Inside the configs folder, there's a separate config file for each unique output you're building.
* Each config file has a different preview port and build destination. Each config file also specifies a different audience. The whole point of this theme is to enable single sourcing, which allows you to build multiple outputs from the same source. That's why there are separate config files for each output.
2. Download the theme from the [documentation-theme-jekyll Github repository](https://github.com/tomjohnson1492/documentation-theme-jekyll) and unzip it into your ~username/projects folder.
In general, you build the sites by using build commands that specify the config file and destination, like this:
You can either download the theme files directly by clicking the **Download Zip** button on the right of the repo, or use git to clone the repository to your local machine. Note, however, that you won't be using the pull command to update the theme since you'll be customizing it with your own content and won't want to overwrite those customizations, so there isn't a huge need to clone it.
2. After downloading the theme, note some unique aspects of the file structure:
* In the root directory, there's a separate configuration file for each unique output you're building.
* Each configuration file has a different preview port.
* Each configuration file also specifies a different project (and potentially a different audience, product, platform, and version). By setting unique values for these properties in your configuration file, you determine how the sidebar and top navigation is constructed.
{{tip}} The main goal of this theme is to enable single sourcing. With single sourcing, you build multiple outputs from the same source, with somewhat different content in each site based on the particular product, platform, version, and audience. That's why there are separate configuration files for each output.{{end}}
In general, you build the sites by using build commands that specify the configuration file, like this:
```
jekyll serve --config configs/config_writer.yml --destination ../documentation-theme-jekyll-builds/writer
```
The `--config` parameter specifies the location of the configuration file to be used in the build, and the `--destination` parameter specifies where you want the site to be built.
Because these commands are long and bulky, it's easier to store them in a small shell script and then run the script.
{{tip}} The _config.yml file in the theme's root directory is just a duplicate of the config_designer.yml file inside the configs directory. The _config.yml file in root allows Github Pages to build the site from the Github repo. Unless you're using Github Pages to build your sites, you don't need _config.yml in the root directory. {{end}}
jekyll serve --config config_base.yml,config_designer.yml
```
The `--config` parameter specifies the location of the configuration file to be used in the build. The configuration file itself contains the destination location.
There are two configuration files used here -- config_base.yml contains common settings used in all the configuration files. The config_designer.yml file contains unique configuration properties specific to this build.
{{note}} The _config.yml file in the theme's root directory is just a duplicate of the config_base.yml and config_designer.yml files combined. The _config.yml file in root allows Github Pages to build the site from the Github repo. Unless you're using Github Pages to build your sites, you don't need _config.yml in the root directory. {{end}}
3. In the root directory, you'll find build_writer.sh, which is a simple shell script containing this build argument. Instead of running the command above, run the following:
```
@ -55,7 +66,7 @@ jekyll serve --config configs/config_writer.yml --destination ../documentation-t
```
. build_designer.sh
```
Open a new tab in your browser and preview the site at the preview URL shown.
Open a new tab in your browser and preview the site at the preview URL shown. Notice that the writer output doesn't include the Special Layouts section in the sidebar.
If the theme builds both outputs successfully, great. You can move on to the next section: Customizing the theme. If you run into errors building the basic theme, you must solve them before moving on. See {{troubleshooting}} for more information.
@ -70,30 +81,27 @@ The theme shows two build outputs: one for designers, and one for writers. The d
{{important}} In these instructions, I'll assume your project's name is "acme." I'll also assume you have two audiences you're building your acme project for: developers and marketers. {{end}}
1. If you haven't already downloaded the theme, see the previous section, "Step 2: Build the theme." Press Ctrl+C to stop the previews.
1. In the theme's configs directory, rename config_writer.yml to config_developer.yml and customize all the values inside that file based on the instructions in that file. Do the same with config_designer.yml (changing it to config_marketer.yml) and continue to clone and customize the config file for other audiences you need.
2. In the theme's root directory, rename config_writer.yml to config_developer.yml and customize all the values inside that file based on the instructions {{config_setup}}. Do the same with config_designer.yml (changing it to config_marketer.yml) and continue to clone and customize the config file for other audiences you need.
In this theme, each output requires a separate config file. If you have 10 audiences and you want separate sites for each, then then you'll have 10 config files in this directory.
{{tip}} As you customize the config files, make the port values unique so that you don't run into "Address already in use" issues when you build multiple sites and want to preview them at the same time.{{end}}
5. In the _includes directory, open conditions.html and customize the values there specific to your outputs. (Basically, replace `writer` with your developer, and `designer` with another marketer.)
5. In the _includes/custom directory, open conditions.html and customize the values there specific to your outputs. (Basically, replace `writer` with your developer, and `designer` with another marketer.)
The conditions.html file is used to apply different audience requirements to the sidebar and other files. The conditions.html file is included in various parts of the theme &mdash; the sidebar.html, the topnav.html, and some of the print files.
The conditions.html file is used to apply different requirements to the sidebar and other files. The conditions.html file is included in various parts of the theme &mdash; the sidebar.html, the topnav.html, and some of the print files.
6. Remove the content inside the pages folder, and then add your own pages in this pages folder. (Using subfolders and sub-subfolders inside the pages folder is fine &mdash; you won't have to worry about folder paths in links.)
7. Inside \_data, open sidebar.yml and topnav.yml and customize the navigation.
{{warning}} Don't mess up the spacing or change any of the YML level names or the site or sidebar won't build. Each new YML level is indented with two spaces. {{end}}
8. In the root directory, rename build_writer.sh to build_developer.sh (same with build_designer.sh; change it to build_marketer.sh). In the content of each of these files, change the build parameters to point to the configuration file and output directory that you want.
8. In the root directory, rename build_writer.sh to build_developer.sh (same with build_designer.sh; change it to build_marketer.sh). In the content of each of these files, change the build parameters to point to the configuration file you want.
9. In the root directory, customize the index.md file. This file will be the homepage for all of your projects. Use conditional tags (for example, `if site.project == "acme-writer" ...`) to change the content for different builds of your site. Store the content of the homepage in your _includes/custom folder. See {{conditional_logic}} for more information on applying conditions.
10. For each of your pages where you want to insert a note or callout, add {%raw%}`{% include linkrefs.html %}`{%endraw%} directly below the frontmatter.
{{note}} When you're just starting out, don't worry about setting up the PDF builds. This workflow for PDFs is more complicated and somewhat touchy. See {{create_pdf}} for more details. You will need to set up Prince in order for the PDF build to work. {{end}}
9. In the root directory, customize the index.md file. This file will be the homepage for all of your projects. Use conditional tags (for example, `if site.audience == "developer" ...`) to change the content for different builds of your site. See {{conditional_logic}} for more information.
10. Optional. In the _includes/custom folder, open links.html and add capture tags for all the pages in your site following the sample format shown. This will make it easy to link to each of the topics.
{{note}} You don't need to use capture tags for links, but it does provide one way to try to manage all your links in one place. However, I'm still on the fence about the best way to manage links in a Jekyll theme. If you make your link text blend in with your sentence (which actually may be a better way of doing linking), this method wouldn't really work.{{end}}
11. For each of your pages where you want to insert a link, note, or callout, add {%raw%}`{% include linkrefs.html %}`{%endraw%} directly below the frontmatter.
{{tip}} If you're using WebStorm, you can create a Jekyll template so that the frontmatter is auto-populated when you create a new Jekyll file. {{end}}
12. In the _includes folder, open footer.html and customize the content. If you have different footers for different outputs, use conditional tags as you did with index.md.
11. Build your site with `. build_developer.sh` and `. build_marketer.sh` and preview it at the URLs provided.

49
pages/overview/troubleshooting.md
View File

@ -28,6 +28,26 @@ 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}')
```
### Build not entirely finishing
If your build doesn't entirely finish on the command line, check to see if you have a space after a comma when using multiple configuration files, like this:
```
jekyll serve --config config_base.yml, config_designer.yml
```
Remove the space after the comma, and the build will finish executing:
```
jekyll serve --config config_base.yml,config_designer.yml
```
### build_writer.sh file not executable
If you run into permissions errors trying to run the build_writer.sh file, you may need to change the file permissions to make the sh file executable. Browse to the directory containing build_writer.sh and run the following:
@ -40,17 +60,40 @@ chmod +x build_writer.sh
The config file requires pygments for the highlighter. You must [download and install Pygments]([pygments](http://pygments.org/download/)), which requires Python, in order to use this syntax highlighter. If you don't want to bother with Pygments, open the configuration file and change `pygments` to `rouge`.
## PDF issues
### "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 class to the file so that your print stylesheet excludes the counter from it. Try adding `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
### The PDF is blank
Check the prince-file-list.txt file in the output to see if it contains links. If not, you have something wrong with the logic in the prince-file-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 _includes/custom/conditions.html and make sure the conditional values there match up with the values declared in the configuration file. Specifically, you need to make sure you've declared a value for project, product, platform, and version.
If you don't have any values for these properties, you still need to keep them in your configuration file. Just put something like `all` as the value.
{{note}} This theme is designed for single sourcing. If you're only building one site, you can remove these values from the _includes/sidebar.html file and _data/sidebar.yml files.{{end}}
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 are met. If the sidebar.yml item has the right product, platform, audience, and version, then it gets displayed in the sidebar. If not, it get skipped.
### Sidebar heading level not opening
In your _data/sidebar.yml file, you must also include the correct parameters (platform, product, audience version) for each heading. If an item contains something that should be displayed, the attributes for the heading should be listed.
Without any attributes on heading levels, you could end up with scenarios where a section is entirely designed for one output but appears in every output regardless.
### Page metadata is blank
You aren't including the right frontmatter tags and appropriate values. See {{pages}} for more details.
}

12
pages/publishing/gitcommands.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Common Git Commands
permalink: /git_commands/
tags: [publishing]
keywords: git, revision control, github, version control
audience: writers, designers
last_updated: May 13, 2015
summary: "These are some sample Git commands."
---
{% include linkrefs.html %}
When you're interacting with Github, it's helpful to know a few basic Git commands...

92
pages/special-layouts/series.md Normal file
View File

@ -0,0 +1,92 @@
---
title: Series pages
permalink: /series/
tags: []
keywords: series
audience: writers, designers
last_updated: May 17, 2015
summary: "You can automatically link together topics belonging to the same series. This helps users know the context within a particular process."
---
{% include linkrefs.html %}
## Demo
Here's a demo that pulls together three posts that are part of an "acme_series".
{% include custom/acme_series.html %}
None of the pages in the list are highlighted because you're not on that page. If you go to a series page, the active page isn't linked, appears in bold, and has a left arrow pointing to it. This allows the user to know where he or she is within the series.
Why the drop-down? If you have just 2-3 pages in a series, you don't need the drop-down menu. But if you have 8+ items in the series, it gets to be lengthy. The display is one way of moving it out of the reader's way.
## Create a series
To create a series, follow the sections below.
### 1. Add frontmatter to your series pages
In the frontmatter of your series pages, add these two values:
```
series: acme_deploy
weight: 1
```
Call your series whatever you want.
The weight represents the sorting order for the series. Use numerical values to represent the order of the series posts.
### 2. Create the series include
In _includes/custom, create a new file such as acme_series.html. In the file, create a loop that looks like this:
{% raw %}
```html
<div class="seriesContext">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Acme Process <span class="caret"></span></button>
<ol class="dropdown-menu">
{% assign pages = site.pages | sort:"weight" %}
{% for p in pages %}
{% if p.series == "acme" %}
{% if p.url == page.url %}
<li class="active"> → {{p.weight}}. {{p.title}}</li>
{% else %}
<li>
<a href="{{p.url | prepend: site.baseurl | append: site.suffix}}">{{p.weight}}. {{p.title}}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ol>
</div>
</div>
```
{% endraw %}
Change the name of the series from `acme_series' to your own series (as you've named it in your frontmatter). Adjust any other styling for the content.
This code sorts pages by weight. It then uses a `for` loop to look through the pages to find all pages that have the specified series. It then arranges the pages into a list.
The list is packaged into a Bootstrop drop-down menu. If you don't want the drop-down menu, remove the code outside of the `ol` tags.
### 3. Add the include on each of your series pages
For each of the pages in the series, add this near the top (below the linkrefs.html include):
{% raw %}
```
{% include custom/acme_series.html %}
```
{% endraw %}
{{warning}} Be careful not to add too many `for` loops to your pages. Each `for` loop you add will impact the build time of your Jekyll site. This is because Liquid (where the `for` loop logic comes from, is slow.{{end}}
## 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.

21
pages/special-layouts/seriesdemo1.md Normal file
View File

@ -0,0 +1,21 @@
---
title: Series demo 1
permalink: /seriesdemo1/
tags: []
keywords:
audience:
last_updated: May 17, 2015
summary: "This is the first post in the series."
series: acme_series
weight: 1
---
{% include linkrefs.html %}
{% include custom/acme_series.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.

22
pages/special-layouts/seriesdemo2.md Normal file
View File

@ -0,0 +1,22 @@
---
title: Series demo 2
permalink: /seriesdemo2/
tags: []
keywords:
audience:
last_updated: May 17, 2015
summary: "This is the second post in the series."
series: acme_series
weight: 2
---
{% include linkrefs.html %}
{% include custom/acme_series.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.

23
pages/special-layouts/seriesdemo3.md Normal file
View File

@ -0,0 +1,23 @@
---
title: Series demo 3
permalink: /seriesdemo3/
tags: []
keywords:
audience:
last_updated: May 17, 2015
summary: "This is the third post in the series."
series: acme_series
weight: 3
---
{% include linkrefs.html %}
{% include custom/acme_series.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.

7
pages/tag-archives/tag-content-types.md Normal file
View File

@ -0,0 +1,7 @@
---
title: "Content Types Pages"
permalink: /tag-content-types/
tagName: content-types
metadata: false
---
{% include taglogic.html %}