Test Page

This page is a “smoke test” document that we can use to test HTML, CSS, and template changes that affect the overall documentation.

H2

The above heading is an H2. The page title renders as an H1. The following sections show H3-H6.

H3

This is in an H3 section.

H4

This is in an H4 section.

H5

This is in an H5 section.

Note that H5 and H6 sections aren’t included in the table of contents.

H6

This is in an H6 section.

Bold

This is in an bolded section.

Inline elements

Inline elements show up within the text of paragraph, list item, admonition, or other block-level element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline text styles

• bold
• italic
• bold italic
• strikethrough
• underline
• underline italic
• underline bold
• underline bold italic
• monospace text
• monospace bold

Lists

Markdown doesn’t have strict rules about how to process lists. These are things to keep in mind:

• To end a list and start another, you need a HTML comment block on a new line between the lists, flush with the left-hand border. The first list won’t end otherwise, no matter how many blank lines you put between it and the second.

Ordered lists

Indent ordered sub-list items 3 spaces.

1. This is a list item

2. This is another list item in the same list. The number you use in Markdown doesn’t necessarily correlate to the number in the final output. By convention, we keep them in sync.

3. Note

   For single-digit numbered lists, using two spaces after the period makes interior block-level content line up better along tab-stops.

4. Some text before a note. Then the note:

   Note

   For single-digit numbered lists, using two spaces after the period makes interior block-level content line up better along tab-stops.

1. This is a new list. With Hugo, you need to use a HTML comment to separate two consecutive lists. The HTML comment needs to be at the left margin.

   The HTML comment <!-- separate lists --> is between this list item and the previous one.

2. Numbered lists can have paragraphs or block elements within them.

   Indent the content to be the same as the first line of the bullet point. This paragraph and the code block line up with the N in Numbered above.

   ls -l
   

   • And a sub-list after some block-level content. This is at the same “level” as the paragraph and code block above, despite being indented more.

This is some text that introduces an ordered list.

1. Testing multiple lines, nested ordered and unordered list items. Here’s some code: /etc/chef-backend/chef-backend-secrets.json and more code tmp/chef-backend-secrets.json

2. Here’s an ordered list item with a long code sample, a nested unordered list, and a nested ordered list.

   chef-backend-ctl join-cluster --accept-license --yes --quiet IP_OF_LEADER_NODE --publish_address IP_OF_FOLLOWER_NODE -s /tmp/chef-backend-secrets.json
   

   Replace:

   • IP_OF_LEADER_NODE with the IP address of the new leader node.
   • IP_OF_FOLLOWER_NODE with the IP address of the follower node.

   1. Another code example and it mentions a chef-backend.rb file.

      cp /etc/chef-backend/chef-backend.rb /tmp/chef-backend.rb
      chef-backend-ctl cleanse
      cp /tmp/chef-backend.rb /etc/chef-backend/chef-backend.rb
      

      Adding another list for testing:

      • item 1

      • item 2

      • code in item3 chef-backend-ctl cleanse

      • A note as part of a list item:

        Note

        Some text in the note.
      1. another ordered list item
      2. Ea excepteur duis eiusmod duis laboris anim eiusmod. Est officia dolore veniam exercitation. Do cupidatat ea duis minim labore proident dolore sit dolore et. Elit Lorem aliqua incididunt sint.

   2. Retry joining the node to the cluster again using chef-backend-ctl join-cluster as described above.

3. Multiple paragraphs in a list item.

   chef-backend-ctl gen-server-config FQDN > /tmp/chef-server.rb
   

   Replace FQDN with the FQDN of your frontend node. For example, chefserver.example.com.

   Magna in ea nostrud aute ea incididunt eiusmod occaecat deserunt. Veniam in ipsum fugiat veniam adipisicing voluptate reprehenderit tempor pariatur dolore. Voluptate quis sunt commodo nisi aliquip minim eiusmod magna ea. Elit qui consectetur enim eu culpa do ex et culpa aliquip eiusmod. Officia irure cillum esse id aliquip cillum excepteur amet magna culpa culpa.

   1. Exercitation est non ipsum nostrud excepteur ullamco quis eu sit sint nulla ex. Velit excepteur sit deserunt occaecat duis ea laboris nisi occaecat quis dolor. Exercitation velit quis excepteur ut id ut duis enim sunt pariatur culpa occaecat sit magna.

   2. Est ut id proident eu exercitation ut ad irure consequat enim laboris amet. Reprehenderit velit laboris proident enim qui mollit velit aute adipisicing. Mollit est sit anim sunt nisi fugiat qui dolor est incididunt culpa dolore. Non sint culpa tempor excepteur officia non aliquip. Voluptate voluptate ea aliqua dolor cupidatat aute aute duis nisi irure.

      Ullamco proident ex nulla enim in anim. Enim laborum laboris laborum dolor aute officia sunt minim cillum. Irure consequat duis magna cupidatat eiusmod elit reprehenderit in laborum eiusmod minim cillum.

      • double nested item 1
      • double nested item 2
      • double nested item 3

   3. One more item. Culpa voluptate minim sunt velit officia mollit velit duis. Exercitation reprehenderit pariatur in aute id commodo id amet ea eiusmod. Ad quis aliquip enim irure ea magna ex. Eiusmod aliqua voluptate consequat consequat adipisicing consectetur veniam dolor.

   Introductory text:

   • nested item 1
   • nested item 2
   • nested item 3

   Velit incididunt sunt velit fugiat occaecat commodo do labore minim qui cupidatat anim non. Aliquip reprehenderit voluptate aute consectetur dolore dolor eu nisi dolore cupidatat exercitation. Ipsum ullamco quis enim enim ipsum.

Unordered lists

Plain list

A plain unordered list:

• item 1
• item 2
• item 3

Plain list with multiple paragraphs

A plain unordered list with additional paragraphs in list items:

• item 1

• item 2

  A second paragraph in item 2

• item 3

  A second paragraph in item 3

  A long paragraph in item 3. Duis quis minim anim reprehenderit id in velit ut commodo deserunt Lorem qui aliqua. Sint duis dolore commodo et irure sunt. Labore ut reprehenderit excepteur eiusmod id ea dolore consectetur laborum sint magna. Qui aliqua consectetur tempor deserunt aliquip. Eiusmod deserunt dolore deserunt ea aliquip non fugiat. Duis tempor exercitation laborum aute ut sit do occaecat proident. Adipisicing qui ex do nulla pariatur ullamco pariatur magna proident.

• item 4

  Note

  Some text in a note related to item 4.

Note that the text of each list item is now enclosed in a paragraph tag while the items in the plain list just had a list item tag.

Plain list with sublist

Here’s a regular list with a sublist:

• item 1
• item 2
  • subitem 1
  • subitem 2
  • subitem 3
• item 3
• item 4

Plain list with paragraph introducing sublist

Here’s a regular list with a second paragraph introducing a sublist:

• item 1

• item 2

  Adding a nested list:

  • subitem 1
  • subitem 2
  • subitem 3

• item 3

• item 4

List with multiple paragraphs in sublist items

Here’s a regular list with additional paragraphs in list items and sublists:

• item 1

• item 2

  Adding a nested list:

  • subitem 1

  • subitem 2

    A second paragraph in the sublist item 2.

    Here’s a long block of lorem. Pariatur ea deserunt adipisicing anim nulla consequat nostrud sunt incididunt do anim elit et Lorem. Proident fugiat excepteur esse cupidatat sunt ea culpa. Nisi proident ea sunt tempor et non proident in. Aliquip cupidatat dolore et commodo aliqua labore.

  • subitem 3

• item 3

  Additional pargraph for item 3. Consequat dolore nostrud quis ad consectetur pariatur. Mollit culpa sit adipisicing adipisicing sint officia. Commodo minim culpa mollit labore ad fugiat ut sit aute dolor esse.

• item 4

List items with code blocks

This is a list with code blocks included with each list item:

• Aute consectetur elit officia nostrud in nostrud irure elit deserunt:

  print "Hello, World!\n"
  

• Consequat qui non commodo laborum:

  def sum_eq_n?(arr, n)
    return true if arr.empty? && n == 0
  
    arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
  end
  

  Another paragraph before a nested list item:

  • nested list item code example:

    z = { 'mike' => 75, 'bill' => 18, 'alice' => 32 }
    z['joe'] = 44
    print z['bill'], " ", z['joe'], " ", z["smith"], "\n"
    print z.has_key?('mike'), " ", z.has_key?("jones"), "\n"
    

  • more text

    • z = { 'mike' => 75, 'bill' => 18, 'alice' => 32 }
      z['joe'] = 44
      print z['bill'], " ", z['joe'], " ", z["smith"], "\n"
      print z.has_key?('mike'), " ", z.has_key?("jones"), "\n"
      

      Voluptate elit dolore consectetur id ex commodo.

    • ls -l
      

      Voluptate elit dolore consectetur id ex commodo.

• Ea dolor reprehenderit amet nostrud Lorem sunt officia duis.

Description list

Use description lists to define commands, command flags, options, or other terms. For example:

term

second term with same definition

Term definition.

echo "term definition"

Another paragaph.

plain text (term in italics)

Ex quis duis deserunt commodo.

nested item

nested item description

echo "nested code example"

And another paragraph.

additional nested item

This is nested three levels.

code (code in italics and bolded text in italics) and regular bolded text

Reprehenderit eu ex dolore sunt reprehenderit ut consequat amet Lorem pariatur Lorem anim.

another term

Another term definition.

You can include multiple paragraphs in a definition if you need to.

You can include more than one definition for a term by starting another line with a colon.

Adding square brackets and the (@) symbol around the term ([another term](@)) adds a linkable ID to the term.

Foundation panel in a description list.

some_term

A bunch of text defining the term.

More info:

• A panel
• Another panel

Text in a panel.

puts 'Hello, world!'

Text in another panel.

another_term

A bunch of text defining the term.

Checklists

Checklists are an unordered list with a checkbox.

• This is a checklist item
• This is a selected checklist item

Code

Code blocks

Eiusmod cupidatat excepteur tempor elit officia ipsum aute nulla ea do minim eu eu.

Commodo adipisicing sunt nisi laborum laboris.

Code block using the highlight shortcode:

10
11
12
13
14
15
16
17
18
19

require 'chef/config'
require 'chef/log'
require 'chef/rest'

chef_server_url = 'https://chefserver.com'
client_name = 'client_name'
signing_key_filename = '/path/to/pem/for/client_name'

rest = Chef::REST.new(chef_server_url, client_name, signing_key_filename)
puts rest.get_rest('/clients')

Dolore est deserunt pariatur voluptate.

This is the code for this example:

{{< highlight ruby "linenos=table,hl_lines=3 5-7,linenostart=10" >}}
require 'chef/config'
require 'chef/log'
require 'chef/rest'

chef_server_url = 'https://chefserver.com'
client_name = 'client_name'
signing_key_filename = '/path/to/pem/for/client_name'

rest = Chef::REST.new(chef_server_url, client_name, signing_key_filename)
puts rest.get_rest('/clients')
{{< / highlight >}}

Add code using the readfile shortcode:

{
    "This": "is a sample file",
    "for": "markdown and Hugo testing.",
    "It": "is located",
    "in": "github.com/chef/chef-docs-theme/data/test/test.json"
}

And code without syntax highlighting:

describe google_compute_networks(project: 'chef-gcp-inspec') do
	its('network_names') { should include 'inspec-network' }
end

Inline code

This is an inline block of code.

Dolor Lorem commodo consequat non adipisicing officia duis.

This is code in a link.

Commodo adipisicing sunt nisi laborum laboris.

Links

To format a link, put the link text inside square brackets, followed by the link target in parentheses. Link to chef.io or Relative link to docs.chef.io

You can also use HTML, but it’s not preferred. Link to chef.io

Images

To format an image, use similar syntax to links, but add a leading ! character. The square brackets contain the image’s alt text. Try to always use alt text so that people using screen readers can get some benefit from the image. For example, ![Classic Chef logo](/images/chef-icon.png) will produce this:

To specify extended attributes, such as width, title, caption, etc, use the figure shortcode, which is preferred to using a HTML <img> tag. Also, if you need the image to also be a hyperlink, use the link attribute, rather than wrapping the whole figure in Markdown link syntax as shown below.

For example, this will add the Chef icon with title, caption, and a width of 200 pixels:

{{< figure src="/images/chef-icon.png" title="Classic Chef icon" caption="Image used to illustrate the figure shortcode" width="150px" >}}

Add the figure-no-shadow class to remove the drop shadow from around an image:

{{< figure src="/images/chef-icon.png" class="figure-no-shadow" title="Classic Chef icon" width="150px" >}}

You can also use HTML for images, but we don’t recommend it.

Tables

Simple tables have one row for each line, and columns are separated by | characters. The header is separated from the body by cells containing nothing but at least three - characters. For ease of maintenance, try to keep all the cell separators even, even if you heed to use extra space.

The header is optional. Any text separated by | will render as a table.

Markdown tables have a hard time with block-level elements within cells, such as list items, code blocks, or multiple paragraphs. For complex or very wide tables, use HTML instead.

{
      "status":"fail",
      "upstreams":
        {
          "service_name": "fail",
          "service_name": "pong",
          ...
        }
    }

client_rb:
      log_level: :warn

Blockquotes and admonitions

Sidebars and admonitions provide ways to add visual importance to text. Use them sparingly.

Blockquote

A blockquote offsets text visually, but without the visual prominence of admonitions.

This is a blockquote.

Use a blockquote to quote extended blocks of text.

You can even have code blocks.

sudo dmesg

Buttons

To create a link that looks like a button, just add the button class to a link tag.

<a href="#buttons" class="button">Link To Button Heading</a>

Link To Button Heading

Disabled button:

Link To Button Heading

Shortcodes

readfile shortcode

Use the readfile shortcode to add file text to a page. This could be Markdown text or a code sample.

Markdown file

It’s default is to add a Markdown file to a page:

{{< readfile file="path/to/markdown.md" >}}

Code highlighting

It handles code highlighting. See the Hugo documentation for a full list of syntaxes that it can highlight.

You can add a JSON file like this:

{{< readfile file="data/test/test.json" highlight="json" >}}

which produces this:

{
    "This": "is a sample file",
    "for": "markdown and Hugo testing.",
    "It": "is located",
    "in": "github.com/chef/chef-docs-theme/data/test/test.json"
}

And adding it to a list:

1. List item.

   {
       "This": "is a sample file",
       "for": "markdown and Hugo testing.",
       "It": "is located",
       "in": "github.com/chef/chef-docs-theme/data/test/test.json"
   }
   

2. Next item.

It also converts data between XML, JSON, YAML, and TOML if the highlight value is different from the file type. For example:

{{< readfile file="data/test/test.json" remarshal="yaml" >}}

Which produces this:

It: is located
This: is a sample file
for: markdown and Hugo testing.
in: github.com/chef/chef-docs-theme/data/test/test.json

It converts the data to alphabetical order, there’s no way to change this behavior.

Ordered list

If adding file text to an ordered list, you have to format and indent it correctly or it won’t display data correctly. Note the three spaces and Markdown shortcode style.

1. A data file:

   {{% readfile file="data/test/test.json" highlight="json" %}}

1. The same data file in YAML format:

   {{% readfile file="data/test/test.json" remarshal="toml" %}}

Which produces the following:

1. A data file:

   {
       "This": "is a sample file",
       "for": "markdown and Hugo testing.",
       "It": "is located",
       "in": "github.com/chef/chef-docs-theme/data/test/test.json"
   }
   

2. The same data file in YAML format:

   It = 'is located'
   This = 'is a sample file'
   for = 'markdown and Hugo testing.'
   in = 'github.com/chef/chef-docs-theme/data/test/test.json'
   

HTML

You can use html="true" to add an HTML file:

{{< readfile file="path/to/html_file.html" html="true" >}}

fontawesome shortcode

The fontawesome shortcode will display any free Font Awesome icon in a page.

It accepts the following parameters:

• background-color
• border
• border-radius
• class
• color
• font-size
• margin
• padding

The only required parameter is class, which is the same as the class name of the icon.

The following shortcode examples will display these icons:

{{< fontawesome class="fas fa-ellipsis-h" >}}
{{< fontawesome class="fas fa-anchor" font-size="3rem" border="2px dashed" padding="1px" border-radius="5px" >}}
{{< fontawesome class="fas fa-archive" color="#cc814b" margin="0 0 0 12px">}}
{{< fontawesome class="far fa-address-book" background-color="DarkBlue" color="rgb(168, 218, 220)" >}}

icons shortcode

The icons shortcode adds a Google Material Symbols icon to a page:

Select the web asset icon ({{< icons class="material-symbols-outlined" icon="web_asset" >}}).

Renders the following:

Select the web asset icon (web_asset).

Download {{< icons class="material-symbols-outlined" icon="description" >}} the file.

Download description the file.

Download {{< icons class="material-symbols-outlined icon-filled" icon="description" >}} the file.

Download description the file.

Icons in a list:

1. List item
2. This is an icon description in a list item.
3. Next list item.

Foundation tabs and panels

The following is based on Foundation’s tabs

• Ruby
• Python
• Go
• Sit voluptate amet est fugiat cillum veniam qui quis non non veniam consequat.
• Cupidatat pariatur qui cillum cupidatat fugiat ad ipsum aliquip cupidatat.
• Do et sint duis reprehenderit qui dolore ut incididunt fugiat labore Lorem quis voluptate.
• More
• Other More

puts 'Hello, world!'

print('Hello, world!')

package main

import "fmt"

func main() {
   fmt.Println("Hello, world!")
}

Foundation accordion list

The Accordion shortcodes create a Foundation Framework Accordion.

• List item description
  Hello, world.
• Active item
  This is active by default

This tests deep linking by setting an ID:

• List item description
  This test deep linking.
• Active item
  This test deep linking and is active by default.

Accordion in an ordered list:

These are procedures:

1. Do this.

2. Do that:

   • Active item

     This is active by default

     {
         "This": "is a sample json",
         "for": "markdown and Hugo testing."
     }
     

Accordion in an unordered list:

This is a list:

• Some text

  • List item description
    Hello, world.
  • Active item
    This is active by default

highlight shortcode

puts 'Hello, world!'

Notices

Notes

Warnings

Danger

Beta

Recommend

Recommend shortcode blocks used in the style guide.

Recommend inside a list:

• item 1

• item 2

  Not Recommended

  You should back up the server.

  • subitem 1

    Recommended

    Back up the server.