Add global sections to the docs
Edit on GitHubThis document describes how to add global sections to the documentation, like the existing Development or Cloud administration sections.
In this document, we assume that you need to create a new section acp with the user and dev roles. Make sure to adjust the provided examples to your requirements.
To add a new section, take the following steps.
1. Create a folder for the section
In the /docs directory, create a folder for the section per role. In this example, the folders are /docs/acp/user and /docs/acp/dev.
2. Create sidebars
In _data/sidebars, create sidebars for the new section per role: {product_name}_{role}_sidebar.yml. For the acp section with user and developer roles, create acp_dev_sidebar.yml and acp_user_sidebar.yml sidebar files.
To learn how to populate sidebar files, see Sidebars.
3. Update the configuration
In _config.yml, do the following:
- In the
defaults:section, add the scope as follows:
defaults:
...
-
scope:
path: "docs/acp"
values:
product: "acp"
- Under the product scope you have added in the previous step, add the product roles with their paths and sidebars. The sidebar names should match those you’ve created in 1. Create sidebars.
defaults:
...
-
scope:
path: "docs/acp/dev"
values:
sidebar: "acp_dev_sidebar"
role: "dev"
-
scope:
path: "docs/acp/user"
values:
sidebar: "acp_user_sidebar"
role: "user"
- Optional: To version one or more categories in the section, in the
versioned_categories:section, add the section and the categories to version.
versioned_categories:
...
acp:
user:
- features
- back-office-user-guides
dev:
- feature-integration-guides
- feature-walkthroughs
- glue-api-guides
- In the
sidebars:section, add the names of the sidebars you’ve created in 1. Create sidebars.
sidebars:
...
- acp_dev_sidebar
- acp_user_sidebar
4. Update the homepage
To add the new section to the top navigation and the role boxes on the homepage, do the following:
- In
_includes/topnav.html, in the<div class="main-nav dropdown">class, add the names of the guides:
<div class="main-nav dropdown">
<a href="/" class="main-nav__opener {% if page.layout == 'home' %}main-nav__opener--grey{% endif %} nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="main-nav__opener-label">Select a guide</span>
<span class="main-nav__opener-text">
...
{% elsif page.product == 'acp' and page.role == 'dev' %}
App Composition Platform developer guide
{% elsif page.product == 'acp' and page.role == 'user' %}
App Composition Platform user guide
...
- In
<ul class="main-nav__drop main-nav__drop--mob-static dropdown-menu" aria-labelledby="navbarDropdownMenuLink">, add the drop-down menu items under the last item:
<ul class="main-nav__drop main-nav__drop--mob-static dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
...
<li class="dropdown">
<a href="/" class="main-nav__drop-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
App Composition Platform
<i class="main-nav__drop-link-arrow icon-arrow-right"></i>
</a>
<ul class="main-nav__drop dropdown-menu">
<li>
<a href="/docs/acp/dev/setup/system-requirements.html" class="main-nav__drop-link">
<span class="main-nav__drop-link-title">
<i class="icon-developer"></i>
Developer
</span>
<span class="main-nav__drop-link-subtitle">ACP developer guide</span>
</a>
</li>
<li>
<a href="/docs/acp/user/intro-to-acp/acp-overview.html" class="main-nav__drop-link">
<span class="main-nav__drop-link-title">
<i class="icon-business"></i>
Business User
</span>
<span class="main-nav__drop-link-subtitle">ACP users guide</span>
</a>
</li>
</ul>
</li>
- In
_layouts/home.html, in<h2 class="card__heading-title">Developer guides</h2>, add a home page menu item with a link to the starting document of the developer guide of the section:
<h2 class="card__heading-title">Developer guides</h2>
</div>
<p>Developer guides are intended for backend developers, frontend developers, and devOps engineers. They cover all the technical aspects of the Spryker products and will help you to improve your understanding of the system, install your Spryker project, and customize it to your needs.</p>
</div>
<div class="card__footer">
<ul class="card__links">
...
<li><a href="/docs/acp/dev/setup/system-requirements.html">App Composition Platform developer guides</a></li>
...
-
In
<h2 class="card__heading-title">Business User guides</h2>, add a home page menu item with a link to the starting document of the business user guide of the section:<h2 class="card__heading-title">Business User guides</h2> </div> <p>Business User guides will help shop administrators and shop owners manage their stores from the shop administration area or the Back Office.</p> </div> <div class="card__footer"> <ul class="card__links"> ... <li><a href="/docs/acp/user/intro-to-acp/acp-overview.html">App Composition Platform user guides</a></li> ...
5. Add CI checks
- In
.github/workflows/ci.yml, add CI configuration per role as follows:
jobs:
...
link_validation_check_acp_dev:
name: Links validation (check_acp_dev)
needs: jekyll_build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Ruby
uses: ruby/setup-ruby@477b21f02be01bcb8030d50f37cfec92bfa615b6
with:
ruby-version: 2.6
bundler-cache: true
- name: Cache HTMLProofer
id: cache-htmlproofer
uses: actions/cache@v2
with:
path: tmp/.htmlproofer
key: $-check_acp_dev-htmlproofer
- uses: actions/download-artifact@v2
- name: Unpack artifacts
run: tar -xf build-result/result.tar.gz
- run: bundle exec rake check_acp_dev
link_validation_check_acp_user:
name: Links validation (check_acp_user)
needs: jekyll_build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Ruby
uses: ruby/setup-ruby@477b21f02be01bcb8030d50f37cfec92bfa615b6
with:
ruby-version: 2.6
bundler-cache: true
- name: Cache HTMLProofer
id: cache-htmlproofer
uses: actions/cache@v2
with:
path: tmp/.htmlproofer
key: $-check_acp_user-htmlproofer
- uses: actions/download-artifact@v2
- name: Unpack artifacts
run: tar -xf build-result/result.tar.gz
- run: bundle exec rake check_acp_user
- In
Rakefile, add checks for each role. Inoptions[:file_ignore]of both checks, exclude all other projects and roles:
...
task :check_acp_user do
options = commonOptions.dup
options[:file_ignore] = [
/docs\/scos\/.+/,
/docs\/marketplace\/.+/,
/docs\/cloud\/.+/,
/docs\/acp\/dev\/.+/,
/docs\/fes\/.+/,
/docs\/paas-plus\/.+/
]
HTMLProofer.check_directory("./_site", options).run
end
task :check_acp_dev do
options = commonOptions.dup
options[:file_ignore] = [
/docs\/scos\/.+/,
/docs\/marketplace\/.+/,
/docs\/cloud\/.+/,
/docs\/acp\/user\/.+/,
/docs\/fes\/.+/,
/docs\/paas-plus\/.+/
]
HTMLProofer.check_directory("./_site", options).run
end
- In
Rakefile, inoptions[:file_ignore]of all the existing checks, exclude the new section:
...
task :check_mp_dev do
options = commonOptions.dup
options[:file_ignore] = [
/docs\/scos\/.+/,
/docs\/cloud\/.+/,
/docs\/acp\/.+/,
/docs\/marketplace\/user\/.+/,
]
...
After you merge the PR and it’s deployed to master, you will see the added section on the website.
Thank you!
For submitting the form