Debug

Jekyll version

4.4.1

Jekyll environment

development

Site Variables

{
  "html_pages": [
    "## Welcome to another page\n\n_yay_\n",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "Use this page to verify nested sections render correctly in the awesome nav tree.\n",
    "This is a appbar style page with a custom background and overlay.\n",
    "This is a docs layout with a custom background image and overlay.\n",
    "This is a sidebar style page with custom background and overlay.\n",
    "This is a stacked style page with a custom background and overlay.\n",
    "This is a topbar style page with a custom background and overlay.\n",
    "This is a custom background and overlay\n",
    "This is a landing page with a custom header color.\n",
    "This is a sidebar style page with a custom header color\n",
    "This is a stacked page with a custom header color\n",
    "This is a topbar style page with a custom header color\n",
    "This is a landing layout with a custom header image.\n",
    "This is a sidebar style page with a custom header image.\n",
    "This is a stacked style page with a custom header image.\n",
    "This is a topbar style page with a custom header image.\n",
    "",
    "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
    "This page exists so the demo has multiple leaf pages for generated previous/next navigation.\n\n## What this proves\n\n- Pages under the configured root are auto-indexed.\n- This page appears in sidebar and mobile menu without manual front matter nav data.\n",
    "",
    "",
    "",
    "This is a subsection index page inside the demo folder.\n",
    "This section demonstrates `jekyll-awesome-nav` using real pages under `demo/awesome-nav`.\n\nThe navigation tree, breadcrumbs, and previous/next links are generated from this folder structure.\n",
    "# Welcome to jekyll-theme-profile theme!\n\nThis theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n\nSetting up is a breeze, as it automatically populates your profile using your GitHub user info. Add custom links like Linktree and share engaging blog posts effortlessly.\n",
    "### A Jekyll theme for building sites with GitHub\n{:.f1}\n\nAutomatically styled with your GitHub profile. Switch layouts, share posts, and add custom links — all in minutes.\n{:.f2}\n\n[Get started](/docs/get-started.html){:.btn .btn-large .btn-primary}\n[View demo](/demo){:.btn .btn-large}\n\n### Features at a Glance\n{:.f1 .pt-12}\n\nMultiple built-in layouts\n{:.f3 .pt-6}\n\n![layouts](/media/layouts.gif)\n\nLight/dark mode support\n{:.f3 .pt-6}\n\n![light dark modes](/media/light-dark.gif)\n\n- Auto-fills your GitHub avatar, bio, and repositories\n- Add custom links like linktree, socials, and more\n- Markdown-based blog posts and documentation\n- Built with Jekyll, deploys with GitHub Pages\n",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "This page verifies that Mermaid diagrams respond to light/dark/auto theme changes.\n\n---\n\n## Flowchart\n\n```mermaid\ngraph TD\n  A[Start] --> B{Theme Mode}\n  B -->|Light| C[Neutral Theme]\n  B -->|Dark| D[Dark Theme]\n  B -->|Auto| E[System Preference]\n```\n\n---\n\n## Sequence Diagram\n\n```mermaid\nsequenceDiagram\n  participant User\n  participant Page\n  participant Mermaid\n\n  User->>Page: Toggle theme\n  Page->>Mermaid: Re-render diagrams\n  Mermaid-->>Page: Updated SVG\n```\n\n---\n\n## State Diagram\n\n```mermaid\nstateDiagram-v2\n  [*] --> Auto\n  Auto --> Light\n  Light --> Dark\n  Dark --> Auto\n```\n",
    "Use this page to confirm nested dropdown rendering and active breadcrumb expansion behavior.\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "",
    "",
    "",
    "",
    "",
    "",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "{% if page.paginator %}\n  <!-- Pagination is active -->\n  {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n  <!-- Show post excerpts for the current page -->\n  {% for post in posts limit: limit %}\n  {%- if post.feature or post == site.categories[page.category][0] %}\n  {%- include post-feature-card.html %}\n  {%- else %}\n  {%- include post-card.html border=\"border-top\" %}\n  {%- endif %}\n  {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
    "{% if page.paginator %}\n  <!-- Pagination is active -->\n  {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n  <!-- Show post excerpts for the current page -->\n  {% for post in posts limit: limit %}\n  {%- if post.feature or post == site.categories[page.category][0] %}\n  {%- include post-feature-card.html %}\n  {%- else %}\n  {%- include post-card.html border=\"border-top\" %}\n  {%- endif %}\n  {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
    ""
  ],
  "documents": [
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with image | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta name=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-11-21T00:00:00+00:00\",\"datePublished\":\"2020-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/11/21/empty/\"},\"url\":\"/examples/2020/11/21/empty/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    <div class=\"d-lg-flex flex-1\">\n    <script>\n    $(document).ready(function () {\n        $('#toolbar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n        })\n        $('#sidebar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n\n        })\n    });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n    <div class=\"flex-column flex-1 position-sticky top-0\">\n        <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n            <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n                <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n            </div>\n            <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n            </div>\n            <div class=\"d-flex flex-justify-center\">\n                <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            </div>\n            <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n                <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n            </div>\n        </div>\n        <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n            <div class=\"text-center\">\n                <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n    <div class=\"CircleBadge\" style=\"width: 128px;\" >\n      <a href=\"/\">\n        <img src=\"https://avatars.githubusercontent.com/u/211580654?v=4\" alt=\"Primer Pages\" >\n      </a>\n    </div>\n\n  <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Primer Pages</h1>\n  \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n    \n    <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n        <div class=\"h2 mr-2 v-align-middle\">\n        <span class=\"octicon octicon-mark-github-24\"></span>\n        </div>\n        <a href=\"https://github.com/PrimerPages\">\n            @PrimerPages\n        </a>\n    </div>\n</div>\n\n</div>\n\n                </div>\n                <div class=\"py-2\">\n                    \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n                </div>\n                <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/\" class=\"Header-link\"\n      >\n      Home\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/docs\" class=\"Header-link\"\n      >\n      Documentation\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/blog\" class=\"Header-link\"\n      >\n      Blog\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/demo\" class=\"Header-link\"\n      >\n      Demo\n    </a>\n</div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n    \n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 21, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+image&url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F;t=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F%2F&title=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/sidebar\">sidebar</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Documentation | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Documentation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Documentation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Documentation\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/\"},\"url\":\"/docs/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Page flex-column flex-1 min-width-0 py-6\">\n    <div class=\"container-xl mx-auto p-responsive\">\n        \n        \n        <h1 class=\"h3-mktg mt-6 mb-4\">Documentation</h1>\n        \n        <div class=\"markdown-body\">\n            \n\n  \n  \n  \n  \n  \n\n\n\n\n\n\n<div class=\"d-flex flex-wrap gutter\">\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Getting started</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/get-started.html\">Get started</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/configuration.html\">Theme configuration</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/choose-a-layout.html\">Choose a layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/posts.html\">Write a post</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Styles</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/appbar.html\">Appbar style</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/sidebar.html\">Sidebar style</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/stacked.html\">Stacked style</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/topbar.html\">Topbar style</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Layouts</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/page.html\">Page Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/home.html\">Home Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/profile.html\">Profile Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/linktree.html\">Linktree Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/post.html\">Post Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/docs.html\">Docs Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/landing.html\">Landing layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/paginate_timeline.html\">Paginate Timeline Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/repositories.html\">Repositories Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/paginate.html\">Paginate Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/tag_index.html\">Tag Index Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/category_index.html\">Category Index Layout</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Plugins</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/pagination.html\">Pagination</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/tagging.html\">Tagging</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/category-pages.html\">Category pages</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/mermaid.html\">Mermaid</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Includes</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/collection-menu.html\">Collection Menu</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/link-card.html\">Link Card</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/links.html\">Links</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/paginator-nav.html\">Paginator Navigation</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-gallery.html\">Post Gallery</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-index.html\">Post Index</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-timeline-card.html\">Post Timeline Card</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-timeline.html\">Post Timeline</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Advanced</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/custom-styles.html\">Custom styles</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/github-action.html\">Using with GitHub Actions</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Other</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/debug.html\">Debug</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n</div>\n\n        </div>\n        <div class=\"flex-1\"></div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Get started | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Get started\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta name=\"twitter:title\" content=\"Get started\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar.\",\"headline\":\"Get started\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/get-started.html\"},\"url\":\"/docs/get-started.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Get started</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: <a href=\"/docs/styles/appbar.html\">appbar</a>, <a href=\"/docs/styles/sidebar.html\">sidebar</a>, <a href=\"/docs/styles/stacked.html\">stacked</a>, and <a href=\"/docs/styles/topbar.html\">topbar</a>.</p>\n\n<p><img src=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" alt=\"jekyll-theme-profile\" /></p>\n\n<h2 id=\"installation\">Installation</h2>\n\n<p>Add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-theme-profile\"</span>\n</code></pre></div></div>\n\n<p>And then execute:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div></div>\n\n<p>Or install it yourself as:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>gem <span class=\"nb\">install </span>jekyll-theme-profile\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>And add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n<span class=\"na\">repository</span><span class=\"pi\">:</span> <span class=\"s\">your-user/your-repo</span> <span class=\"c1\"># optional, enables repository cards and docs edit links</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the user's GitHub profile</span>\n</code></pre></div></div>\n\n<p>Or you can start with one of the <a href=\"https://github.com/PrimerPages/primerpages-dev/tree/main/templates\" data-proofer-ignore=\"\">template configs</a> and copy/customize the profile that best matches your setup, including the docs-first <code class=\"language-plaintext highlighter-rouge\">primerpages-docs</code> template for mixed Markdown and extracted source documentation.</p>\n\n<h2 id=\"building\">Building</h2>\n\n<p>Build the site and make it available on a local server</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">exec </span>jekyll serve\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/index.html\"\n                            aria-disabled=\"false\">Documentation</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/configuration.html\"\n                            aria-disabled=\"false\">Theme configuration</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/get-started.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#installation\">Installation</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#building\">Building</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Theme configuration | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Theme configuration\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme can be configured through _config.yml, and most settings can also be overridden per page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This theme can be configured through _config.yml, and most settings can also be overridden per page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Theme configuration\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This theme can be configured through _config.yml, and most settings can also be overridden per page.\",\"headline\":\"Theme configuration\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/configuration.html\"},\"url\":\"/docs/configuration.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Theme configuration</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This theme can be configured through <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>, and most settings can also be overridden per page.</p>\n\n<h2 id=\"theme-settings\">Theme settings</h2>\n\n<h3 id=\"setting-the-theme\">Setting the theme</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n</code></pre></div></div>\n\n<h3 id=\"customizing-the-theme\">Customizing the theme</h3>\n\n<h4 id=\"set-the-style-of-the-website\">Set the style of the website</h4>\n\n<p>Select the default style for your theme by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to your config file:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n</code></pre></div></div>\n\n<p>You can also set the style of a particular page by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to its front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h5 id=\"sidebar\"><a href=\"/demo/sidebar\">Sidebar</a></h5>\n\n<p><img src=\"/media/sidebar-preview.png\" alt=\"Sidebar image\" /></p>\n\n<h5 id=\"stacked\"><a href=\"/demo/stacked\">Stacked</a></h5>\n\n<p><img src=\"/media/stacked-preview.png\" alt=\"Stacked image\" /></p>\n\n<h5 id=\"topbar\"><a href=\"/demo/topbar\">Topbar</a></h5>\n\n<p><img src=\"/media/topbar-preview.png\" alt=\"Topbar image\" /></p>\n\n<h5 id=\"appbar\"><a href=\"/demo/appbar\">Appbar</a></h5>\n\n<p><img src=\"/media/appbar-preview.png\" alt=\"Appbar image\" /></p>\n\n<p>Choosing the right style helps define the user experience and visual flow.</p>\n\n<h4 id=\"setting-user-avatar\">Setting user avatar</h4>\n\n<p>By default, the theme uses your GitHub avatar. You can also set a custom avatar for your site.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">user_image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/user-image.jpg</span>\n</code></pre></div></div>\n\n<h4 id=\"customizing-light-and-dark-themes\">Customizing light and dark themes</h4>\n\n<p>This setting controls the light and dark color themes for your site. These theme names come from <a href=\"https://primer.style/css/storybook/?path=/docs/support-theming--docs\">Primer CSS</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># The themes to use for dark and light</span>\n<span class=\"na\">dark_theme</span><span class=\"pi\">:</span> <span class=\"s\">dark_dimmed</span>\n<span class=\"na\">light_theme</span><span class=\"pi\">:</span> <span class=\"s\">light</span>\n</code></pre></div></div>\n\n<h4 id=\"set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</h4>\n\n<p>You can even change the background by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for both light and dark styles</span>\n</code></pre></div></div>\n\n<p>or set custom overlays for the light and dark themes.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n  <span class=\"na\">light</span><span class=\"pi\">:</span> <span class=\"c1\"># custom overlay for light and dark styles</span>\n    <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(255, 255, 255, 0.5)</span>\n  <span class=\"na\">dark</span><span class=\"pi\">:</span>\n    <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"set-custom-header-colors\">Set custom header colors</h4>\n\n<p>You can change the header color by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file or page front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">color</code> The main background color of the header</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">text</code> The color of text elements within the header</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">accent</code> Controls the color of accent elements such as links</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">image</code> Sets an image in the background of the header</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">overlay</code> Sets the overlay on top of an image for better visibility of links</li>\n</ul>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"additional-theme-features\">Additional theme features</h4>\n\n<p>These additional features pull information into your site from your GitHub account.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">repository</span><span class=\"pi\">:</span> <span class=\"s\">your-user/your-repo</span> <span class=\"c1\"># used by the theme's GitHub-aware features</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the user's GitHub profile</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">repository</code> is a theme/GitHub metadata setting, not a core Jekyll setting</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">repo_info</code> will show the repository information in the header section</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">user_metadata</code> will show metadata associated with your user under your masthead</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">profile_link</code> will show a link to your profile</li>\n</ul>\n\n<h2 id=\"social-media-and-seo-optional\">Social media and SEO (optional)</h2>\n\n<h3 id=\"setting-the-social-media-preview-image\">Setting the social media preview image</h3>\n\n<p>You can set the social media image for your site with the setting</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/screenshot.jpg</span>\n</code></pre></div></div>\n\n<p>This works both in YAML front matter for a page and in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>. Page settings override site settings.</p>\n\n<p>Set the default for posts through the default settings in the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">posts\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">post\"</span>\n      <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/blog/:year/:month/:day/:title.html</span>\n      <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n      <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<h3 id=\"adding-your-socials\">Adding your socials</h3>\n\n<p>Use the <code class=\"language-plaintext highlighter-rouge\">social_media</code> section to add links to your social media profiles. For each platform, provide your username or user ID to show the matching icon and link on your profile.</p>\n\n<p><img src=\"/media/social-media.png\" alt=\"Social Media\" class=\"border\" /></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">social_media</span><span class=\"pi\">:</span>\n  <span class=\"na\">behance</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">dribbble</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">docker</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">facebook</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">github</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">hackerrank</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">instagram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">keybase</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">linkedin</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">mail</span><span class=\"pi\">:</span> <span class=\"s\">email@address</span>\n  <span class=\"na\">mastodon</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">medium</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">stackoverflow</span><span class=\"pi\">:</span> <span class=\"s\">your_user_id</span>\n  <span class=\"na\">telegram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">threads</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">tiktok</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">twitter</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">unsplash</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">vk</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">vscode</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">youtube</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">x</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n</code></pre></div></div>\n\n<p>You can also set the icon color. If you do not set one, the original icon colors are used.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">icon_color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#959da5\"</span>\n</code></pre></div></div>\n\n<h2 id=\"navigation-links-optional\">Navigation links (optional)</h2>\n\n<p>You can add navigation links that will show up in your header bar and in navigation menus.</p>\n\n<p>These will be visible in all pages, and are the main elements in the <a href=\"/docs/layouts/landing.html\">landing layout</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Navigation links</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Posts</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Categories</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name of the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">url</code> The url of the link</li>\n</ul>\n\n<h2 id=\"links-optional\">Links (optional)</h2>\n\n<p>In the <code class=\"language-plaintext highlighter-rouge\">links</code> section, you can add links to showcase various pages on the web or your website.</p>\n\n<p>These will show in <a href=\"/docs/layouts/home.html\">home</a>, <a href=\"/docs/layouts/profile.html\">profile</a>, and <a href=\"/docs/layouts/linktree.html\">linktree</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># List of links for link cards</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">All blog posts</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n    <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/blog-post-icon.png</span> <span class=\"c1\"># optional</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Category</span>\n    <span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">Browse all categories in posts</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n    <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name/title to show for the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">description</code> (optional) Additional text to show for the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">url</code> (optional) The URL of the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">thumbnail</code> (optional) The thumbnail image to show</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">octicon</code> (optional) Instead of a thumbnail, use an octicon icon</li>\n</ul>\n\n<h2 id=\"repositories-optional\">Repositories (optional)</h2>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">repositories</code> section lets you display GitHub repositories on your page. You can sort them by stars or recent pushes, limit how many are shown, and exclude archived, forked, or specific repositories from the list.</p>\n\n<p>These show in the <a href=\"/docs/layouts/profile.html\">profile</a> and <a href=\"/docs/layouts/repositories.html\">repositories</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Repositories to show on home page</span>\n<span class=\"na\">repositories</span><span class=\"pi\">:</span>\n  <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">stars</span> <span class=\"c1\"># pushed or stars</span>\n  <span class=\"na\">limit</span><span class=\"pi\">:</span> <span class=\"m\">24</span>\n  <span class=\"na\">exclude</span><span class=\"pi\">:</span>\n    <span class=\"na\">archived</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n    <span class=\"na\">forks</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n    <span class=\"na\">repositories</span><span class=\"pi\">:</span>\n      <span class=\"c1\"># - list of repositories to exclude</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">sort_by</code> What to sort repositories by, either latest pushed or number of stars</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">limit</code> Maximum number of repositories to show</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">exclude</code> Repositories to exclude from your site</li>\n</ul>\n\n<h2 id=\"post-settings\">Post settings</h2>\n\n<h3 id=\"related\">Related</h3>\n\n<p>Each post can show related posts below it.  Choose either <code class=\"language-plaintext highlighter-rouge\">tags</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> or <code class=\"language-plaintext highlighter-rouge\">random</code> or a combination.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/get-started.html\"\n                            aria-disabled=\"false\">Get started</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/choose-a-layout.html\"\n                            aria-disabled=\"false\">Choose a layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/configuration.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#theme-settings\">Theme settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-theme\">Setting the theme</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#customizing-the-theme\">Customizing the theme</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-the-style-of-the-website\">Set the style of the website</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#sidebar\">Sidebar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#stacked\">Stacked</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#topbar\">Topbar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#appbar\">Appbar</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h4\"><a href=\"#setting-user-avatar\">Setting user avatar</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#customizing-light-and-dark-themes\">Customizing light and dark themes</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-custom-header-colors\">Set custom header colors</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#additional-theme-features\">Additional theme features</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#social-media-and-seo-optional\">Social media and SEO (optional)</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-social-media-preview-image\">Setting the social media preview image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#adding-your-socials\">Adding your socials</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#navigation-links-optional\">Navigation links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#links-optional\">Links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#repositories-optional\">Repositories (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#post-settings\">Post settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#related\">Related</a></li>\n</ul>\n</li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Choose a layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Choose a layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Choose a layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.\",\"headline\":\"Choose a layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/choose-a-layout.html\"},\"url\":\"/docs/choose-a-layout.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Choose a layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.</p>\n\n<h2 id=\"choose-this-when\">Choose this when</h2>\n\n<h3 id=\"page\"><code class=\"language-plaintext highlighter-rouge\">page</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">page</code> when you want a simple standalone content page.</p>\n\n<ul>\n  <li>Good for about pages, contact pages, and general markdown content</li>\n  <li>Minimal structure beyond the theme shell</li>\n</ul>\n\n<p><a href=\"/demo/topbar/page\">Demo</a></p>\n\n<h3 id=\"post\"><code class=\"language-plaintext highlighter-rouge\">post</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">post</code> when you are writing article-style content.</p>\n\n<ul>\n  <li>Good for blog posts, announcements, and long-form writing</li>\n  <li>Supports hero media, tags, related posts, and an optional table of contents</li>\n</ul>\n\n<p><a href=\"/demo/topbar/post\">Demo</a></p>\n\n<h3 id=\"profile\"><code class=\"language-plaintext highlighter-rouge\">profile</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">profile</code> when the site centers on a person, project, or organization identity.</p>\n\n<ul>\n  <li>Good default homepage for most theme users</li>\n  <li>Combines masthead, links, posts, and repositories</li>\n</ul>\n\n<p><a href=\"/demo/profile\">Demo</a></p>\n\n<h3 id=\"landing\"><code class=\"language-plaintext highlighter-rouge\">landing</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">landing</code> when you want a homepage that emphasizes navigation and repository context.</p>\n\n<ul>\n  <li>Good for project homepages</li>\n  <li>Best when your top-level navigation is an important part of the experience</li>\n</ul>\n\n<p><a href=\"/demo/landing\">Demo</a></p>\n\n<h3 id=\"linktree\"><code class=\"language-plaintext highlighter-rouge\">linktree</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">linktree</code> when the page is mainly a curated list of links.</p>\n\n<ul>\n  <li>Good for creator pages, bio links, resource hubs, and simple launch pages</li>\n  <li>Works well with custom background styling and social links</li>\n</ul>\n\n<p><a href=\"/demo/linktree\">Demo</a></p>\n\n<h3 id=\"repositories\"><code class=\"language-plaintext highlighter-rouge\">repositories</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">repositories</code> when the repository list should be the primary content.</p>\n\n<ul>\n  <li>Good for portfolio-style project indexes</li>\n  <li>Best when the GitHub repo list is more important than posts</li>\n</ul>\n\n<p><a href=\"/demo/repositories\">Demo</a></p>\n\n<h3 id=\"docs\"><code class=\"language-plaintext highlighter-rouge\">docs</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">docs</code> when you are publishing a structured documentation collection.</p>\n\n<ul>\n  <li>Good for guides, references, and multi-page documentation</li>\n  <li>Best when you want categories, sidebar navigation, and article-level organization</li>\n</ul>\n\n<p><a href=\"/demo/custom-background-docs\">Demo</a></p>\n\n<h3 id=\"paginate\"><code class=\"language-plaintext highlighter-rouge\">paginate</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">paginate</code> when you want a card-based blog index.</p>\n\n<ul>\n  <li>Good for blog homepages with featured cards</li>\n  <li>Best when visual post previews matter</li>\n</ul>\n\n<p><a href=\"/blog/\">Demo</a></p>\n\n<h3 id=\"paginate_timeline\"><code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> when you want chronological browsing in a simpler timeline format.</p>\n\n<ul>\n  <li>Good for update logs, journals, and post archives</li>\n  <li>Best when recency matters more than card-style presentation</li>\n</ul>\n\n<p><a href=\"/demo/timeline\">Demo</a></p>\n\n<h2 id=\"a-simple-starting-point\">A simple starting point</h2>\n\n<p>If you are not sure where to begin:</p>\n\n<ol>\n  <li>Start with <code class=\"language-plaintext highlighter-rouge\">profile</code> for your homepage.</li>\n  <li>Use <code class=\"language-plaintext highlighter-rouge\">page</code> for standalone content.</li>\n  <li>Use <code class=\"language-plaintext highlighter-rouge\">post</code> for writing.</li>\n  <li>Add <code class=\"language-plaintext highlighter-rouge\">docs</code> only if you need a real documentation section.</li>\n</ol>\n\n<h2 id=\"related-docs\">Related docs</h2>\n\n<ul>\n  <li><a href=\"/docs/get-started.html\">Get started</a></li>\n  <li><a href=\"/docs/configuration.html\">Theme configuration</a></li>\n  <li><a href=\"/docs/styles/appbar.html\">Appbar style</a></li>\n  <li><a href=\"/docs/styles/sidebar.html\">Sidebar style</a></li>\n  <li><a href=\"/docs/styles/stacked.html\">Stacked style</a></li>\n  <li><a href=\"/docs/styles/topbar.html\">Topbar style</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/configuration.html\"\n                            aria-disabled=\"false\">Theme configuration</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/posts.html\"\n                            aria-disabled=\"false\">Write a post</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/choose-a-layout.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#choose-this-when\">Choose this when</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#page\">page</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#post\">post</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#profile\">profile</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#landing\">landing</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#linktree\">linktree</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#repositories\">repositories</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#docs\">docs</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#paginate\">paginate</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#paginate_timeline\">paginate_timeline</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#a-simple-starting-point\">A simple starting point</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#related-docs\">Related docs</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Write a post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Write a post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"To add new posts, create a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"To add new posts, create a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Write a post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"To add new posts, create a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter.\",\"headline\":\"Write a post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/posts.html\"},\"url\":\"/docs/posts.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Write a post</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>To add new posts, create a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<h2 id=\"front-matter\">Front matter</h2>\n\n<p>All blog posts must begin with front matter, which is typically used to set a layout and other metadata:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">welcome</span><span class=\"nv\"> </span><span class=\"s\">to</span><span class=\"nv\"> </span><span class=\"s\">Jekyll!\"</span>\n<span class=\"nn\">---</span>\n\n<span class=\"gh\"># Welcome</span>\n\n<span class=\"gs\">**Hello world**</span>, this is my first Jekyll blog post.\n\nI hope you like it!\n</code></pre></div></div>\n\n<p>Here’s a list of variables for this theme</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Specifies the layout file to use. Use the layout file name without the file extension. <br /><br /> See <a href=\"/docs/index.html\">the docs index</a> for available options.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">permalink</code></td>\n      <td>If you need or processed blog post URLs to be something other than the site-wide default (<code class=\"language-plaintext highlighter-rouge\">/year/month/day/title.html</code>), then you can set this variable and it will be used as the final URL</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">published</code></td>\n      <td>Set to false if you don’t want a specific post to show up when the site is generated</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">date</code></td>\n      <td>A date here overrides the date from the filename. This can be used to ensure correct sorting of posts. A date is specified in the format <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD HH:MM:SS +/-TTTT</code>; hours, minutes, seconds, and timezone offset are optional</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code></td>\n      <td>Instead of placing posts inside of folders, you can specify one or more categories that the post belongs to.  When the site is generated the post will act as though it had been set with these categories normally.  Categories (plural key) can be specified as a YAML list or a space-separated string</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n      <td>Similar to categories, one or multiple tags can be added to a post.  Also like categories, tags can be specified as a YAML list or a space-separated string</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n      <td>A longer description used for the description meta tag</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">image</code></td>\n      <td>URL to an image associated with the post for SEO</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">author</code></td>\n      <td>Post-specific author information</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">locale</code></td>\n      <td>Post-specific locale information</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code></td>\n      <td>You can access a snippet of a post’s content by using the <code class=\"language-plaintext highlighter-rouge\">excerpt</code> variable on a post. By default, this is the first paragraph of content, but it can be customized with <code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code>. <br /><br />Example <code class=\"language-plaintext highlighter-rouge\">excerpt_separator: &lt;!--more--&gt;</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"including-images-and-resources\">Including images and resources</h2>\n\n<p>At some point, you’ll want to include images, downloads, or other digital assets along with your text content. One common solution is to create a folder in the root of the project directory called something like <code class=\"language-plaintext highlighter-rouge\">assets</code>, into which any images, files or other resources are placed. Then, from within any post, they can be linked to using the site’s root as the path for the asset to include. The best way to do this depends on the way your site’s (sub)domain and path are configured, but here are some simple examples in Markdown:</p>\n\n<p>Including an image asset in a post:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... which is shown in the screenshot below:\n<span class=\"p\">![</span><span class=\"nv\">My helpful screenshot</span><span class=\"p\">](</span><span class=\"sx\">/assets/screenshot.jpg</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Linking to a PDF for readers to download:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... you can <span class=\"p\">[</span><span class=\"nv\">get the PDF</span><span class=\"p\">](</span><span class=\"sx\">/assets/mydoc.pdf</span><span class=\"p\">)</span> directly.\n</code></pre></div></div>\n\n<h2 id=\"tags-and-categories\">Tags and Categories</h2>\n\n<p>Jekyll has first class support for <em>tags</em> and <em>categories</em> in blog posts.</p>\n\n<h3 id=\"tags\">Tags</h3>\n\n<p>Tags for a post are defined in the post’s front matter using either the key <code class=\"language-plaintext highlighter-rouge\">tag</code> for a single entry or <code class=\"language-plaintext highlighter-rouge\">tags</code> for multiple entries.\nSince Jekyll expects multiple items mapped to the key <code class=\"language-plaintext highlighter-rouge\">tags</code>, it will automatically split a string entry if it contains whitespace. For example, while front matter <code class=\"language-plaintext highlighter-rouge\">tag: classic hollywood</code> will be processed into a singular entity <code class=\"language-plaintext highlighter-rouge\">\"classic hollywood\"</code>, front matter <code class=\"language-plaintext highlighter-rouge\">tags: classic hollywood</code> will be processed into an array of entries <code class=\"language-plaintext highlighter-rouge\">[\"classic\", \"hollywood\"]</code>.</p>\n\n<p>Irrespective of the front matter key chosen, Jekyll stores the metadata mapped to the plural key which is exposed to Liquid templates.</p>\n\n<p>By default the theme will show posts related by tags or categories with the setting:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># related</span>\n<span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n<p>These show up as “related posts” underneath a post.</p>\n\n<p>See <a href=\"/docs/plugins/tagging.html\">tagging</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> plugin.</p>\n\n<h3 id=\"categories\">Categories</h3>\n\n<p>Categories of a post work similar to the tags above:</p>\n\n<ul>\n  <li>They can be defined via the front matter using keys <code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> (that follow the same logic as for tags)</li>\n  <li>All categories registered in the site are exposed to Liquid templates via <code class=\"language-plaintext highlighter-rouge\">site.categories</code> which can be iterated over (similar to the loop for tags above.)</li>\n</ul>\n\n<p><em>The similarity between categories and tags however, ends there.</em></p>\n\n<p>Unlike tags, categories for posts can also be defined by a post’s file path. Any directory above _posts will be read-in as a category. For example, if a post is at path <code class=\"language-plaintext highlighter-rouge\">movies/horror/_posts/2019-05-21-bride-of-chucky.markdown</code>, then <code class=\"language-plaintext highlighter-rouge\">movies</code> and <code class=\"language-plaintext highlighter-rouge\">horror</code> are automatically registered as categories for that post.</p>\n\n<p>When the post also has front matter defining categories, they just get added to the existing list if not present already.</p>\n\n<p>The hallmark difference between categories and tags is that categories of a post may be incorporated into the generated URL for the post, while tags cannot be.</p>\n\n<p>Therefore, depending on whether front matter has <code class=\"language-plaintext highlighter-rouge\">category: classic hollywood</code>, or <code class=\"language-plaintext highlighter-rouge\">categories: classic hollywood</code>, the example post above would have the URL as either <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic%20hollywood/2019/05/21/bride-of-chucky.html</code> or <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic/hollywood/2019/05/21/bride-of-chucky.html</code> respectively.</p>\n\n<p>See <a href=\"/docs/plugins/category-pages.html\">category pages</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> plugin.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/choose-a-layout.html\"\n                            aria-disabled=\"false\">Choose a layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/appbar.html\"\n                            aria-disabled=\"false\">Appbar style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/posts.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#front-matter\">Front matter</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#including-images-and-resources\">Including images and resources</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tags-and-categories\">Tags and Categories</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#tags\">Tags</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#categories\">Categories</a></li>\n</ul>\n</li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Appbar style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Appbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/appbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/appbar-preview.png\" />\n<meta name=\"twitter:title\" content=\"Appbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Appbar style\",\"image\":\"/media/appbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/appbar.html\"},\"url\":\"/docs/styles/appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Appbar style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/appbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>appbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A fixed top navigation bar</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">appbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>appbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an appbar as a <a href=\"/demo/appbar\">home</a>, <a href=\"/demo/appbar/page\">page</a>, and <a href=\"/demo/appbar/post\">post</a>.</p>\n\n<p><img src=\"/media/appbar-tablet.png\" alt=\"Appbar tablet\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/posts.html\"\n                            aria-disabled=\"false\">Write a post</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/sidebar.html\"\n                            aria-disabled=\"false\">Sidebar style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/appbar.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Sidebar style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Sidebar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/sidebar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/sidebar-preview.png\" />\n<meta name=\"twitter:title\" content=\"Sidebar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Sidebar style\",\"image\":\"/media/sidebar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/sidebar.html\"},\"url\":\"/docs/styles/sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Sidebar style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/sidebar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>sidebar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A collapsible side navigation bar that collapses</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">sidebar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>sidebar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of a sidebar as a <a href=\"/demo/sidebar\">home</a>, <a href=\"/demo/sidebar/page\">page</a>, and <a href=\"/demo/sidebar/post\">post</a>.</p>\n\n<p><img src=\"/media/sidebar-laptop.png\" alt=\"\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/appbar.html\"\n                            aria-disabled=\"false\">Appbar style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/stacked.html\"\n                            aria-disabled=\"false\">Stacked style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/sidebar.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Stacked style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Stacked style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/stacked-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/stacked-preview.png\" />\n<meta name=\"twitter:title\" content=\"Stacked style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Stacked style\",\"image\":\"/media/stacked-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/stacked.html\"},\"url\":\"/docs/styles/stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Stacked style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/stacked-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>stacked</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A top header with image</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">stacked</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>stacked</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of stacked as a <a href=\"/demo/stacked\">home</a>, <a href=\"/demo/stacked/page\">page</a>, and <a href=\"/demo/stacked/post\">post</a>.</p>\n\n<p><img src=\"/media/stacked-laptop.png\" alt=\"\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/sidebar.html\"\n                            aria-disabled=\"false\">Sidebar style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/topbar.html\"\n                            aria-disabled=\"false\">Topbar style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/stacked.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Topbar style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Topbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/topbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/topbar-preview.png\" />\n<meta name=\"twitter:title\" content=\"Topbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Topbar style\",\"image\":\"/media/topbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/topbar.html\"},\"url\":\"/docs/styles/topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Topbar style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/topbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>topbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A fixed top navigation bar</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">topbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>topbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of a topbar as a <a href=\"/demo/topbar\">home</a>, <a href=\"/demo/topbar/page\">page</a>, and <a href=\"/demo/topbar/post\">post</a>.</p>\n\n<p><img src=\"/media/topbar-tablet.png\" alt=\"\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/stacked.html\"\n                            aria-disabled=\"false\">Stacked style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/page.html\"\n                            aria-disabled=\"false\">Page Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/topbar.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Page Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Page Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The page layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The page layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Page Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The page layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.\",\"headline\":\"Page Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/page.html\"},\"url\":\"/docs/layouts/page.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Page Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>page</strong> layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Page layout in your Jekyll site, create a page with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">page</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">About</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">page</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>None</td>\n      <td>Page title shown above the content</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">subtype</code></td>\n      <td>None</td>\n      <td>Small label shown above the title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tag</code></td>\n      <td>None</td>\n      <td>Used as a fallback title in tag-based pages</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Renders the page inside the default theme layout.</li>\n  <li>Shows a title when <code class=\"language-plaintext highlighter-rouge\">title</code> is present.</li>\n  <li>Shows a subtype label above the title when <code class=\"language-plaintext highlighter-rouge\">subtype</code> is present.</li>\n  <li>Falls back to <code class=\"language-plaintext highlighter-rouge\">page.tag</code> as the title in tag-oriented pages.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">page</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">About this site</span>\n<span class=\"na\">subtype</span><span class=\"pi\">:</span> <span class=\"s\">Guide</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/topbar/page\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>This is a good default layout for standalone markdown pages.</li>\n  <li>If you need repository cards, post timelines, or profile content, use a more specific layout instead.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/topbar.html\"\n                            aria-disabled=\"false\">Topbar style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/home.html\"\n                            aria-disabled=\"false\">Home Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/page.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Home Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Home Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The home layout is the same thing as the profile layout.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The home layout is the same thing as the profile layout.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Home Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The home layout is the same thing as the profile layout.\",\"headline\":\"Home Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/home.html\"},\"url\":\"/docs/layouts/home.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Home Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>home</strong> layout is the same thing as the <code class=\"language-plaintext highlighter-rouge\">profile</code> layout.</p>\n\n<p>See <a href=\"/docs/layouts/profile.html\">profile</a> for details and options.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/page.html\"\n                            aria-disabled=\"false\">Page Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/profile.html\"\n                            aria-disabled=\"false\">Profile Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/home.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Profile Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Profile Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Profile Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.\",\"headline\":\"Profile Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/profile.html\"},\"url\":\"/docs/layouts/profile.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Profile Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>profile</strong> layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Profile layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Profile layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">profile</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.style</code></td>\n      <td>Layout style (<code class=\"language-plaintext highlighter-rouge\">topbar</code>, <code class=\"language-plaintext highlighter-rouge\">appbar</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, or <code class=\"language-plaintext highlighter-rouge\">stacked</code>)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">user_image</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.user_image</code> or <code class=\"language-plaintext highlighter-rouge\">site.github.owner.avatar_url</code></td>\n      <td>Site-wide profile image configured in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.links</code></td>\n      <td>An array of link card objects</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.posts</code></td>\n      <td>Posts to display in the blog section</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n      <td>Number of posts to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td>The text to display for the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n      <td>The URL the link should point to</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n      <td>A custom image for the link (optional)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n      <td>An Octicon name to display instead of a thumbnail (optional)</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Displays a profile section with an image and name.</li>\n  <li>Includes social/profile links if provided.</li>\n  <li>Shows a timeline of blog posts from the specified posts list.</li>\n  <li>Optionally displays repositories if <code class=\"language-plaintext highlighter-rouge\">site.repositories</code> is enabled.</li>\n  <li>Supports different layout styles (<code class=\"language-plaintext highlighter-rouge\">topbar</code>, <code class=\"language-plaintext highlighter-rouge\">appbar</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, and <code class=\"language-plaintext highlighter-rouge\">stacked</code>).</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Profile page with user information and links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">GitHub</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/username</span>\n    <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Twitter</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://twitter.com/username</span>\n    <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mention</span>\n<span class=\"na\">posts</span><span class=\"pi\">:</span> <span class=\"s\">site.posts</span>\n<span class=\"na\">posts_limit</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/profile\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure all image URLs are correct and accessible.</li>\n  <li>Set <code class=\"language-plaintext highlighter-rouge\">user_image</code> in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> if you want to override the default GitHub profile avatar.</li>\n  <li>Octicons can be used for simple link icons, or you can provide <code class=\"language-plaintext highlighter-rouge\">thumbnail</code> images instead.</li>\n  <li>The layout is responsive and should work well across different screen sizes.</li>\n  <li>Custom styling can be added using additional CSS overrides in your theme.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for rendering the profile header.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for displaying social links.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> include for listing blog posts.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include for rendering repositories.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Profile layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/home.html\"\n                            aria-disabled=\"false\">Home Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/linktree.html\"\n                            aria-disabled=\"false\">Linktree Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/profile.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Linktree Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Linktree Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Linktree Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\",\"headline\":\"Linktree Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/linktree.html\"},\"url\":\"/docs/layouts/linktree.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Linktree Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>linktree</strong> layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Linktree layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Linktree layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">linktree</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">[]</code></td>\n      <td>An array of link objects to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">background.image</code></td>\n      <td>None</td>\n      <td>Background image URL for the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>None</td>\n      <td>Title to display at the top of the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">css_style</code></td>\n      <td>None</td>\n      <td>Custom CSS to apply to the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">socials</code></td>\n      <td>None</td>\n      <td>Optional social link placement: <code class=\"language-plaintext highlighter-rouge\">top</code> or <code class=\"language-plaintext highlighter-rouge\">bottom</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td>The text to display for the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n      <td>The URL the link should point to</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n      <td>URL of an image to use as the link’s icon (optional)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n      <td>Name of an Octicon to use as the link’s icon (optional)</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"examples\">Examples</h2>\n\n<p>This example shows a basic Linktree page with various links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">My website</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://www.primerpages.com</span>\n    <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/user-image.jpg</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">My repositories</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/demo/repositories</span>\n    <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/repositories.png</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/linktree\" class=\"btn\">Live demo</a></p>\n\n<p>The following example demonstrates how to customize the Linktree layout with a background image and custom CSS:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://www.allisonthackston.com/assets/img/cover-1920.jpg</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Linktree</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n    <span class=\"s\">.Link-btn {</span>\n        <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">h1 {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">.octicon {</span>\n        <span class=\"s\">fill: black;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">a {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">a:hover {</span>\n        <span class=\"s\">text-decoration: none;</span>\n        <span class=\"s\">color: var(--color-fg-default);</span>\n    <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/linktree-custom\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure all image URLs are correct and accessible.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> property requires the Octicons library to be included in your theme.</li>\n  <li>Custom CSS can override the theme’s default styles, so use it carefully.</li>\n  <li>Background images follow the same <code class=\"language-plaintext highlighter-rouge\">background.image</code> configuration pattern used elsewhere in the theme.</li>\n  <li>The layout is responsive and should work well on various screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include for rendering individual links.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for the theme toggle functionality.</li>\n  <li>Octicons for icon display.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Linktree layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/profile.html\"\n                            aria-disabled=\"false\">Profile Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/post.html\"\n                            aria-disabled=\"false\">Post Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/linktree.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#examples\">Examples</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The post layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The post layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.\",\"headline\":\"Post Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/post.html\"},\"url\":\"/docs/layouts/post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>post</strong> layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Post layout in your Jekyll site, create a post with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Post</span>\n<span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">A short summary of the post</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Post layout accepts these commonly used parameters in front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">post</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>Required</td>\n      <td>Post title shown in the hero section</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n      <td>None</td>\n      <td>Short summary shown below the title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">image</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.image</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/img/default.png</code></td>\n      <td>Hero image for the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">author</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.github.owner.name</code> or login</td>\n      <td>Display name in post metadata</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">date</code></td>\n      <td>Filename date</td>\n      <td>Publication date shown in the header</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">video</code></td>\n      <td>None</td>\n      <td>Optional embed URL rendered above the content</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">toc</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">false</code> unless set</td>\n      <td>Shows a table of contents when headings are present</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n      <td>None</td>\n      <td>Tag list rendered below the content when tag pages are enabled</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">related_by</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.related_by</code></td>\n      <td>Controls related-post matching</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">related_limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.related_limit</code> or <code class=\"language-plaintext highlighter-rouge\">3</code></td>\n      <td>Maximum number of related posts</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">related_template</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">post-card.html</code></td>\n      <td>Include used to render related posts</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Renders a full-width post header with title, description, and image.</li>\n  <li>Shows author and publication date metadata.</li>\n  <li>Adds sharing links for X, Facebook, and LinkedIn.</li>\n  <li>Supports optional embedded video content through <code class=\"language-plaintext highlighter-rouge\">page.video</code>.</li>\n  <li>Links tags to generated tag pages when <code class=\"language-plaintext highlighter-rouge\">site.tag_page_dir</code> is configured.</li>\n  <li>Shows a table of contents when <code class=\"language-plaintext highlighter-rouge\">toc: true</code> and the content contains headings.</li>\n  <li>Includes the related-posts section at the bottom of the page.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Building a theme site</span>\n<span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">Notes from setting up a theme-based Jekyll project</span>\n<span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/cover.jpg</span>\n<span class=\"na\">author</span><span class=\"pi\">:</span> <span class=\"s\">Primer Pages</span>\n<span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"na\">tags</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"nv\">jekyll</span><span class=\"pi\">,</span> <span class=\"nv\">theme</span><span class=\"pi\">]</span>\n<span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/topbar/post\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Tag links are generated only when tag pages are configured.</li>\n  <li>The related-post section can be tuned with the settings documented in <a href=\"/docs/configuration.html#related\">Theme configuration</a>.</li>\n  <li>The table of contents appears only when <code class=\"language-plaintext highlighter-rouge\">toc</code> is enabled and the post has headings.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/linktree.html\"\n                            aria-disabled=\"false\">Linktree Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/docs.html\"\n                            aria-disabled=\"false\">Docs Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/post.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Docs Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Docs Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Docs Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\",\"headline\":\"Docs Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/docs.html\"},\"url\":\"/docs/layouts/docs.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Docs Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>docs</strong> layout is ideal for documentation pages and follows the document style on <a href=\"https://docs.github.com\">GitHub Docs</a>.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Docs layout in your Jekyll site, create a new file in your <code class=\"language-plaintext highlighter-rouge\">_docs</code> collection with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Your Documentation Title</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">docs</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">collections</span><span class=\"pi\">:</span>\n  <span class=\"na\">docs</span><span class=\"pi\">:</span>\n    <span class=\"na\">output</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n    <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">order</span>\n<span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n      <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n      <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/docs/:path</span>\n      <span class=\"na\">show_edit_url</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n      <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<p>By default, the theme builds the edit link from <code class=\"language-plaintext highlighter-rouge\">site.repository</code> and points to the current document path on the <code class=\"language-plaintext highlighter-rouge\">main</code> branch.</p>\n\n<p>If you need a different repository, branch, or base path, you can override it:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">edit_url</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">https://github.com/{user}/{repo}/edit/{branch}\"</span>\n</code></pre></div></div>\n\n<p>You can hide the edit link entirely:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">show_edit_url</span><span class=\"pi\">:</span> <span class=\"kc\">false</span>\n</code></pre></div></div>\n\n<h2 id=\"features\">Features</h2>\n\n<ul>\n  <li>Automatically generates a table of contents (<code class=\"language-plaintext highlighter-rouge\">toc: true</code>)</li>\n  <li>Uses a default image for social sharing</li>\n  <li>Sorts documentation pages by the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter</li>\n  <li>Adds an “Edit this page” link by default when the theme can build one from <code class=\"language-plaintext highlighter-rouge\">site.repository</code></li>\n  <li>Lets you disable the edit link with <code class=\"language-plaintext highlighter-rouge\">show_edit_url: false</code></li>\n  <li>Lets you override the generated GitHub edit link base with <code class=\"language-plaintext highlighter-rouge\">edit_url</code> when needed</li>\n</ul>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/custom-background-docs\" class=\"btn\">Live demo</a></p>\n\n<p><a href=\"/docs/index.html\" class=\"btn\">Docs section</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure your documentation files are placed in the <code class=\"language-plaintext highlighter-rouge\">_docs</code> folder</li>\n  <li>Use the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter to control the sorting of your documentation pages</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">toc</code> option automatically generates a table of contents for each page</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">show_edit_url</code> can be set globally or per page</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">edit_url</code> is optional and only needed when the generated GitHub edit link is not the right target</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/post.html\"\n                            aria-disabled=\"false\">Post Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/landing.html\"\n                            aria-disabled=\"false\">Landing layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/docs.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#features\">Features</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Landing layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Landing layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Landing layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\",\"headline\":\"Landing layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/landing.html\"},\"url\":\"/docs/layouts/landing.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Landing layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>landing</strong> layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Landing layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Landing layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">landing</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">none</code></td>\n      <td>Layout style customization (optional)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">repo_info</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.repo_info</code></td>\n      <td>Shows repository information when enabled</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">nav</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.nav</code></td>\n      <td>Navigation items to render on the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">social_media</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.social_media</code></td>\n      <td>Social media configuration used to render social profile links</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Displays a masthead for branding and introduction.</li>\n  <li>Optionally includes a repository information card.</li>\n  <li>Shows navigation links when navigation items are available.</li>\n  <li>Includes a section for social media links.</li>\n  <li>Provides a customizable structure for content placement.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Landing page setup:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">none</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p>To override the site navigation for just this page, pass a custom list of links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Docs</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/docs/</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Blog</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog/</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/landing\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">nav</code> is not defined at the page or site level, the landing page simply renders without navigation.</li>\n  <li>Set <code class=\"language-plaintext highlighter-rouge\">nav</code> to a list of links when you want to override <code class=\"language-plaintext highlighter-rouge\">site.nav</code> for a single page.</li>\n  <li>Ensure <code class=\"language-plaintext highlighter-rouge\">repo_info</code> and <code class=\"language-plaintext highlighter-rouge\">social_media</code> are configured in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> if needed.</li>\n  <li>Custom styles can be applied by modifying the theme’s CSS.</li>\n  <li>The layout is responsive and should work well on all screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for branding.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for theme switching.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">mini-repo-info-card.html</code> include for repository info.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">nav.html</code> include for navigation.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for social media links.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Landing layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/docs.html\"\n                            aria-disabled=\"false\">Docs Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/paginate_timeline.html\"\n                            aria-disabled=\"false\">Paginate Timeline...</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/landing.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Paginate Timeline Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginate Timeline Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Paginate Timeline Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\",\"headline\":\"Paginate Timeline Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/paginate_timeline.html\"},\"url\":\"/docs/layouts/paginate_timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Paginate Timeline Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>paginate_timeline</strong> layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting <a href=\"/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Paginate Timeline layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p>Jekyll’s pagination feature must be enabled in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>. For example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>\n</code></pre></div></div>\n\n<p>This config will split your post list into chunks of five items per page.</p>\n\n<p>The paginate layout must be used in the index page at the start of this path. For the example above, that would be <code class=\"language-plaintext highlighter-rouge\">/blog/index.html</code>.</p>\n\n<div class=\"markdown-alert markdown-alert-note\"><p class=\"markdown-alert-title\"><svg class=\"octicon octicon-info\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path></svg> Note</p><p>The path should be <em>absolute</em> and start with a <code class=\"language-plaintext highlighter-rouge\">/</code>, otherwise the index links will not work correctly.</p>\n</div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Paginate Timeline layout supports the following:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>None</td>\n      <td>The heading to display on the timeline page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n      <td>None</td>\n      <td>You can write page content below the front matter. It will appear above the timeline.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.pagination.permalink</code> or <code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n      <td>Path structure for pagination pages (for example, <code class=\"language-plaintext highlighter-rouge\">/blog/page/:num</code>)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n      <td>Number of posts to display per page, if desired. Can also be overridden in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li><strong>Page Content</strong>: The layout renders any Markdown or HTML in <code class=\"language-plaintext highlighter-rouge\">{{ content }}</code> before displaying the timeline.</li>\n  <li><strong>Post Timeline</strong>: It includes the <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> partial, which loops through the specified collection (typically <code class=\"language-plaintext highlighter-rouge\">paginator.posts</code>) and renders each post.</li>\n  <li><strong>Pagination Links</strong>: At the bottom of the page, you’ll find controls for navigating to previous and next pages, as well as direct links to individual pages.</li>\n  <li><strong>Custom Index Path</strong>: The layout attempts to resolve <code class=\"language-plaintext highlighter-rouge\">paginator.first_page_path</code> or a fallback URL for linking back to the main blog index.</li>\n  <li><strong>Site-Level Configuration</strong>: The layout relies on your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> settings (<code class=\"language-plaintext highlighter-rouge\">paginate</code>, <code class=\"language-plaintext highlighter-rouge\">paginate_path</code>, etc.) to define pagination behavior.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>Below is a minimal usage example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my blog! Below is a list of the latest posts. Use the pagination buttons to navigate.</span>\n</code></pre></div></div>\n\n<p><code class=\"language-plaintext highlighter-rouge\">_config.yml</code></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>\n</code></pre></div></div>\n\n<p>With this configuration:</p>\n<ol>\n  <li>Each page shows 5 posts.</li>\n  <li>Pagination paths follow the pattern <code class=\"language-plaintext highlighter-rouge\">/blog/page/2</code>, <code class=\"language-plaintext highlighter-rouge\">/blog/page/3</code>, and so on.</li>\n</ol>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li><strong>Jekyll Pagination Plugin</strong>: Ensure you have the <a href=\"/docs/plugins/pagination.html\">jekyll-paginate</a> plugin configured (depending on your Jekyll version).</li>\n  <li><strong>Page vs. Post</strong>: Paginated content is typically drawn from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>, but you can specify a different collection if desired.</li>\n  <li><strong>Responsive</strong>: The layout is designed to adapt to mobile, tablet, and desktop screens.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<ol>\n  <li><a href=\"/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> (included): Used to render the collection of posts.</li>\n  <li><a href=\"/docs/includes/post-timeline-card.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code></a> (included): Used to render each post.</li>\n  <li><a href=\"/docs/plugins/pagination.html\">pagination</a>: Make sure your Jekyll site is set up for pagination, or the layout’s pagination features will not work.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Paginate Timeline layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/landing.html\"\n                            aria-disabled=\"false\">Landing layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/repositories.html\"\n                            aria-disabled=\"false\">Repositories Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/paginate_timeline.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Repositories Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Repositories Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Repositories Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\",\"headline\":\"Repositories Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/repositories.html\"},\"url\":\"/docs/layouts/repositories.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Repositories Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>repositories</strong> layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Repositories layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Repositories layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">repositories</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">Repositories</code></td>\n      <td>The title displayed on the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n      <td>Optional</td>\n      <td>Additional text or descriptions displayed before the repositories</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Displays a title for the repositories page.</li>\n  <li>Optionally includes descriptive content before the repository list.</li>\n  <li>Dynamically loads and displays repositories using the <code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include.</li>\n  <li>Supports Jekyll’s standard content management for additional customization.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Repositories page with a custom title and description:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Projects</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my open-source projects repository page. Here you can find all my latest projects.</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/repositories\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">repositories</code> is <a href=\"/docs/configuration.html#repositories-optional\">configured</a> in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</li>\n  <li>You may need to include the <code class=\"language-plaintext highlighter-rouge\">jekyll-github-metadata</code> plugin in your Gemfile and/or included in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.\n  ```\n  plugins:\n    <ul>\n      <li>jekyll-github-metadata\n  ```</li>\n    </ul>\n  </li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/paginate_timeline.html\"\n                            aria-disabled=\"false\">Paginate Timeline...</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/paginate.html\"\n                            aria-disabled=\"false\">Paginate Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/repositories.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Paginate Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginate Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The paginate layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The paginate layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Paginate Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The paginate layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.\",\"headline\":\"Paginate Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/paginate.html\"},\"url\":\"/docs/layouts/paginate.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Paginate Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>paginate</strong> layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Paginate layout, create an index page for your blog:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Blog</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>Enable Jekyll pagination in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>\n</code></pre></div></div>\n\n<p>For the example above, the page using <code class=\"language-plaintext highlighter-rouge\">layout: paginate</code> should live at <code class=\"language-plaintext highlighter-rouge\">blog/index.html</code>.</p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Renders the page content before the list of posts.</li>\n  <li>Iterates through <code class=\"language-plaintext highlighter-rouge\">paginator.posts</code>.</li>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">post-feature-card.html</code> for featured posts and the first post in the collection.</li>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">post-card.html</code> for the remaining posts.</li>\n  <li>Adds pagination controls with <code class=\"language-plaintext highlighter-rouge\">paginator_nav.html</code>.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Blog</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Latest posts from the site.</span>\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/blog/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Use <a href=\"/docs/layouts/paginate_timeline.html\">Paginate Timeline</a> if you prefer the timeline-style list instead of cards.</li>\n  <li>This layout depends on Jekyll pagination being enabled.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/repositories.html\"\n                            aria-disabled=\"false\">Repositories Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/tag_index.html\"\n                            aria-disabled=\"false\">Tag Index Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/paginate.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Tag Index Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Tag Index Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The tag_index layout renders an index of tags and their associated posts. It works with jekyll-tagging or other tag-page generation approaches that provide tag collections and permalinks.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The tag_index layout renders an index of tags and their associated posts. It works with jekyll-tagging or other tag-page generation approaches that provide tag collections and permalinks.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Tag Index Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The tag_index layout renders an index of tags and their associated posts. It works with jekyll-tagging or other tag-page generation approaches that provide tag collections and permalinks.\",\"headline\":\"Tag Index Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/tag_index.html\"},\"url\":\"/docs/layouts/tag_index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Tag Index Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>tag_index</strong> layout renders an index of tags and their associated posts. It works with <code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> or other tag-page generation approaches that provide tag collections and permalinks.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>Create a tag index page like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">tag_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Tags</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">tag_index</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">Tags</code></td>\n      <td>Page title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.tags</code></td>\n      <td>Tag collection to render</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tag_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.tag_page_dir</code></td>\n      <td>Base path used to build tag links</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.autopages.tags.permalink</code> or generated from <code class=\"language-plaintext highlighter-rouge\">tag_path</code></td>\n      <td>Tag page permalink pattern</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts shown per tag section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">site.tags</code> by default.</li>\n  <li>Builds tag permalinks from <code class=\"language-plaintext highlighter-rouge\">tag_path</code> or <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code>.</li>\n  <li>Renders grouped tag sections using <code class=\"language-plaintext highlighter-rouge\">post-index.html</code>.</li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/tags/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>This layout complements the setup described in <a href=\"/docs/plugins/tagging.html\">Tagging</a>.</li>\n  <li>If you want more control over tag permalinks, set <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code> explicitly.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/paginate.html\"\n                            aria-disabled=\"false\">Paginate Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/category_index.html\"\n                            aria-disabled=\"false\">Category Index La...</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/tag_index.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Category Index Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Category Index Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The category_index layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from site.categories.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The category_index layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from site.categories.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Category Index Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The category_index layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from site.categories.\",\"headline\":\"Category Index Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/category_index.html\"},\"url\":\"/docs/layouts/category_index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Category Index Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>category_index</strong> layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from <code class=\"language-plaintext highlighter-rouge\">site.categories</code>.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>Create a category index page like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">category_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Categories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">category_index</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">Category</code></td>\n      <td>Page title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">categories</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.categories</code></td>\n      <td>Category collection to render</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">category_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.category_path</code></td>\n      <td>Base path used to build category links</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.autopages.categories.permalink</code> or generated from <code class=\"language-plaintext highlighter-rouge\">category_path</code></td>\n      <td>Category page permalink pattern</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts shown per category section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">site.categories</code> by default.</li>\n  <li>Builds category permalinks from <code class=\"language-plaintext highlighter-rouge\">category_path</code> or <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code>.</li>\n  <li>Renders grouped category sections using <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code>.</li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/category/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>This layout complements the setup described in <a href=\"/docs/plugins/category-pages.html\">Category pages</a>.</li>\n  <li>If you want more control over category permalinks, set <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code> explicitly.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/tag_index.html\"\n                            aria-disabled=\"false\">Tag Index Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/pagination.html\"\n                            aria-disabled=\"false\">Pagination</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/category_index.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Pagination | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Pagination\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Pagination\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Pagination\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Pagination\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Pagination\",\"headline\":\"Pagination\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/pagination.html\"},\"url\":\"/docs/plugins/pagination.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Pagination</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <h1 id=\"pagination\">Pagination</h1>\n\n<p><code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> is a Jekyll plugin that adds pagination functionality to your site, allowing posts to be split across multiple pages instead of displaying everything on a single page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>\n    <p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n    <div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">group</span> <span class=\"ss\">:jekyll_plugins</span> <span class=\"k\">do</span>\n  <span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-paginate\"</span>\n<span class=\"k\">end</span>\n</code></pre></div>    </div>\n\n    <p>Then, install the plugin:</p>\n\n    <div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div>    </div>\n  </li>\n  <li>\n    <p>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file:</p>\n\n    <div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-paginate settings</span>\n<span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>  <span class=\"c1\"># Number of posts per page</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>  <span class=\"c1\"># URL structure for paginated pages</span>\n</code></pre></div>    </div>\n  </li>\n  <li>\n    <p>(Optional) Add an index page at <code class=\"language-plaintext highlighter-rouge\">blog/index.html</code></p>\n\n    <div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code> ---\n title: My Blog\n layout: paginate\n ---\n</code></pre></div>    </div>\n\n    <p>Use <code class=\"language-plaintext highlighter-rouge\">layout: paginate_timeline</code> if you want the timeline-style listing instead of the card grid layout.</p>\n  </li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/blog/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://jekyllrb.com/docs/pagination/\">Jekyll Pagination Documentation</a></li>\n  <li><a href=\"https://github.com/jekyll/jekyll-paginate\">jekyll-paginate Repository</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/category_index.html\"\n                            aria-disabled=\"false\">Category Index La...</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/tagging.html\"\n                            aria-disabled=\"false\">Tagging</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/pagination.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#pagination\">Pagination</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n</li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Tagging | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Tagging\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Tagging\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\",\"headline\":\"Tagging\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/tagging.html\"},\"url\":\"/docs/plugins/tagging.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Tagging</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> is a plugin that enables better tag support in Jekyll sites.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>Add the following line to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-tagging\"</span>\n</code></pre></div></div>\n\n<ol>\n  <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">tag_page_layout</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n<span class=\"na\">tag_page_dir</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n</code></pre></div></div>\n\n<ol>\n  <li>(Optional) Add a tag index page at <code class=\"language-plaintext highlighter-rouge\">tags/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Tags\nlayout: tag_index\n---\n</code></pre></div></div>\n\n<ol>\n  <li>Add tags to your posts</li>\n</ol>\n\n<p>To assign tags to a post, include them in the front matter:</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ntags: [jekyll, tutorial, plugins]\n---\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/tags/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://jekyllrb.com/docs/posts/#tags\">Jekyll tags</a></li>\n  <li><a href=\"https://github.com/pattex/jekyll-tagging\">jekyll-tagging repository</a></li>\n  <li><a href=\"/docs/posts.html#tags-and-categories\">Posts documentation</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/pagination.html\"\n                            aria-disabled=\"false\">Pagination</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/category-pages.html\"\n                            aria-disabled=\"false\">Category pages</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/tagging.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Category pages | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Category pages\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Category pages\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\",\"headline\":\"Category pages\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/category-pages.html\"},\"url\":\"/docs/plugins/category-pages.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Category pages</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">group</span> <span class=\"ss\">:jekyll_plugins</span> <span class=\"k\">do</span>\n  <span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-category-pages\"</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<p>Then install it:</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div></div>\n\n<ol>\n  <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-category-pages settings</span>\n<span class=\"na\">category_path</span><span class=\"pi\">:</span> <span class=\"s\">category</span>\n<span class=\"na\">category_layout</span><span class=\"pi\">:</span> <span class=\"s\">category_layout.html</span>\n</code></pre></div></div>\n\n<ol>\n  <li>(Optional) Add a category index page at <code class=\"language-plaintext highlighter-rouge\">category/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Category\nlayout: category_index\n---\n</code></pre></div></div>\n\n<ol>\n  <li>Add a category to your post</li>\n</ol>\n\n<p>To assign a category to a post, include it in the front matter:</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ncategory: sample\n---\n</code></pre></div></div>\n\n<p>Or place the post within a directory.  The directory names will be automatically registered as categories for the post.</p>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/category/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://jekyllrb.com/docs/posts/#categories\">Jekyll categories</a></li>\n  <li><a href=\"https://github.com/field-theory/jekyll-category-pages\">jekyll-category-pages repository</a></li>\n  <li><a href=\"/docs/posts.html#categories\">Posts</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/tagging.html\"\n                            aria-disabled=\"false\">Tagging</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/mermaid.html\"\n                            aria-disabled=\"false\">Mermaid</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/category-pages.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Mermaid | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Mermaid\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Mermaid\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.\",\"headline\":\"Mermaid\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/mermaid.html\"},\"url\":\"/docs/plugins/mermaid.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Mermaid</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><code class=\"language-plaintext highlighter-rouge\">Mermaid</code> lets you write diagrams directly in Markdown using fenced code blocks. The theme detects <code class=\"language-plaintext highlighter-rouge\">mermaid</code> code fences automatically and renders them as diagrams on the page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>Add a Mermaid code fence to any page, post, or docs document:</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>```mermaid\ngraph TD\n  A[Write Markdown] --&gt; B[Render Diagram]\n  B --&gt; C[Ship Docs]\n```\n</code></pre></div></div>\n\n<ol>\n  <li>Build or serve the site as usual.</li>\n</ol>\n\n<p>The theme will:</p>\n\n<ul>\n  <li>transform <code class=\"language-plaintext highlighter-rouge\">language-mermaid</code> code blocks into Mermaid containers</li>\n  <li>render them on page load</li>\n  <li>re-render them when the selected light, dark, or auto color mode changes</li>\n</ul>\n\n<h2 id=\"example\">Example</h2>\n\n<pre><code class=\"language-mermaid\">graph TD\n  A[Write Markdown] --&gt; B[Render Diagram]\n  B --&gt; C[Ship Docs]\n</code></pre>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/mermaid/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://mermaid.js.org/intro/\">Mermaid documentation</a></li>\n  <li><a href=\"https://www.markdownguide.org/extended-syntax/#fenced-code-blocks\">Markdown code fences</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/category-pages.html\"\n                            aria-disabled=\"false\">Category pages</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/collection-menu.html\"\n                            aria-disabled=\"false\">Collection Menu</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/mermaid.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example\">Example</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Collection Menu | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Collection Menu\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Collection Menu\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\",\"headline\":\"Collection Menu\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/collection-menu.html\"},\"url\":\"/docs/includes/collection-menu.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Collection Menu</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>Collection Menu</strong> include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their <code class=\"language-plaintext highlighter-rouge\">category</code> field. It is particularly useful for displaying structured documentation, guides, or other content collections.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">docs_index</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">where_exp</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"item\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"s2\">\"item.url == '/docs/index.html'\"</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">first</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Documentation\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">docs_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"docs-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n      <td>Required</td>\n      <td>The Jekyll collection to display in the menu.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">index.title</code> or <code class=\"language-plaintext highlighter-rouge\">\"Collection\"</code></td>\n      <td>Display name for the collection in the menu header.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n      <td>None</td>\n      <td>Optional collection index document, used as the main link in the menu header.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">id</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">collection-menu</code></td>\n      <td>HTML <code class=\"language-plaintext highlighter-rouge\">id</code> attribute for the <code class=\"language-plaintext highlighter-rouge\">&lt;details&gt;</code> element; useful for multiple instances.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"example\">Example</h2>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">tutorials_index</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">where_exp</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"item\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"s2\">\"item.url == '/tutorials/index.html'\"</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">first</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Tutorials\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">tutorials_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"tutorials-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li><strong>Dropdown Menu:</strong>\n    <ul>\n      <li>Uses Primer CSS’s <code class=\"language-plaintext highlighter-rouge\">details-overlay</code> pattern to create a dropdown.</li>\n      <li>Clicking the burger icon opens the menu; clicking outside or pressing the close button closes it.</li>\n    </ul>\n  </li>\n  <li><strong>Collection Items Grouped by Category:</strong>\n    <ul>\n      <li>The menu groups collection documents by their <code class=\"language-plaintext highlighter-rouge\">category</code> front matter field.</li>\n      <li>Each category is displayed as a section header.</li>\n    </ul>\n  </li>\n  <li><strong>Current Page Highlighting:</strong>\n    <ul>\n      <li>The current page is marked with <code class=\"language-plaintext highlighter-rouge\">aria-current=\"page\"</code> when its URL matches the menu item.</li>\n    </ul>\n  </li>\n  <li><strong>Optional Index Link:</strong>\n    <ul>\n      <li>If <code class=\"language-plaintext highlighter-rouge\">index</code> is provided, the collection name in the header becomes a link to the index page.</li>\n      <li>If <code class=\"language-plaintext highlighter-rouge\">name</code> is not provided, the include falls back to <code class=\"language-plaintext highlighter-rouge\">index.title</code> or <code class=\"language-plaintext highlighter-rouge\">\"Collection\"</code>.</li>\n    </ul>\n  </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n  <li><strong>Primer CSS:</strong> Classes like <code class=\"language-plaintext highlighter-rouge\">details-overlay</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, <code class=\"language-plaintext highlighter-rouge\">SideNav</code> are part of Primer’s styling system.</li>\n  <li><strong>Octicons:</strong> For the close button icon.</li>\n  <li><strong>jQuery:</strong> Required for the custom close button behavior.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<ol>\n  <li><strong>Change Menu Appearance:</strong>\n    <ul>\n      <li>Adjust Primer CSS classes like <code class=\"language-plaintext highlighter-rouge\">SideNav</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, or <code class=\"language-plaintext highlighter-rouge\">AppHeader-link</code>.</li>\n    </ul>\n  </li>\n  <li><strong>Adjust Categories:</strong>\n    <ul>\n      <li>Ensure your collection items have a <code class=\"language-plaintext highlighter-rouge\">category</code> field in their front matter for grouping.</li>\n    </ul>\n  </li>\n  <li><strong>Modify Close Behavior:</strong>\n    <ul>\n      <li>The script attached to the close button can be adapted or replaced with custom behavior if needed.</li>\n    </ul>\n  </li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">collection</code> parameter should be passed explicitly when using this include.</li>\n  <li>Pass <code class=\"language-plaintext highlighter-rouge\">index</code> as a document object, not a string path.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">id</code> parameter allows multiple instances of this menu to coexist on a page without conflicts.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">aria-haspopup</code> and <code class=\"language-plaintext highlighter-rouge\">aria-current</code> attributes enhance accessibility for the dropdown menu and navigation links.</li>\n  <li>Ensure your site includes <strong>Primer CSS</strong> and <strong>jQuery</strong> for proper styling and behavior.</li>\n</ul>\n\n<p>By integrating <code class=\"language-plaintext highlighter-rouge\">collection-menu.html</code>, you can create a well-structured and accessible collection menu that enhances site navigation.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/mermaid.html\"\n                            aria-disabled=\"false\">Mermaid</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/link-card.html\"\n                            aria-disabled=\"false\">Link Card</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/collection-menu.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example\">Example</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Link Card | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Link Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Link Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\",\"headline\":\"Link Card\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/link-card.html\"},\"url\":\"/docs/includes/link-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Link Card</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">link_object</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing a <code class=\"language-plaintext highlighter-rouge\">link</code> object with the following properties:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Required</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td>Yes</td>\n      <td>The name or title of the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n      <td>No</td>\n      <td>The URL for the link. If not provided, the card will be displayed as text-only</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n      <td>No</td>\n      <td>The path to an image to be used as a thumbnail</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n      <td>No</td>\n      <td>A brief description of the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n      <td>No</td>\n      <td>An Octicon name to display instead of a thumbnail</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">featured_link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include checks if a URL is provided for the link.</li>\n  <li>If a URL is present:\n    <ul>\n      <li>It creates a clickable card with hover effects.</li>\n      <li>Displays a thumbnail image or Octicon if provided.</li>\n      <li>Shows the link name and description (if available).</li>\n    </ul>\n  </li>\n  <li>If no URL is present:\n    <ul>\n      <li>It creates a non-clickable text card.</li>\n      <li>Displays a thumbnail image if provided.</li>\n      <li>Shows the link name and description (if available).</li>\n    </ul>\n  </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file may depend on:</p>\n\n<ol>\n  <li>Octicons: The GitHub icon set, used if an <code class=\"language-plaintext highlighter-rouge\">octicon</code> property is specified.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The include uses Liquid tags and filters, such as <code class=\"language-plaintext highlighter-rouge\">relative_url</code>, to ensure correct URL generation.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> functionality assumes you have the Octicons library or a similar icon system set up in your theme.</li>\n  <li>The include uses responsive design principles with flexbox for layout.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/collection-menu.html\"\n                            aria-disabled=\"false\">Collection Menu</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/links.html\"\n                            aria-disabled=\"false\">Links</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/link-card.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Links | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Links\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Links\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\",\"headline\":\"Links\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/links.html\"},\"url\":\"/docs/includes/links.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Links</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a collection of link cards, typically used for displaying a set of important links on a page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>links.html<span class=\"w\"> </span><span class=\"na\">links</span><span class=\"o\">=</span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">featured_links</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include expects an explicit <code class=\"language-plaintext highlighter-rouge\">include.links</code> value:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Variable</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">include.links</code></td>\n      <td>Required</td>\n      <td>The collection of links to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include renders the provided <code class=\"language-plaintext highlighter-rouge\">include.links</code> collection.</li>\n  <li>It creates a container for the link cards.</li>\n  <li>It iterates through each link in the collection and includes a <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> for each one.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">link-card.html</code>: Another include file that defines how each link card is displayed.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the links collection:</p>\n\n<ol>\n  <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n  <li>Edit the <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include to change how individual links are displayed.</li>\n  <li>Adjust the container structure if you need a different layout for the links.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">include.links</code> is not provided, the include renders nothing.</li>\n  <li>The layout uses flexbox for responsive design, allowing the links to adapt to different screen sizes.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/link-card.html\"\n                            aria-disabled=\"false\">Link Card</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/paginator-nav.html\"\n                            aria-disabled=\"false\">Paginator Navigation</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/links.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Paginator Navigation | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginator Navigation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Paginator Navigation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\",\"headline\":\"Paginator Navigation\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/paginator-nav.html\"},\"url\":\"/docs/includes/paginator-nav.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Paginator Navigation</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>Paginator Navigation</strong> include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>You must also have <a href=\"/docs/plugins/pagination.html\"><code class=\"language-plaintext highlighter-rouge\">pagination</code></a> installed.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include can be customized by passing in the following optional parameters:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">paginate_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n      <td>Defines the pagination URL pattern (e.g., <code class=\"language-plaintext highlighter-rouge\">\"/blog/page/:num\"</code>).</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">previous_page_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">paginator.previous_page_path</code></td>\n      <td>The URL for the previous page in the pagination sequence.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">next_page_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">paginator.next_page_path</code></td>\n      <td>The URL for the next page in the pagination sequence.</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>This allows it to work with <a href=\"/docs/plugins/category-pages.html\"><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code></a></p>\n\n<h3 id=\"example-usage-with-parameters\">Example Usage with Parameters</h3>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"na\">paginate_path</span><span class=\"o\">=</span><span class=\"s2\">\"/blog/page/:num\"</span><span class=\"w\"> </span><span class=\"na\">previous_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">previous_page_path</span><span class=\"w\"> </span><span class=\"na\">next_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">next_page_path</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"example-output\">Example Output</h2>\n\n<p>When used in a paginated blog, the output might look like this:</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"paginate-container\"</span><span class=\"nt\">&gt;</span>\n    <span class=\"nt\">&lt;div</span> <span class=\"na\">role=</span><span class=\"s\">\"navigation\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Pagination\"</span> <span class=\"na\">class=</span><span class=\"s\">\"d-flex d-md-inline-block pagination\"</span><span class=\"nt\">&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">class=</span><span class=\"s\">\"previous_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"prev\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">&gt;</span>Previous<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"1\"</span><span class=\"nt\">&gt;</span>1<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"2\"</span><span class=\"nt\">&gt;</span>2<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/3/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"3\"</span><span class=\"nt\">&gt;</span>3<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">class=</span><span class=\"s\">\"next_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"next\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">&gt;</span>Next<span class=\"nt\">&lt;/a&gt;</span>\n    <span class=\"nt\">&lt;/div&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">paginator.total_pages</code> check ensures pagination is only displayed when necessary.</li>\n  <li>The first page always links to the base URL instead of <code class=\"language-plaintext highlighter-rouge\">/page/1/</code> for cleaner URLs.</li>\n  <li>This include is meant to be used in layouts that support pagination (<code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> or <code class=\"language-plaintext highlighter-rouge\">jekyll-paginate-v2</code>).</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/links.html\"\n                            aria-disabled=\"false\">Links</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-gallery.html\"\n                            aria-disabled=\"false\">Post Gallery</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/paginator-nav.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#example-usage-with-parameters\">Example Usage with Parameters</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-output\">Example Output</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Gallery | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Gallery\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Gallery\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\",\"headline\":\"Post Gallery\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-gallery.html\"},\"url\":\"/docs/includes/post-gallery.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Gallery</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">sections</code></td>\n      <td>Required</td>\n      <td>Grouped post sections to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">section_permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.permalink</code></td>\n      <td>The permalink structure for individual sections</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n      <td>None</td>\n      <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> with the section slug</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.per_section</code> or <code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts to display per section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-gallery.html<span class=\"w\">\n    </span><span class=\"na\">sections</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n    </span><span class=\"na\">section_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n    </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n    </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">4</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>This include is component-oriented: <code class=\"language-plaintext highlighter-rouge\">sections</code> should be passed explicitly, while <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">per_section</code> can optionally fall back to page-level pagination values.</p>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> to create a page that showcases posts from various categories.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">category_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Explore Our Categories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/category/\" class=\"btn\">Category Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>For each section in the collection, the include renders a heading and an optional “View all” link.</li>\n  <li>The first post in each section is displayed using <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code>.</li>\n  <li>Subsequent posts use <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code>.</li>\n  <li>The layout alternates direction between sections for visual variety.</li>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">sections</code> is missing, the include renders nothing.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code></li>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code></li>\n  <li>Primer CSS classes</li>\n  <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code> and <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code> includes are properly set up in your Jekyll site.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">{% cycle '', 'flex-row-reverse' %}</code> tag alternates the layout direction for visual interest.</li>\n  <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/paginator-nav.html\"\n                            aria-disabled=\"false\">Paginator Navigation</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-index.html\"\n                            aria-disabled=\"false\">Post Index</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-gallery.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Index | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Index\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post-index.html include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The post-index.html include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Index\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The post-index.html include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\",\"headline\":\"Post Index\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-index.html\"},\"url\":\"/docs/includes/post-index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Index</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">sections</code></td>\n      <td>Required</td>\n      <td>Grouped post sections to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">section_permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.permalink</code></td>\n      <td>The permalink structure for individual sections</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n      <td>None</td>\n      <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> with the section slug</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.per_section</code> or <code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts to display per section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-index.html<span class=\"w\">\n    </span><span class=\"na\">sections</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n    </span><span class=\"na\">section_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n    </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n    </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">8</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>This include is component-oriented: <code class=\"language-plaintext highlighter-rouge\">sections</code> should be passed explicitly, while <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">per_section</code> can optionally fall back to page-level pagination values.</p>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> to create a page that showcases posts with various tags.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">tag_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Tags</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/tags/\" class=\"btn\">Tag Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>For each section in the collection, the include renders a heading and an optional “View all” link.</li>\n  <li>All posts within a section are displayed using <code class=\"language-plaintext highlighter-rouge\">post-card.html</code>.</li>\n  <li>Posts are arranged in a flex-wrap layout for responsive display.</li>\n  <li>The “View all” link is hidden on smaller screens and displayed on larger screens.</li>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">sections</code> is missing, the include renders nothing.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-card.html</code></li>\n  <li>Primer CSS classes</li>\n  <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-card.html</code> include is properly set up in your Jekyll site.</li>\n  <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-gallery.html\"\n                            aria-disabled=\"false\">Post Gallery</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-timeline-card.html\"\n                            aria-disabled=\"false\">Post Timeline Card</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-index.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Timeline Card | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Timeline Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\",\"headline\":\"Post Timeline Card\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-timeline-card.html\"},\"url\":\"/docs/includes/post-timeline-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Timeline Card</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>Post Timeline Card</strong> include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line within a template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline-card.html<span class=\"w\"> </span><span class=\"na\">post</span><span class=\"o\">=</span><span class=\"nv\">post</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include requires a <code class=\"language-plaintext highlighter-rouge\">post</code> object to be passed, which contains various metadata fields. Below is a list of supported fields:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Required</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.url</code></td>\n      <td>✅ Yes</td>\n      <td>N/A</td>\n      <td>The permalink to the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.title</code></td>\n      <td>✅ Yes</td>\n      <td>N/A</td>\n      <td>The title of the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.author</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>The author of the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.date</code></td>\n      <td>✅ Yes</td>\n      <td>N/A</td>\n      <td>The date the post was published</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.tags</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>An array of tags associated with the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.excerpt</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>A short excerpt from the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.content</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>The full content of the post (used for “Continue Reading”)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.type</code></td>\n      <td>❌ No</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">comment</code></td>\n      <td>The type of post, used for the Octicon badge</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.video</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>A URL to an embedded video</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.image</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>A URL to a featured image</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">post-timeline</code> include, visit our demo page:</p>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Timeline Demo</a></p>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n  <li><strong>Octicons</strong>: The GitHub icon set for the badge next to the title.</li>\n  <li><strong>CSS Styles</strong>: The <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code> and <code class=\"language-plaintext highlighter-rouge\">.IssueLabel</code> classes should be styled appropriately in your theme.</li>\n  <li><strong>Jekyll Collections</strong>: The include expects a post-like object, typically from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To modify how posts are displayed:</p>\n\n<ol>\n  <li><strong>Edit the CSS</strong>: Adjust the <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code>, <code class=\"language-plaintext highlighter-rouge\">.title</code>, and <code class=\"language-plaintext highlighter-rouge\">.summary</code> styles.</li>\n  <li><strong>Modify the HTML</strong>: Change the markup within <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to match your theme.</li>\n  <li><strong>Update the Octicons</strong>: Modify the <code class=\"language-plaintext highlighter-rouge\">post.type</code> value to change the icon displayed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post</code> object is correctly passed when including this file.</li>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">post.type</code> is not provided, it defaults to <code class=\"language-plaintext highlighter-rouge\">comment</code> for the Octicon.</li>\n  <li>The layout is designed to be responsive and adaptable to different screen sizes.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for post links to ensure compatibility with different site configurations.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-index.html\"\n                            aria-disabled=\"false\">Post Index</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-timeline.html\"\n                            aria-disabled=\"false\">Post Timeline</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-timeline-card.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Timeline | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Timeline\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\",\"headline\":\"Post Timeline\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-timeline.html\"},\"url\":\"/docs/includes/post-timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Timeline</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing the following parameters:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts</code></td>\n      <td>Required</td>\n      <td>The posts to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code></td>\n      <td>The URL for the “More” link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.posts_limit</code>, <code class=\"language-plaintext highlighter-rouge\">site.paginate</code>, or <code class=\"language-plaintext highlighter-rouge\">-1</code></td>\n      <td>Number of posts to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">articles</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"s2\">\"/articles/\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>If the limit is set to a number below 0, all posts will be shown.</p>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> layout, visit our demo page:</p>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Post Timeline Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include sets up initial variables based on the provided parameters or fallback values.</li>\n  <li>It sorts the collection by date in reverse order (newest first).</li>\n  <li>It creates a container for the timeline posts.</li>\n  <li>It iterates through the provided posts (limited by <code class=\"language-plaintext highlighter-rouge\">limit</code> if set) and includes a <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> for each post.</li>\n  <li>If there are more posts than the displayed limit, it adds a “More” link at the bottom.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code>: Another include file that should define how each post card is displayed.</li>\n  <li>Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the timeline:</p>\n\n<ol>\n  <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n  <li>Edit the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> include to change how individual posts are displayed.</li>\n  <li>Adjust the “View all” link text and styling as needed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">posts</code> parameter must be passed explicitly.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">index</code> parameter is optional. If omitted, the include falls back to <code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code>.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for the link, which helps generate correct URLs in different site configurations.</li>\n  <li>The layout uses responsive design classes (<code class=\"language-plaintext highlighter-rouge\">container-xl</code>, <code class=\"language-plaintext highlighter-rouge\">p-responsive-blog</code>, etc.) for optimal display on various screen sizes.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-timeline-card.html\"\n                            aria-disabled=\"false\">Post Timeline Card</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/custom-styles.html\"\n                            aria-disabled=\"false\">Custom styles</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-timeline.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Custom styles | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Custom styles\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Site style\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Site style\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Custom styles\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Site style\",\"headline\":\"Custom styles\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/custom-styles.html\"},\"url\":\"/docs/custom-styles.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Custom styles</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <h2 id=\"site-style\">Site style</h2>\n\n<p>You can override theme styles in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code>. Using Sass is especially helpful when you want to reference Jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add CSS to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n    <span class=\"s\">.Link-btn {</span>\n        <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">h1 {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-timeline.html\"\n                            aria-disabled=\"false\">Post Timeline</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/debug.html\"\n                            aria-disabled=\"false\">Debug</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/custom-styles.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#site-style\">Site style</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#page-style\">Page style</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
    "You can also deploy this site with GitHub Actions. Below is a typical workflow file.\n\n```yaml\n# Sample workflow for building and deploying a Jekyll site to GitHub Pages\nname: Docs\n\non:\n  # Runs on pushes targeting the default branch\n  push:\n    branches: [\"main\"]\n\n  # Run on every pull request\n  pull_request:\n    types: [opened, reopened, synchronize]\n\n  # Allows you to run this workflow manually from the Actions tab\n  workflow_dispatch:\n\n  schedule:\n    # This will refresh your repositories and other user information every day\n    # * is a special character in YAML so you have to quote this string\n    # Generate from https://crontab.guru/\n    #        ┌───────────── minute (0 - 59)\n    #        │ ┌───────────── hour (0 - 23)\n    #        │ │ ┌───────────── day of the month (1 - 31)\n    #        │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)\n    #        │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)\n    #        │ │ │ │ │\n    #        │ │ │ │ │\n    #        │ │ │ │ │\n    #        * * * * *\n    - cron: \"0 0 * * *\"\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n  contents: read # needed to read your repository\n  pages: write # needed to enable and deploy GitHub Pages\n  id-token: write\n\n# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.\n# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: false\n\njobs:\n  # Build job\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v6\n      - name: Setup Ruby\n        uses: ruby/setup-ruby@v1.152.0\n        with:\n          bundler-cache: true # runs 'bundle install' and caches installed gems automatically\n      - name: Setup Pages\n        id: pages\n        uses: actions/configure-pages@v3\n        with:\n          enablement: true # Enable GitHub Pages if it is not already enabled\n      - name: Build\n        run: bundle exec jekyll build\n        env:\n          JEKYLL_ENV: production\n          JEKYLL_GITHUB_TOKEN: ${{ github.token }}\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3\n\n  # Deployment job\n  deploy:\n    if: github.ref == 'refs/heads/main' # Only deploy from the main branch\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    needs: build\n    steps:\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4\n\n```\n"
  ],
  "related_posts": [
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with image | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta name=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-11-21T00:00:00+00:00\",\"datePublished\":\"2020-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/11/21/empty/\"},\"url\":\"/examples/2020/11/21/empty/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    <div class=\"d-lg-flex flex-1\">\n    <script>\n    $(document).ready(function () {\n        $('#toolbar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n        })\n        $('#sidebar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n\n        })\n    });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n    <div class=\"flex-column flex-1 position-sticky top-0\">\n        <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n            <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n                <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n            </div>\n            <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n            </div>\n            <div class=\"d-flex flex-justify-center\">\n                <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            </div>\n            <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n                <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n            </div>\n        </div>\n        <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n            <div class=\"text-center\">\n                <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n    <div class=\"CircleBadge\" style=\"width: 128px;\" >\n      <a href=\"/\">\n        <img src=\"https://avatars.githubusercontent.com/u/211580654?v=4\" alt=\"Primer Pages\" >\n      </a>\n    </div>\n\n  <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Primer Pages</h1>\n  \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n    \n    <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n        <div class=\"h2 mr-2 v-align-middle\">\n        <span class=\"octicon octicon-mark-github-24\"></span>\n        </div>\n        <a href=\"https://github.com/PrimerPages\">\n            @PrimerPages\n        </a>\n    </div>\n</div>\n\n</div>\n\n                </div>\n                <div class=\"py-2\">\n                    \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n                </div>\n                <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/\" class=\"Header-link\"\n      >\n      Home\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/docs\" class=\"Header-link\"\n      >\n      Documentation\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/blog\" class=\"Header-link\"\n      >\n      Blog\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/demo\" class=\"Header-link\"\n      >\n      Demo\n    </a>\n</div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n    \n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 21, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+image&url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F;t=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F%2F&title=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/sidebar\">sidebar</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
  ],
  "config": null,
  "data": {},
  "pages": [
    "## Welcome to another page\n\n_yay_\n",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "Use this page to verify nested sections render correctly in the awesome nav tree.\n",
    "This is a appbar style page with a custom background and overlay.\n",
    "This is a docs layout with a custom background image and overlay.\n",
    "This is a sidebar style page with custom background and overlay.\n",
    "This is a stacked style page with a custom background and overlay.\n",
    "This is a topbar style page with a custom background and overlay.\n",
    "This is a custom background and overlay\n",
    "This is a landing page with a custom header color.\n",
    "This is a sidebar style page with a custom header color\n",
    "This is a stacked page with a custom header color\n",
    "This is a topbar style page with a custom header color\n",
    "This is a landing layout with a custom header image.\n",
    "This is a sidebar style page with a custom header image.\n",
    "This is a stacked style page with a custom header image.\n",
    "This is a topbar style page with a custom header image.\n",
    "",
    "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
    "This page exists so the demo has multiple leaf pages for generated previous/next navigation.\n\n## What this proves\n\n- Pages under the configured root are auto-indexed.\n- This page appears in sidebar and mobile menu without manual front matter nav data.\n",
    "",
    "",
    "",
    "This is a subsection index page inside the demo folder.\n",
    "This section demonstrates `jekyll-awesome-nav` using real pages under `demo/awesome-nav`.\n\nThe navigation tree, breadcrumbs, and previous/next links are generated from this folder structure.\n",
    "# Welcome to jekyll-theme-profile theme!\n\nThis theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n\nSetting up is a breeze, as it automatically populates your profile using your GitHub user info. Add custom links like Linktree and share engaging blog posts effortlessly.\n",
    "### A Jekyll theme for building sites with GitHub\n{:.f1}\n\nAutomatically styled with your GitHub profile. Switch layouts, share posts, and add custom links — all in minutes.\n{:.f2}\n\n[Get started](/docs/get-started.html){:.btn .btn-large .btn-primary}\n[View demo](/demo){:.btn .btn-large}\n\n### Features at a Glance\n{:.f1 .pt-12}\n\nMultiple built-in layouts\n{:.f3 .pt-6}\n\n![layouts](/media/layouts.gif)\n\nLight/dark mode support\n{:.f3 .pt-6}\n\n![light dark modes](/media/light-dark.gif)\n\n- Auto-fills your GitHub avatar, bio, and repositories\n- Add custom links like linktree, socials, and more\n- Markdown-based blog posts and documentation\n- Built with Jekyll, deploys with GitHub Pages\n",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "This page verifies that Mermaid diagrams respond to light/dark/auto theme changes.\n\n---\n\n## Flowchart\n\n```mermaid\ngraph TD\n  A[Start] --> B{Theme Mode}\n  B -->|Light| C[Neutral Theme]\n  B -->|Dark| D[Dark Theme]\n  B -->|Auto| E[System Preference]\n```\n\n---\n\n## Sequence Diagram\n\n```mermaid\nsequenceDiagram\n  participant User\n  participant Page\n  participant Mermaid\n\n  User->>Page: Toggle theme\n  Page->>Mermaid: Re-render diagrams\n  Mermaid-->>Page: Updated SVG\n```\n\n---\n\n## State Diagram\n\n```mermaid\nstateDiagram-v2\n  [*] --> Auto\n  Auto --> Light\n  Light --> Dark\n  Dark --> Auto\n```\n",
    "Use this page to confirm nested dropdown rendering and active breadcrumb expansion behavior.\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What       | Follows    |\n|------------|------------|\n| A table    | A header   |\n| A table    | A header   |\n| A table    | A header   |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n  - Apple\n  - Banana\n  - Cherry\n  - Grape\n  - Orange\n- Tools\n  - Hammer\n  - Screwdriver\n  - Wrench\n  - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist        | Album                | Year |\n|---------------|----------------------|------|\n| David Bowie   | Scary Monsters       | 1980 |\n| Prince        | Purple Rain          | 1982 |\n| Beastie Boys  | License to Ill       | 1986 |\n| Janet Jackson | Rhythm Nation 1814   | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item         | Description      | Color     | Size    | Material  | Weight | Price  | Rating | Stock | Notes                        |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair        | Office chair      | Black     | Medium  | Wood      | 12kg   | $120   | 4.5    | Yes   | Adjustable height             |\n| Table        | Dining table      | Brown     | Large   | Wood      | 30kg   | $450   | 4.7    | Yes   | Seats six                     |\n| Lamp         | Desk lamp         | White     | Small   | Metal     | 2kg    | $35    | 4.2    | No    | LED light included            |\n| Sofa         | Living room sofa  | Gray      | Large   | Fabric    | 45kg   | $780   | 4.8    | Yes   | Three seats                   |\n| Shelf        | Wall shelf        | Oak       | Medium  | Wood      | 8kg    | $60    | 4.6    | Yes   | Easy to install               |\n| Bed          | Queen bed frame   | Black     | Large   | Metal     | 40kg   | $550   | 4.9    | Yes   | Mattress not included         |\n| Mirror       | Wall mirror       | Silver    | Medium  | Glass     | 5kg    | $90    | 4.3    | Yes   | Comes with mounting kit       |\n| Rug          | Area rug          | Beige     | Large   | Wool      | 10kg   | $300   | 4.4    | No    | Hand-woven                    |\n| Cabinet      | Storage cabinet   | White     | Medium  | Wood      | 20kg   | $250   | 4.7    | Yes   | Multiple compartments         |\n| Fan          | Standing fan      | Gray      | Medium  | Plastic   | 4kg    | $80    | 4.1    | Yes   | Adjustable speed settings     |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n  cout << \"Hello World!\";\n  return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n  def __init__(self, name, age):\n    self.name = name\n    self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language    | Code              |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby        | `foo = \"bar\"`     |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "# Welcome to the Test Post\n\nThis is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.\n\n## Subheading Example\n\nThis is a paragraph with **bold text**, *italic text*, and a [link to jekyll](https://jekyllrb.com/). Text should wrap correctly, and spacing should be consistent.\n\n### Another Subheading\n\nLists are a key part of content. Here’s an unordered list:\n\n- Apples\n- Bananas\n- Grapes\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\n#### Inline Elements\n\nSome `inline code` for testing, along with `anotherSnippet` right here.\n\n##### Code Block\n\n```html\n<div class=\"example\">\n  <p>Hello, world!</p>\n</div>\n```\n\n###### Blockquote\n\n> This is a blockquote. It should stand out from the rest of the content.\n\n## Tables\n\nTables should be styled appropriately and should scroll if they are too wide.\n\n| Product  | Price | Stock        |\n|----------|-------|--------------|\n| Chair    | $50   | In stock     |\n| Table    | $150  | Low stock    |\n| Lamp     | $30   | Out of stock |\n\n### Images\n\nSmall images should be shown at their actual size.\n\n![Small Image](https://placebear.com/g/300/200)\n\nLarge images should always scale down and fit in the content container.\n\n![Large Image](https://placebear.com/g/1200/800)\n\n### Footnotes\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n     Indent paragraphs to include them in the footnote.\n     `my code`\n     Add as many paragraphs as you like.\n\n## Final Thoughts\n\nThis post covers common content types. \n",
    "",
    "",
    "",
    "",
    "",
    "",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "",
    "This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options:\n\n- [appbar](/demo/appbar/)\n- [sidebar](/demo/sidebar/)\n- [stacked](/demo/stacked/)\n- [topbar](/demo/topbar/)\n",
    "",
    "{% assign jekyll_version=jekyll.version | split: \".\" | first %}\n{% if jekyll_version == '3' %}\n/* Jekyll version 3 detected */\n@import 'jekyll-theme-profile-compat';\n{% else %}\n/* Jekyll version 4+ detected */\n@use 'jekyll-theme-profile';\n{% endif %}\n\n:root{\n    --color-profile-text: var(--color-fg-default);\n    --color-profile-accent: var(--color-accent-fg);\n    --color-profile-bg: var(--color-canvas-default);\n}\n",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "{% if page.paginator %}\n  <!-- Pagination is active -->\n  {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n  <!-- Show post excerpts for the current page -->\n  {% for post in posts limit: limit %}\n  {%- if post.feature or post == site.categories[page.category][0] %}\n  {%- include post-feature-card.html %}\n  {%- else %}\n  {%- include post-card.html border=\"border-top\" %}\n  {%- endif %}\n  {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
    "{% if page.paginator %}\n  <!-- Pagination is active -->\n  {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n  <!-- Show post excerpts for the current page -->\n  {% for post in posts limit: limit %}\n  {%- if post.feature or post == site.categories[page.category][0] %}\n  {%- include post-feature-card.html %}\n  {%- else %}\n  {%- include post-card.html border=\"border-top\" %}\n  {%- endif %}\n  {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
    "",
    "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n{% if page.xsl %}<?xml-stylesheet type=\"text/xsl\" href=\"{{ \"/sitemap.xsl\" | absolute_url }}\"?>\n{% endif %}<urlset xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd\" xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n{% assign collections = site.collections | where_exp:'collection','collection.output != false' %}{% for collection in collections %}{% assign docs = collection.docs | where_exp:'doc','doc.sitemap != false' %}{% for doc in docs %}<url>\n<loc>{{ doc.url | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>\n{% if doc.last_modified_at or doc.date %}<lastmod>{{ doc.last_modified_at | default: doc.date | date_to_xmlschema }}</lastmod>\n{% endif %}</url>\n{% endfor %}{% endfor %}{% assign pages = site.html_pages | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.url != \"/404.html\"' %}{% for page in pages %}<url>\n<loc>{{ page.url | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>\n{% if page.last_modified_at %}<lastmod>{{ page.last_modified_at | date_to_xmlschema }}</lastmod>\n{% endif %}</url>\n{% endfor %}{% assign static_files = page.static_files | where_exp:'page','page.sitemap != false' | where_exp:'page','page.name != \"404.html\"' %}{% for file in static_files %}<url>\n<loc>{{ file.path | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>\n<lastmod>{{ file.modified_time | date_to_xmlschema }}</lastmod>\n</url>\n{% endfor %}</urlset>\n",
    "Sitemap: {{ \"sitemap.xml\" | absolute_url }}\n"
  ],
  "categories": {
    "examples": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with image | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta name=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-11-21T00:00:00+00:00\",\"datePublished\":\"2020-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/11/21/empty/\"},\"url\":\"/examples/2020/11/21/empty/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    <div class=\"d-lg-flex flex-1\">\n    <script>\n    $(document).ready(function () {\n        $('#toolbar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n        })\n        $('#sidebar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n\n        })\n    });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n    <div class=\"flex-column flex-1 position-sticky top-0\">\n        <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n            <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n                <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n            </div>\n            <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n            </div>\n            <div class=\"d-flex flex-justify-center\">\n                <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            </div>\n            <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n                <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n            </div>\n        </div>\n        <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n            <div class=\"text-center\">\n                <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n    <div class=\"CircleBadge\" style=\"width: 128px;\" >\n      <a href=\"/\">\n        <img src=\"https://avatars.githubusercontent.com/u/211580654?v=4\" alt=\"Primer Pages\" >\n      </a>\n    </div>\n\n  <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Primer Pages</h1>\n  \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n    \n    <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n        <div class=\"h2 mr-2 v-align-middle\">\n        <span class=\"octicon octicon-mark-github-24\"></span>\n        </div>\n        <a href=\"https://github.com/PrimerPages\">\n            @PrimerPages\n        </a>\n    </div>\n</div>\n\n</div>\n\n                </div>\n                <div class=\"py-2\">\n                    \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n                </div>\n                <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/\" class=\"Header-link\"\n      >\n      Home\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/docs\" class=\"Header-link\"\n      >\n      Documentation\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/blog\" class=\"Header-link\"\n      >\n      Blog\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/demo\" class=\"Header-link\"\n      >\n      Demo\n    </a>\n</div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n    \n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 21, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+image&url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F;t=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F%2F&title=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/sidebar\">sidebar</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "news": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ]
  },
  "time": "2026-05-12 18:17:53 +0000",
  "tags": {
    "how-to": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "welcome": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "example": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "test": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "sidebar": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with image | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta name=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-11-21T00:00:00+00:00\",\"datePublished\":\"2020-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/11/21/empty/\"},\"url\":\"/examples/2020/11/21/empty/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    <div class=\"d-lg-flex flex-1\">\n    <script>\n    $(document).ready(function () {\n        $('#toolbar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n        })\n        $('#sidebar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n\n        })\n    });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n    <div class=\"flex-column flex-1 position-sticky top-0\">\n        <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n            <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n                <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n            </div>\n            <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n            </div>\n            <div class=\"d-flex flex-justify-center\">\n                <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            </div>\n            <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n                <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n            </div>\n        </div>\n        <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n            <div class=\"text-center\">\n                <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n    <div class=\"CircleBadge\" style=\"width: 128px;\" >\n      <a href=\"/\">\n        <img src=\"https://avatars.githubusercontent.com/u/211580654?v=4\" alt=\"Primer Pages\" >\n      </a>\n    </div>\n\n  <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Primer Pages</h1>\n  \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n    \n    <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n        <div class=\"h2 mr-2 v-align-middle\">\n        <span class=\"octicon octicon-mark-github-24\"></span>\n        </div>\n        <a href=\"https://github.com/PrimerPages\">\n            @PrimerPages\n        </a>\n    </div>\n</div>\n\n</div>\n\n                </div>\n                <div class=\"py-2\">\n                    \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n                </div>\n                <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/\" class=\"Header-link\"\n      >\n      Home\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/docs\" class=\"Header-link\"\n      >\n      Documentation\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/blog\" class=\"Header-link\"\n      >\n      Blog\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/demo\" class=\"Header-link\"\n      >\n      Demo\n    </a>\n</div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n    \n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 21, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+image&url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F;t=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F%2F&title=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/sidebar\">sidebar</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "video": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "news": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "includes": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "style": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "customization": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "background": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ],
    "header": [
      "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
    ]
  },
  "static_files": [
    {
      "name": "CNAME",
      "path": "/CNAME",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "CNAME",
      "extname": ""
    },
    {
      "name": "CONTRIBUTING.md",
      "path": "/CONTRIBUTING.md",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "CONTRIBUTING",
      "extname": ".md"
    },
    {
      "name": "LICENSE",
      "path": "/LICENSE",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "LICENSE",
      "extname": ""
    },
    {
      "name": "appbar-icon.png",
      "path": "/assets/img/appbar-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "appbar-icon",
      "extname": ".png"
    },
    {
      "name": "icon-bg.png",
      "path": "/assets/img/icon-bg.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-bg",
      "extname": ".png"
    },
    {
      "name": "icon-sidebar.png",
      "path": "/assets/img/icon-sidebar.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-sidebar",
      "extname": ".png"
    },
    {
      "name": "icon-stacked.png",
      "path": "/assets/img/icon-stacked.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-stacked",
      "extname": ".png"
    },
    {
      "name": "icon-topbar.png",
      "path": "/assets/img/icon-topbar.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-topbar",
      "extname": ".png"
    },
    {
      "name": "links.png",
      "path": "/assets/img/links.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "links",
      "extname": ".png"
    },
    {
      "name": "repositories.png",
      "path": "/assets/img/repositories.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "repositories",
      "extname": ".png"
    },
    {
      "name": "sidebar-icon.png",
      "path": "/assets/img/sidebar-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "sidebar-icon",
      "extname": ".png"
    },
    {
      "name": "stacked-icon.png",
      "path": "/assets/img/stacked-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "stacked-icon",
      "extname": ".png"
    },
    {
      "name": "topbar-icon.png",
      "path": "/assets/img/topbar-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "topbar-icon",
      "extname": ".png"
    },
    {
      "name": "README.md",
      "path": "/demo/README.md",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "README",
      "extname": ".md"
    },
    {
      "name": "appbar-icon.png",
      "path": "/media/appbar-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "appbar-icon",
      "extname": ".png"
    },
    {
      "name": "appbar-laptop.png",
      "path": "/media/appbar-laptop.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "appbar-laptop",
      "extname": ".png"
    },
    {
      "name": "appbar-phone.png",
      "path": "/media/appbar-phone.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "appbar-phone",
      "extname": ".png"
    },
    {
      "name": "appbar-preview.png",
      "path": "/media/appbar-preview.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "appbar-preview",
      "extname": ".png"
    },
    {
      "name": "appbar-tablet.png",
      "path": "/media/appbar-tablet.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "appbar-tablet",
      "extname": ".png"
    },
    {
      "name": "background-img.jpg",
      "path": "/media/background-img.jpg",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "background-img",
      "extname": ".jpg"
    },
    {
      "name": "blog-post-icon.png",
      "path": "/media/blog-post-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "blog-post-icon",
      "extname": ".png"
    },
    {
      "name": "blog-timeline-feature.png",
      "path": "/media/blog-timeline-feature.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "blog-timeline-feature",
      "extname": ".png"
    },
    {
      "name": "blog.png",
      "path": "/media/blog.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "blog",
      "extname": ".png"
    },
    {
      "name": "category-icon.png",
      "path": "/media/category-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "category-icon",
      "extname": ".png"
    },
    {
      "name": "custom-background-feature.png",
      "path": "/media/custom-background-feature.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "custom-background-feature",
      "extname": ".png"
    },
    {
      "name": "custom-header-feature.png",
      "path": "/media/custom-header-feature.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "custom-header-feature",
      "extname": ".png"
    },
    {
      "name": "icon-bg.png",
      "path": "/media/icon-bg.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-bg",
      "extname": ".png"
    },
    {
      "name": "icon-sidebar.png",
      "path": "/media/icon-sidebar.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-sidebar",
      "extname": ".png"
    },
    {
      "name": "icon-stacked-rev2.png",
      "path": "/media/icon-stacked-rev2.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-stacked-rev2",
      "extname": ".png"
    },
    {
      "name": "icon-stacked-rev3.svg",
      "path": "/media/icon-stacked-rev3.svg",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-stacked-rev3",
      "extname": ".svg"
    },
    {
      "name": "icon-stacked.png",
      "path": "/media/icon-stacked.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-stacked",
      "extname": ".png"
    },
    {
      "name": "icon-stacked.svg",
      "path": "/media/icon-stacked.svg",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-stacked",
      "extname": ".svg"
    },
    {
      "name": "icon-stacked.xcf",
      "path": "/media/icon-stacked.xcf",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-stacked",
      "extname": ".xcf"
    },
    {
      "name": "icon-topbar.png",
      "path": "/media/icon-topbar.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "icon-topbar",
      "extname": ".png"
    },
    {
      "name": "landing.png",
      "path": "/media/landing.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "landing",
      "extname": ".png"
    },
    {
      "name": "layouts.gif",
      "path": "/media/layouts.gif",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "layouts",
      "extname": ".gif"
    },
    {
      "name": "light-dark.gif",
      "path": "/media/light-dark.gif",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "light-dark",
      "extname": ".gif"
    },
    {
      "name": "links.png",
      "path": "/media/links.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "links",
      "extname": ".png"
    },
    {
      "name": "nav.png",
      "path": "/media/nav.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "nav",
      "extname": ".png"
    },
    {
      "name": "octocat.png",
      "path": "/media/octocat.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "octocat",
      "extname": ".png"
    },
    {
      "name": "repositories.png",
      "path": "/media/repositories.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "repositories",
      "extname": ".png"
    },
    {
      "name": "sidebar-icon.png",
      "path": "/media/sidebar-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "sidebar-icon",
      "extname": ".png"
    },
    {
      "name": "sidebar-laptop.png",
      "path": "/media/sidebar-laptop.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "sidebar-laptop",
      "extname": ".png"
    },
    {
      "name": "sidebar-phone.png",
      "path": "/media/sidebar-phone.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "sidebar-phone",
      "extname": ".png"
    },
    {
      "name": "sidebar-preview.png",
      "path": "/media/sidebar-preview.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "sidebar-preview",
      "extname": ".png"
    },
    {
      "name": "sidebar-tablet.png",
      "path": "/media/sidebar-tablet.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "sidebar-tablet",
      "extname": ".png"
    },
    {
      "name": "social-media.png",
      "path": "/media/social-media.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "social-media",
      "extname": ".png"
    },
    {
      "name": "stacked-icon.png",
      "path": "/media/stacked-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "stacked-icon",
      "extname": ".png"
    },
    {
      "name": "stacked-laptop.png",
      "path": "/media/stacked-laptop.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "stacked-laptop",
      "extname": ".png"
    },
    {
      "name": "stacked-phone.png",
      "path": "/media/stacked-phone.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "stacked-phone",
      "extname": ".png"
    },
    {
      "name": "stacked-preview.png",
      "path": "/media/stacked-preview.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "stacked-preview",
      "extname": ".png"
    },
    {
      "name": "stacked-tablet.png",
      "path": "/media/stacked-tablet.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "stacked-tablet",
      "extname": ".png"
    },
    {
      "name": "syntax-lineno.png",
      "path": "/media/syntax-lineno.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "syntax-lineno",
      "extname": ".png"
    },
    {
      "name": "tobpar-phone.png",
      "path": "/media/tobpar-phone.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "tobpar-phone",
      "extname": ".png"
    },
    {
      "name": "topbar-icon.png",
      "path": "/media/topbar-icon.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "topbar-icon",
      "extname": ".png"
    },
    {
      "name": "topbar-laptop.png",
      "path": "/media/topbar-laptop.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "topbar-laptop",
      "extname": ".png"
    },
    {
      "name": "topbar-preview.png",
      "path": "/media/topbar-preview.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "topbar-preview",
      "extname": ".png"
    },
    {
      "name": "topbar-tablet.png",
      "path": "/media/topbar-tablet.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:42 +0000",
      "basename": "topbar-tablet",
      "extname": ".png"
    },
    {
      "name": "default.png",
      "path": "/assets/img/default.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "default",
      "extname": ".png"
    },
    {
      "name": "favicon.ico",
      "path": "/assets/img/favicon.ico",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "favicon",
      "extname": ".ico"
    },
    {
      "name": "social-preview.png",
      "path": "/assets/img/social-preview.png",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "social-preview",
      "extname": ".png"
    },
    {
      "name": "user-image.jpg",
      "path": "/assets/img/user-image.jpg",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "user-image",
      "extname": ".jpg"
    },
    {
      "name": "anchor-links.js",
      "path": "/assets/js/anchor-links.js",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "anchor-links",
      "extname": ".js"
    },
    {
      "name": "mermaid.js",
      "path": "/assets/js/mermaid.js",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "mermaid",
      "extname": ".js"
    },
    {
      "name": "theme-toggle.js",
      "path": "/assets/js/theme-toggle.js",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "theme-toggle",
      "extname": ".js"
    },
    {
      "name": "topbar.js",
      "path": "/assets/js/topbar.js",
      "collection": null,
      "modified_time": "2026-05-12 18:17:50 +0000",
      "basename": "topbar",
      "extname": ".js"
    }
  ],
  "collections": [
    {
      "directory": "/home/runner/work/primerpages.github.io/primerpages.github.io/_docs",
      "docs": [
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Documentation | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Documentation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Documentation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Documentation\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/\"},\"url\":\"/docs/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Page flex-column flex-1 min-width-0 py-6\">\n    <div class=\"container-xl mx-auto p-responsive\">\n        \n        \n        <h1 class=\"h3-mktg mt-6 mb-4\">Documentation</h1>\n        \n        <div class=\"markdown-body\">\n            \n\n  \n  \n  \n  \n  \n\n\n\n\n\n\n<div class=\"d-flex flex-wrap gutter\">\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Getting started</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/get-started.html\">Get started</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/configuration.html\">Theme configuration</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/choose-a-layout.html\">Choose a layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/posts.html\">Write a post</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Styles</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/appbar.html\">Appbar style</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/sidebar.html\">Sidebar style</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/stacked.html\">Stacked style</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/styles/topbar.html\">Topbar style</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Layouts</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/page.html\">Page Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/home.html\">Home Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/profile.html\">Profile Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/linktree.html\">Linktree Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/post.html\">Post Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/docs.html\">Docs Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/landing.html\">Landing layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/paginate_timeline.html\">Paginate Timeline Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/repositories.html\">Repositories Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/paginate.html\">Paginate Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/tag_index.html\">Tag Index Layout</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/layouts/category_index.html\">Category Index Layout</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Plugins</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/pagination.html\">Pagination</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/tagging.html\">Tagging</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/category-pages.html\">Category pages</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/plugins/mermaid.html\">Mermaid</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Includes</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/collection-menu.html\">Collection Menu</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/link-card.html\">Link Card</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/links.html\">Links</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/paginator-nav.html\">Paginator Navigation</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-gallery.html\">Post Gallery</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-index.html\">Post Index</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-timeline-card.html\">Post Timeline Card</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/includes/post-timeline.html\">Post Timeline</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Advanced</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/custom-styles.html\">Custom styles</a></li>\n      \n          <li><a class=\"pt-2\" href=\"/docs/github-action.html\">Using with GitHub Actions</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n  \n  \n  \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n  <h3 class=\"h3\">Other</h3>\n  <div class=\"pt-2 mb-4 text-normal\">\n    <ul class=\"list-style-none pl-0\">\n      \n          <li><a class=\"pt-2\" href=\"/docs/debug.html\">Debug</a></li>\n      \n    </ul>\n  </div>\n</div>\n\n  \n</div>\n\n        </div>\n        <div class=\"flex-1\"></div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Get started | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Get started\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta name=\"twitter:title\" content=\"Get started\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar.\",\"headline\":\"Get started\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/get-started.html\"},\"url\":\"/docs/get-started.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Get started</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This theme is based on GitHub’s Primer style. It supports both light and dark modes, and four style options: <a href=\"/docs/styles/appbar.html\">appbar</a>, <a href=\"/docs/styles/sidebar.html\">sidebar</a>, <a href=\"/docs/styles/stacked.html\">stacked</a>, and <a href=\"/docs/styles/topbar.html\">topbar</a>.</p>\n\n<p><img src=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" alt=\"jekyll-theme-profile\" /></p>\n\n<h2 id=\"installation\">Installation</h2>\n\n<p>Add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-theme-profile\"</span>\n</code></pre></div></div>\n\n<p>And then execute:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div></div>\n\n<p>Or install it yourself as:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>gem <span class=\"nb\">install </span>jekyll-theme-profile\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>And add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n<span class=\"na\">repository</span><span class=\"pi\">:</span> <span class=\"s\">your-user/your-repo</span> <span class=\"c1\"># optional, enables repository cards and docs edit links</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the user's GitHub profile</span>\n</code></pre></div></div>\n\n<p>Or you can start with one of the <a href=\"https://github.com/PrimerPages/primerpages-dev/tree/main/templates\" data-proofer-ignore=\"\">template configs</a> and copy/customize the profile that best matches your setup, including the docs-first <code class=\"language-plaintext highlighter-rouge\">primerpages-docs</code> template for mixed Markdown and extracted source documentation.</p>\n\n<h2 id=\"building\">Building</h2>\n\n<p>Build the site and make it available on a local server</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">exec </span>jekyll serve\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/index.html\"\n                            aria-disabled=\"false\">Documentation</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/configuration.html\"\n                            aria-disabled=\"false\">Theme configuration</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/get-started.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#installation\">Installation</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#building\">Building</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Theme configuration | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Theme configuration\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme can be configured through _config.yml, and most settings can also be overridden per page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This theme can be configured through _config.yml, and most settings can also be overridden per page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Theme configuration\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This theme can be configured through _config.yml, and most settings can also be overridden per page.\",\"headline\":\"Theme configuration\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/configuration.html\"},\"url\":\"/docs/configuration.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Theme configuration</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This theme can be configured through <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>, and most settings can also be overridden per page.</p>\n\n<h2 id=\"theme-settings\">Theme settings</h2>\n\n<h3 id=\"setting-the-theme\">Setting the theme</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n</code></pre></div></div>\n\n<h3 id=\"customizing-the-theme\">Customizing the theme</h3>\n\n<h4 id=\"set-the-style-of-the-website\">Set the style of the website</h4>\n\n<p>Select the default style for your theme by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to your config file:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n</code></pre></div></div>\n\n<p>You can also set the style of a particular page by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to its front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h5 id=\"sidebar\"><a href=\"/demo/sidebar\">Sidebar</a></h5>\n\n<p><img src=\"/media/sidebar-preview.png\" alt=\"Sidebar image\" /></p>\n\n<h5 id=\"stacked\"><a href=\"/demo/stacked\">Stacked</a></h5>\n\n<p><img src=\"/media/stacked-preview.png\" alt=\"Stacked image\" /></p>\n\n<h5 id=\"topbar\"><a href=\"/demo/topbar\">Topbar</a></h5>\n\n<p><img src=\"/media/topbar-preview.png\" alt=\"Topbar image\" /></p>\n\n<h5 id=\"appbar\"><a href=\"/demo/appbar\">Appbar</a></h5>\n\n<p><img src=\"/media/appbar-preview.png\" alt=\"Appbar image\" /></p>\n\n<p>Choosing the right style helps define the user experience and visual flow.</p>\n\n<h4 id=\"setting-user-avatar\">Setting user avatar</h4>\n\n<p>By default, the theme uses your GitHub avatar. You can also set a custom avatar for your site.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">user_image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/user-image.jpg</span>\n</code></pre></div></div>\n\n<h4 id=\"customizing-light-and-dark-themes\">Customizing light and dark themes</h4>\n\n<p>This setting controls the light and dark color themes for your site. These theme names come from <a href=\"https://primer.style/css/storybook/?path=/docs/support-theming--docs\">Primer CSS</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># The themes to use for dark and light</span>\n<span class=\"na\">dark_theme</span><span class=\"pi\">:</span> <span class=\"s\">dark_dimmed</span>\n<span class=\"na\">light_theme</span><span class=\"pi\">:</span> <span class=\"s\">light</span>\n</code></pre></div></div>\n\n<h4 id=\"set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</h4>\n\n<p>You can even change the background by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for both light and dark styles</span>\n</code></pre></div></div>\n\n<p>or set custom overlays for the light and dark themes.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n  <span class=\"na\">light</span><span class=\"pi\">:</span> <span class=\"c1\"># custom overlay for light and dark styles</span>\n    <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(255, 255, 255, 0.5)</span>\n  <span class=\"na\">dark</span><span class=\"pi\">:</span>\n    <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"set-custom-header-colors\">Set custom header colors</h4>\n\n<p>You can change the header color by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file or page front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">color</code> The main background color of the header</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">text</code> The color of text elements within the header</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">accent</code> Controls the color of accent elements such as links</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">image</code> Sets an image in the background of the header</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">overlay</code> Sets the overlay on top of an image for better visibility of links</li>\n</ul>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"additional-theme-features\">Additional theme features</h4>\n\n<p>These additional features pull information into your site from your GitHub account.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">repository</span><span class=\"pi\">:</span> <span class=\"s\">your-user/your-repo</span> <span class=\"c1\"># used by the theme's GitHub-aware features</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the user's GitHub profile</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">repository</code> is a theme/GitHub metadata setting, not a core Jekyll setting</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">repo_info</code> will show the repository information in the header section</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">user_metadata</code> will show metadata associated with your user under your masthead</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">profile_link</code> will show a link to your profile</li>\n</ul>\n\n<h2 id=\"social-media-and-seo-optional\">Social media and SEO (optional)</h2>\n\n<h3 id=\"setting-the-social-media-preview-image\">Setting the social media preview image</h3>\n\n<p>You can set the social media image for your site with the setting</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/screenshot.jpg</span>\n</code></pre></div></div>\n\n<p>This works both in YAML front matter for a page and in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>. Page settings override site settings.</p>\n\n<p>Set the default for posts through the default settings in the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">posts\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">post\"</span>\n      <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/blog/:year/:month/:day/:title.html</span>\n      <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n      <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<h3 id=\"adding-your-socials\">Adding your socials</h3>\n\n<p>Use the <code class=\"language-plaintext highlighter-rouge\">social_media</code> section to add links to your social media profiles. For each platform, provide your username or user ID to show the matching icon and link on your profile.</p>\n\n<p><img src=\"/media/social-media.png\" alt=\"Social Media\" class=\"border\" /></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">social_media</span><span class=\"pi\">:</span>\n  <span class=\"na\">behance</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">dribbble</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">docker</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">facebook</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">github</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">hackerrank</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">instagram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">keybase</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">linkedin</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">mail</span><span class=\"pi\">:</span> <span class=\"s\">email@address</span>\n  <span class=\"na\">mastodon</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">medium</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">stackoverflow</span><span class=\"pi\">:</span> <span class=\"s\">your_user_id</span>\n  <span class=\"na\">telegram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">threads</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">tiktok</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">twitter</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">unsplash</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">vk</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">vscode</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">youtube</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n  <span class=\"na\">x</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n</code></pre></div></div>\n\n<p>You can also set the icon color. If you do not set one, the original icon colors are used.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">icon_color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#959da5\"</span>\n</code></pre></div></div>\n\n<h2 id=\"navigation-links-optional\">Navigation links (optional)</h2>\n\n<p>You can add navigation links that will show up in your header bar and in navigation menus.</p>\n\n<p>These will be visible in all pages, and are the main elements in the <a href=\"/docs/layouts/landing.html\">landing layout</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Navigation links</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Posts</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Categories</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name of the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">url</code> The url of the link</li>\n</ul>\n\n<h2 id=\"links-optional\">Links (optional)</h2>\n\n<p>In the <code class=\"language-plaintext highlighter-rouge\">links</code> section, you can add links to showcase various pages on the web or your website.</p>\n\n<p>These will show in <a href=\"/docs/layouts/home.html\">home</a>, <a href=\"/docs/layouts/profile.html\">profile</a>, and <a href=\"/docs/layouts/linktree.html\">linktree</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># List of links for link cards</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">All blog posts</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n    <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/blog-post-icon.png</span> <span class=\"c1\"># optional</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Category</span>\n    <span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">Browse all categories in posts</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n    <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name/title to show for the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">description</code> (optional) Additional text to show for the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">url</code> (optional) The URL of the link</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">thumbnail</code> (optional) The thumbnail image to show</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">octicon</code> (optional) Instead of a thumbnail, use an octicon icon</li>\n</ul>\n\n<h2 id=\"repositories-optional\">Repositories (optional)</h2>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">repositories</code> section lets you display GitHub repositories on your page. You can sort them by stars or recent pushes, limit how many are shown, and exclude archived, forked, or specific repositories from the list.</p>\n\n<p>These show in the <a href=\"/docs/layouts/profile.html\">profile</a> and <a href=\"/docs/layouts/repositories.html\">repositories</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Repositories to show on home page</span>\n<span class=\"na\">repositories</span><span class=\"pi\">:</span>\n  <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">stars</span> <span class=\"c1\"># pushed or stars</span>\n  <span class=\"na\">limit</span><span class=\"pi\">:</span> <span class=\"m\">24</span>\n  <span class=\"na\">exclude</span><span class=\"pi\">:</span>\n    <span class=\"na\">archived</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n    <span class=\"na\">forks</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n    <span class=\"na\">repositories</span><span class=\"pi\">:</span>\n      <span class=\"c1\"># - list of repositories to exclude</span>\n</code></pre></div></div>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">sort_by</code> What to sort repositories by, either latest pushed or number of stars</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">limit</code> Maximum number of repositories to show</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">exclude</code> Repositories to exclude from your site</li>\n</ul>\n\n<h2 id=\"post-settings\">Post settings</h2>\n\n<h3 id=\"related\">Related</h3>\n\n<p>Each post can show related posts below it.  Choose either <code class=\"language-plaintext highlighter-rouge\">tags</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> or <code class=\"language-plaintext highlighter-rouge\">random</code> or a combination.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/get-started.html\"\n                            aria-disabled=\"false\">Get started</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/choose-a-layout.html\"\n                            aria-disabled=\"false\">Choose a layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/configuration.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#theme-settings\">Theme settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-theme\">Setting the theme</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#customizing-the-theme\">Customizing the theme</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-the-style-of-the-website\">Set the style of the website</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#sidebar\">Sidebar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#stacked\">Stacked</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#topbar\">Topbar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#appbar\">Appbar</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h4\"><a href=\"#setting-user-avatar\">Setting user avatar</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#customizing-light-and-dark-themes\">Customizing light and dark themes</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-custom-header-colors\">Set custom header colors</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#additional-theme-features\">Additional theme features</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#social-media-and-seo-optional\">Social media and SEO (optional)</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-social-media-preview-image\">Setting the social media preview image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#adding-your-socials\">Adding your socials</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#navigation-links-optional\">Navigation links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#links-optional\">Links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#repositories-optional\">Repositories (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#post-settings\">Post settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#related\">Related</a></li>\n</ul>\n</li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Choose a layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Choose a layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Choose a layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.\",\"headline\":\"Choose a layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/choose-a-layout.html\"},\"url\":\"/docs/choose-a-layout.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Choose a layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>Most sites built with this theme only need a small set of layouts. This guide helps you pick the right one quickly.</p>\n\n<h2 id=\"choose-this-when\">Choose this when</h2>\n\n<h3 id=\"page\"><code class=\"language-plaintext highlighter-rouge\">page</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">page</code> when you want a simple standalone content page.</p>\n\n<ul>\n  <li>Good for about pages, contact pages, and general markdown content</li>\n  <li>Minimal structure beyond the theme shell</li>\n</ul>\n\n<p><a href=\"/demo/topbar/page\">Demo</a></p>\n\n<h3 id=\"post\"><code class=\"language-plaintext highlighter-rouge\">post</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">post</code> when you are writing article-style content.</p>\n\n<ul>\n  <li>Good for blog posts, announcements, and long-form writing</li>\n  <li>Supports hero media, tags, related posts, and an optional table of contents</li>\n</ul>\n\n<p><a href=\"/demo/topbar/post\">Demo</a></p>\n\n<h3 id=\"profile\"><code class=\"language-plaintext highlighter-rouge\">profile</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">profile</code> when the site centers on a person, project, or organization identity.</p>\n\n<ul>\n  <li>Good default homepage for most theme users</li>\n  <li>Combines masthead, links, posts, and repositories</li>\n</ul>\n\n<p><a href=\"/demo/profile\">Demo</a></p>\n\n<h3 id=\"landing\"><code class=\"language-plaintext highlighter-rouge\">landing</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">landing</code> when you want a homepage that emphasizes navigation and repository context.</p>\n\n<ul>\n  <li>Good for project homepages</li>\n  <li>Best when your top-level navigation is an important part of the experience</li>\n</ul>\n\n<p><a href=\"/demo/landing\">Demo</a></p>\n\n<h3 id=\"linktree\"><code class=\"language-plaintext highlighter-rouge\">linktree</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">linktree</code> when the page is mainly a curated list of links.</p>\n\n<ul>\n  <li>Good for creator pages, bio links, resource hubs, and simple launch pages</li>\n  <li>Works well with custom background styling and social links</li>\n</ul>\n\n<p><a href=\"/demo/linktree\">Demo</a></p>\n\n<h3 id=\"repositories\"><code class=\"language-plaintext highlighter-rouge\">repositories</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">repositories</code> when the repository list should be the primary content.</p>\n\n<ul>\n  <li>Good for portfolio-style project indexes</li>\n  <li>Best when the GitHub repo list is more important than posts</li>\n</ul>\n\n<p><a href=\"/demo/repositories\">Demo</a></p>\n\n<h3 id=\"docs\"><code class=\"language-plaintext highlighter-rouge\">docs</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">docs</code> when you are publishing a structured documentation collection.</p>\n\n<ul>\n  <li>Good for guides, references, and multi-page documentation</li>\n  <li>Best when you want categories, sidebar navigation, and article-level organization</li>\n</ul>\n\n<p><a href=\"/demo/custom-background-docs\">Demo</a></p>\n\n<h3 id=\"paginate\"><code class=\"language-plaintext highlighter-rouge\">paginate</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">paginate</code> when you want a card-based blog index.</p>\n\n<ul>\n  <li>Good for blog homepages with featured cards</li>\n  <li>Best when visual post previews matter</li>\n</ul>\n\n<p><a href=\"/blog/\">Demo</a></p>\n\n<h3 id=\"paginate_timeline\"><code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code></h3>\n\n<p>Use <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> when you want chronological browsing in a simpler timeline format.</p>\n\n<ul>\n  <li>Good for update logs, journals, and post archives</li>\n  <li>Best when recency matters more than card-style presentation</li>\n</ul>\n\n<p><a href=\"/demo/timeline\">Demo</a></p>\n\n<h2 id=\"a-simple-starting-point\">A simple starting point</h2>\n\n<p>If you are not sure where to begin:</p>\n\n<ol>\n  <li>Start with <code class=\"language-plaintext highlighter-rouge\">profile</code> for your homepage.</li>\n  <li>Use <code class=\"language-plaintext highlighter-rouge\">page</code> for standalone content.</li>\n  <li>Use <code class=\"language-plaintext highlighter-rouge\">post</code> for writing.</li>\n  <li>Add <code class=\"language-plaintext highlighter-rouge\">docs</code> only if you need a real documentation section.</li>\n</ol>\n\n<h2 id=\"related-docs\">Related docs</h2>\n\n<ul>\n  <li><a href=\"/docs/get-started.html\">Get started</a></li>\n  <li><a href=\"/docs/configuration.html\">Theme configuration</a></li>\n  <li><a href=\"/docs/styles/appbar.html\">Appbar style</a></li>\n  <li><a href=\"/docs/styles/sidebar.html\">Sidebar style</a></li>\n  <li><a href=\"/docs/styles/stacked.html\">Stacked style</a></li>\n  <li><a href=\"/docs/styles/topbar.html\">Topbar style</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/configuration.html\"\n                            aria-disabled=\"false\">Theme configuration</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/posts.html\"\n                            aria-disabled=\"false\">Write a post</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/choose-a-layout.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#choose-this-when\">Choose this when</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#page\">page</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#post\">post</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#profile\">profile</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#landing\">landing</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#linktree\">linktree</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#repositories\">repositories</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#docs\">docs</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#paginate\">paginate</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#paginate_timeline\">paginate_timeline</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#a-simple-starting-point\">A simple starting point</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#related-docs\">Related docs</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Write a post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Write a post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"To add new posts, create a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"To add new posts, create a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Write a post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"To add new posts, create a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter.\",\"headline\":\"Write a post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/posts.html\"},\"url\":\"/docs/posts.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Write a post</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>To add new posts, create a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<h2 id=\"front-matter\">Front matter</h2>\n\n<p>All blog posts must begin with front matter, which is typically used to set a layout and other metadata:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">welcome</span><span class=\"nv\"> </span><span class=\"s\">to</span><span class=\"nv\"> </span><span class=\"s\">Jekyll!\"</span>\n<span class=\"nn\">---</span>\n\n<span class=\"gh\"># Welcome</span>\n\n<span class=\"gs\">**Hello world**</span>, this is my first Jekyll blog post.\n\nI hope you like it!\n</code></pre></div></div>\n\n<p>Here’s a list of variables for this theme</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Specifies the layout file to use. Use the layout file name without the file extension. <br /><br /> See <a href=\"/docs/index.html\">the docs index</a> for available options.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">permalink</code></td>\n      <td>If you need or processed blog post URLs to be something other than the site-wide default (<code class=\"language-plaintext highlighter-rouge\">/year/month/day/title.html</code>), then you can set this variable and it will be used as the final URL</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">published</code></td>\n      <td>Set to false if you don’t want a specific post to show up when the site is generated</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">date</code></td>\n      <td>A date here overrides the date from the filename. This can be used to ensure correct sorting of posts. A date is specified in the format <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD HH:MM:SS +/-TTTT</code>; hours, minutes, seconds, and timezone offset are optional</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code></td>\n      <td>Instead of placing posts inside of folders, you can specify one or more categories that the post belongs to.  When the site is generated the post will act as though it had been set with these categories normally.  Categories (plural key) can be specified as a YAML list or a space-separated string</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n      <td>Similar to categories, one or multiple tags can be added to a post.  Also like categories, tags can be specified as a YAML list or a space-separated string</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n      <td>A longer description used for the description meta tag</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">image</code></td>\n      <td>URL to an image associated with the post for SEO</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">author</code></td>\n      <td>Post-specific author information</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">locale</code></td>\n      <td>Post-specific locale information</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code></td>\n      <td>You can access a snippet of a post’s content by using the <code class=\"language-plaintext highlighter-rouge\">excerpt</code> variable on a post. By default, this is the first paragraph of content, but it can be customized with <code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code>. <br /><br />Example <code class=\"language-plaintext highlighter-rouge\">excerpt_separator: &lt;!--more--&gt;</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"including-images-and-resources\">Including images and resources</h2>\n\n<p>At some point, you’ll want to include images, downloads, or other digital assets along with your text content. One common solution is to create a folder in the root of the project directory called something like <code class=\"language-plaintext highlighter-rouge\">assets</code>, into which any images, files or other resources are placed. Then, from within any post, they can be linked to using the site’s root as the path for the asset to include. The best way to do this depends on the way your site’s (sub)domain and path are configured, but here are some simple examples in Markdown:</p>\n\n<p>Including an image asset in a post:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... which is shown in the screenshot below:\n<span class=\"p\">![</span><span class=\"nv\">My helpful screenshot</span><span class=\"p\">](</span><span class=\"sx\">/assets/screenshot.jpg</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Linking to a PDF for readers to download:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... you can <span class=\"p\">[</span><span class=\"nv\">get the PDF</span><span class=\"p\">](</span><span class=\"sx\">/assets/mydoc.pdf</span><span class=\"p\">)</span> directly.\n</code></pre></div></div>\n\n<h2 id=\"tags-and-categories\">Tags and Categories</h2>\n\n<p>Jekyll has first class support for <em>tags</em> and <em>categories</em> in blog posts.</p>\n\n<h3 id=\"tags\">Tags</h3>\n\n<p>Tags for a post are defined in the post’s front matter using either the key <code class=\"language-plaintext highlighter-rouge\">tag</code> for a single entry or <code class=\"language-plaintext highlighter-rouge\">tags</code> for multiple entries.\nSince Jekyll expects multiple items mapped to the key <code class=\"language-plaintext highlighter-rouge\">tags</code>, it will automatically split a string entry if it contains whitespace. For example, while front matter <code class=\"language-plaintext highlighter-rouge\">tag: classic hollywood</code> will be processed into a singular entity <code class=\"language-plaintext highlighter-rouge\">\"classic hollywood\"</code>, front matter <code class=\"language-plaintext highlighter-rouge\">tags: classic hollywood</code> will be processed into an array of entries <code class=\"language-plaintext highlighter-rouge\">[\"classic\", \"hollywood\"]</code>.</p>\n\n<p>Irrespective of the front matter key chosen, Jekyll stores the metadata mapped to the plural key which is exposed to Liquid templates.</p>\n\n<p>By default the theme will show posts related by tags or categories with the setting:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># related</span>\n<span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n<p>These show up as “related posts” underneath a post.</p>\n\n<p>See <a href=\"/docs/plugins/tagging.html\">tagging</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> plugin.</p>\n\n<h3 id=\"categories\">Categories</h3>\n\n<p>Categories of a post work similar to the tags above:</p>\n\n<ul>\n  <li>They can be defined via the front matter using keys <code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> (that follow the same logic as for tags)</li>\n  <li>All categories registered in the site are exposed to Liquid templates via <code class=\"language-plaintext highlighter-rouge\">site.categories</code> which can be iterated over (similar to the loop for tags above.)</li>\n</ul>\n\n<p><em>The similarity between categories and tags however, ends there.</em></p>\n\n<p>Unlike tags, categories for posts can also be defined by a post’s file path. Any directory above _posts will be read-in as a category. For example, if a post is at path <code class=\"language-plaintext highlighter-rouge\">movies/horror/_posts/2019-05-21-bride-of-chucky.markdown</code>, then <code class=\"language-plaintext highlighter-rouge\">movies</code> and <code class=\"language-plaintext highlighter-rouge\">horror</code> are automatically registered as categories for that post.</p>\n\n<p>When the post also has front matter defining categories, they just get added to the existing list if not present already.</p>\n\n<p>The hallmark difference between categories and tags is that categories of a post may be incorporated into the generated URL for the post, while tags cannot be.</p>\n\n<p>Therefore, depending on whether front matter has <code class=\"language-plaintext highlighter-rouge\">category: classic hollywood</code>, or <code class=\"language-plaintext highlighter-rouge\">categories: classic hollywood</code>, the example post above would have the URL as either <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic%20hollywood/2019/05/21/bride-of-chucky.html</code> or <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic/hollywood/2019/05/21/bride-of-chucky.html</code> respectively.</p>\n\n<p>See <a href=\"/docs/plugins/category-pages.html\">category pages</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> plugin.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/choose-a-layout.html\"\n                            aria-disabled=\"false\">Choose a layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/appbar.html\"\n                            aria-disabled=\"false\">Appbar style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/posts.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#front-matter\">Front matter</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#including-images-and-resources\">Including images and resources</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tags-and-categories\">Tags and Categories</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#tags\">Tags</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#categories\">Categories</a></li>\n</ul>\n</li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Appbar style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Appbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/appbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/appbar-preview.png\" />\n<meta name=\"twitter:title\" content=\"Appbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Appbar style\",\"image\":\"/media/appbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/appbar.html\"},\"url\":\"/docs/styles/appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Appbar style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/appbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>appbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A fixed top navigation bar</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">appbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>appbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an appbar as a <a href=\"/demo/appbar\">home</a>, <a href=\"/demo/appbar/page\">page</a>, and <a href=\"/demo/appbar/post\">post</a>.</p>\n\n<p><img src=\"/media/appbar-tablet.png\" alt=\"Appbar tablet\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/posts.html\"\n                            aria-disabled=\"false\">Write a post</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/sidebar.html\"\n                            aria-disabled=\"false\">Sidebar style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/appbar.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Sidebar style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Sidebar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/sidebar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/sidebar-preview.png\" />\n<meta name=\"twitter:title\" content=\"Sidebar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Sidebar style\",\"image\":\"/media/sidebar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/sidebar.html\"},\"url\":\"/docs/styles/sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Sidebar style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/sidebar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>sidebar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A collapsible side navigation bar that collapses</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">sidebar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>sidebar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of a sidebar as a <a href=\"/demo/sidebar\">home</a>, <a href=\"/demo/sidebar/page\">page</a>, and <a href=\"/demo/sidebar/post\">post</a>.</p>\n\n<p><img src=\"/media/sidebar-laptop.png\" alt=\"\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/appbar.html\"\n                            aria-disabled=\"false\">Appbar style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/stacked.html\"\n                            aria-disabled=\"false\">Stacked style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/sidebar.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Stacked style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Stacked style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/stacked-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/stacked-preview.png\" />\n<meta name=\"twitter:title\" content=\"Stacked style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Stacked style\",\"image\":\"/media/stacked-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/stacked.html\"},\"url\":\"/docs/styles/stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Stacked style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/stacked-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>stacked</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A top header with image</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">stacked</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>stacked</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of stacked as a <a href=\"/demo/stacked\">home</a>, <a href=\"/demo/stacked/page\">page</a>, and <a href=\"/demo/stacked/post\">post</a>.</p>\n\n<p><img src=\"/media/stacked-laptop.png\" alt=\"\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/sidebar.html\"\n                            aria-disabled=\"false\">Sidebar style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/styles/topbar.html\"\n                            aria-disabled=\"false\">Topbar style</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/stacked.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Topbar style | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Topbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/topbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/topbar-preview.png\" />\n<meta name=\"twitter:title\" content=\"Topbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Topbar style\",\"image\":\"/media/topbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/styles/topbar.html\"},\"url\":\"/docs/styles/topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                styles\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Topbar style</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><img src=\"/media/topbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>topbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience.  It features</p>\n\n<ul>\n  <li>A fixed top navigation bar</li>\n  <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n  <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">topbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>topbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of a topbar as a <a href=\"/demo/topbar\">home</a>, <a href=\"/demo/topbar/page\">page</a>, and <a href=\"/demo/topbar/post\">post</a>.</p>\n\n<p><img src=\"/media/topbar-tablet.png\" alt=\"\" /></p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/stacked.html\"\n                            aria-disabled=\"false\">Stacked style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/page.html\"\n                            aria-disabled=\"false\">Page Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/styles/topbar.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Page Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Page Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The page layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The page layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Page Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The page layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.\",\"headline\":\"Page Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/page.html\"},\"url\":\"/docs/layouts/page.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Page Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>page</strong> layout is the simplest content layout in the theme. It wraps your content in the standard site chrome and optionally shows a title and subtype label.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Page layout in your Jekyll site, create a page with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">page</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">About</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">page</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>None</td>\n      <td>Page title shown above the content</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">subtype</code></td>\n      <td>None</td>\n      <td>Small label shown above the title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tag</code></td>\n      <td>None</td>\n      <td>Used as a fallback title in tag-based pages</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Renders the page inside the default theme layout.</li>\n  <li>Shows a title when <code class=\"language-plaintext highlighter-rouge\">title</code> is present.</li>\n  <li>Shows a subtype label above the title when <code class=\"language-plaintext highlighter-rouge\">subtype</code> is present.</li>\n  <li>Falls back to <code class=\"language-plaintext highlighter-rouge\">page.tag</code> as the title in tag-oriented pages.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">page</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">About this site</span>\n<span class=\"na\">subtype</span><span class=\"pi\">:</span> <span class=\"s\">Guide</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/topbar/page\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>This is a good default layout for standalone markdown pages.</li>\n  <li>If you need repository cards, post timelines, or profile content, use a more specific layout instead.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/styles/topbar.html\"\n                            aria-disabled=\"false\">Topbar style</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/home.html\"\n                            aria-disabled=\"false\">Home Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/page.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Home Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Home Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The home layout is the same thing as the profile layout.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The home layout is the same thing as the profile layout.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Home Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The home layout is the same thing as the profile layout.\",\"headline\":\"Home Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/home.html\"},\"url\":\"/docs/layouts/home.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Home Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>home</strong> layout is the same thing as the <code class=\"language-plaintext highlighter-rouge\">profile</code> layout.</p>\n\n<p>See <a href=\"/docs/layouts/profile.html\">profile</a> for details and options.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/page.html\"\n                            aria-disabled=\"false\">Page Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/profile.html\"\n                            aria-disabled=\"false\">Profile Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/home.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Profile Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Profile Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Profile Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.\",\"headline\":\"Profile Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/profile.html\"},\"url\":\"/docs/layouts/profile.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Profile Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>profile</strong> layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a profile image, bio, social links, blog posts, and repositories.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Profile layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Profile layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">profile</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.style</code></td>\n      <td>Layout style (<code class=\"language-plaintext highlighter-rouge\">topbar</code>, <code class=\"language-plaintext highlighter-rouge\">appbar</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, or <code class=\"language-plaintext highlighter-rouge\">stacked</code>)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">user_image</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.user_image</code> or <code class=\"language-plaintext highlighter-rouge\">site.github.owner.avatar_url</code></td>\n      <td>Site-wide profile image configured in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.links</code></td>\n      <td>An array of link card objects</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.posts</code></td>\n      <td>Posts to display in the blog section</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n      <td>Number of posts to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td>The text to display for the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n      <td>The URL the link should point to</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n      <td>A custom image for the link (optional)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n      <td>An Octicon name to display instead of a thumbnail (optional)</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Displays a profile section with an image and name.</li>\n  <li>Includes social/profile links if provided.</li>\n  <li>Shows a timeline of blog posts from the specified posts list.</li>\n  <li>Optionally displays repositories if <code class=\"language-plaintext highlighter-rouge\">site.repositories</code> is enabled.</li>\n  <li>Supports different layout styles (<code class=\"language-plaintext highlighter-rouge\">topbar</code>, <code class=\"language-plaintext highlighter-rouge\">appbar</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, and <code class=\"language-plaintext highlighter-rouge\">stacked</code>).</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Profile page with user information and links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">GitHub</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/username</span>\n    <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Twitter</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://twitter.com/username</span>\n    <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mention</span>\n<span class=\"na\">posts</span><span class=\"pi\">:</span> <span class=\"s\">site.posts</span>\n<span class=\"na\">posts_limit</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/profile\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure all image URLs are correct and accessible.</li>\n  <li>Set <code class=\"language-plaintext highlighter-rouge\">user_image</code> in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> if you want to override the default GitHub profile avatar.</li>\n  <li>Octicons can be used for simple link icons, or you can provide <code class=\"language-plaintext highlighter-rouge\">thumbnail</code> images instead.</li>\n  <li>The layout is responsive and should work well across different screen sizes.</li>\n  <li>Custom styling can be added using additional CSS overrides in your theme.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for rendering the profile header.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for displaying social links.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> include for listing blog posts.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include for rendering repositories.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Profile layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/home.html\"\n                            aria-disabled=\"false\">Home Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/linktree.html\"\n                            aria-disabled=\"false\">Linktree Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/profile.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Linktree Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Linktree Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Linktree Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\",\"headline\":\"Linktree Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/linktree.html\"},\"url\":\"/docs/layouts/linktree.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Linktree Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>linktree</strong> layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Linktree layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Linktree layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">linktree</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">[]</code></td>\n      <td>An array of link objects to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">background.image</code></td>\n      <td>None</td>\n      <td>Background image URL for the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>None</td>\n      <td>Title to display at the top of the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">css_style</code></td>\n      <td>None</td>\n      <td>Custom CSS to apply to the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">socials</code></td>\n      <td>None</td>\n      <td>Optional social link placement: <code class=\"language-plaintext highlighter-rouge\">top</code> or <code class=\"language-plaintext highlighter-rouge\">bottom</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td>The text to display for the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n      <td>The URL the link should point to</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n      <td>URL of an image to use as the link’s icon (optional)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n      <td>Name of an Octicon to use as the link’s icon (optional)</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"examples\">Examples</h2>\n\n<p>This example shows a basic Linktree page with various links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">My website</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://www.primerpages.com</span>\n    <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/user-image.jpg</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">My repositories</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/demo/repositories</span>\n    <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/repositories.png</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/linktree\" class=\"btn\">Live demo</a></p>\n\n<p>The following example demonstrates how to customize the Linktree layout with a background image and custom CSS:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://www.allisonthackston.com/assets/img/cover-1920.jpg</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Linktree</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n    <span class=\"s\">.Link-btn {</span>\n        <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">h1 {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">.octicon {</span>\n        <span class=\"s\">fill: black;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">a {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">a:hover {</span>\n        <span class=\"s\">text-decoration: none;</span>\n        <span class=\"s\">color: var(--color-fg-default);</span>\n    <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/linktree-custom\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure all image URLs are correct and accessible.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> property requires the Octicons library to be included in your theme.</li>\n  <li>Custom CSS can override the theme’s default styles, so use it carefully.</li>\n  <li>Background images follow the same <code class=\"language-plaintext highlighter-rouge\">background.image</code> configuration pattern used elsewhere in the theme.</li>\n  <li>The layout is responsive and should work well on various screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include for rendering individual links.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for the theme toggle functionality.</li>\n  <li>Octicons for icon display.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Linktree layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/profile.html\"\n                            aria-disabled=\"false\">Profile Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/post.html\"\n                            aria-disabled=\"false\">Post Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/linktree.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#examples\">Examples</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The post layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The post layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.\",\"headline\":\"Post Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/post.html\"},\"url\":\"/docs/layouts/post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>post</strong> layout is designed for full blog posts. It renders a large hero image, post metadata, optional embedded video, tag links, an optional table of contents, and related posts.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Post layout in your Jekyll site, create a post with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Post</span>\n<span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">A short summary of the post</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Post layout accepts these commonly used parameters in front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">post</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>Required</td>\n      <td>Post title shown in the hero section</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n      <td>None</td>\n      <td>Short summary shown below the title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">image</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.image</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/img/default.png</code></td>\n      <td>Hero image for the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">author</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.github.owner.name</code> or login</td>\n      <td>Display name in post metadata</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">date</code></td>\n      <td>Filename date</td>\n      <td>Publication date shown in the header</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">video</code></td>\n      <td>None</td>\n      <td>Optional embed URL rendered above the content</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">toc</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">false</code> unless set</td>\n      <td>Shows a table of contents when headings are present</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n      <td>None</td>\n      <td>Tag list rendered below the content when tag pages are enabled</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">related_by</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.related_by</code></td>\n      <td>Controls related-post matching</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">related_limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.related_limit</code> or <code class=\"language-plaintext highlighter-rouge\">3</code></td>\n      <td>Maximum number of related posts</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">related_template</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">post-card.html</code></td>\n      <td>Include used to render related posts</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Renders a full-width post header with title, description, and image.</li>\n  <li>Shows author and publication date metadata.</li>\n  <li>Adds sharing links for X, Facebook, and LinkedIn.</li>\n  <li>Supports optional embedded video content through <code class=\"language-plaintext highlighter-rouge\">page.video</code>.</li>\n  <li>Links tags to generated tag pages when <code class=\"language-plaintext highlighter-rouge\">site.tag_page_dir</code> is configured.</li>\n  <li>Shows a table of contents when <code class=\"language-plaintext highlighter-rouge\">toc: true</code> and the content contains headings.</li>\n  <li>Includes the related-posts section at the bottom of the page.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Building a theme site</span>\n<span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">Notes from setting up a theme-based Jekyll project</span>\n<span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/cover.jpg</span>\n<span class=\"na\">author</span><span class=\"pi\">:</span> <span class=\"s\">Primer Pages</span>\n<span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"na\">tags</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"nv\">jekyll</span><span class=\"pi\">,</span> <span class=\"nv\">theme</span><span class=\"pi\">]</span>\n<span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/topbar/post\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Tag links are generated only when tag pages are configured.</li>\n  <li>The related-post section can be tuned with the settings documented in <a href=\"/docs/configuration.html#related\">Theme configuration</a>.</li>\n  <li>The table of contents appears only when <code class=\"language-plaintext highlighter-rouge\">toc</code> is enabled and the post has headings.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/linktree.html\"\n                            aria-disabled=\"false\">Linktree Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/docs.html\"\n                            aria-disabled=\"false\">Docs Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/post.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Docs Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Docs Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Docs Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\",\"headline\":\"Docs Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/docs.html\"},\"url\":\"/docs/layouts/docs.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Docs Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>docs</strong> layout is ideal for documentation pages and follows the document style on <a href=\"https://docs.github.com\">GitHub Docs</a>.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Docs layout in your Jekyll site, create a new file in your <code class=\"language-plaintext highlighter-rouge\">_docs</code> collection with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Your Documentation Title</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">docs</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">collections</span><span class=\"pi\">:</span>\n  <span class=\"na\">docs</span><span class=\"pi\">:</span>\n    <span class=\"na\">output</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n    <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">order</span>\n<span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n      <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n      <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/docs/:path</span>\n      <span class=\"na\">show_edit_url</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n      <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<p>By default, the theme builds the edit link from <code class=\"language-plaintext highlighter-rouge\">site.repository</code> and points to the current document path on the <code class=\"language-plaintext highlighter-rouge\">main</code> branch.</p>\n\n<p>If you need a different repository, branch, or base path, you can override it:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">edit_url</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">https://github.com/{user}/{repo}/edit/{branch}\"</span>\n</code></pre></div></div>\n\n<p>You can hide the edit link entirely:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n      <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span>\n      <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n    <span class=\"na\">values</span><span class=\"pi\">:</span>\n      <span class=\"na\">show_edit_url</span><span class=\"pi\">:</span> <span class=\"kc\">false</span>\n</code></pre></div></div>\n\n<h2 id=\"features\">Features</h2>\n\n<ul>\n  <li>Automatically generates a table of contents (<code class=\"language-plaintext highlighter-rouge\">toc: true</code>)</li>\n  <li>Uses a default image for social sharing</li>\n  <li>Sorts documentation pages by the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter</li>\n  <li>Adds an “Edit this page” link by default when the theme can build one from <code class=\"language-plaintext highlighter-rouge\">site.repository</code></li>\n  <li>Lets you disable the edit link with <code class=\"language-plaintext highlighter-rouge\">show_edit_url: false</code></li>\n  <li>Lets you override the generated GitHub edit link base with <code class=\"language-plaintext highlighter-rouge\">edit_url</code> when needed</li>\n</ul>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/custom-background-docs\" class=\"btn\">Live demo</a></p>\n\n<p><a href=\"/docs/index.html\" class=\"btn\">Docs section</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure your documentation files are placed in the <code class=\"language-plaintext highlighter-rouge\">_docs</code> folder</li>\n  <li>Use the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter to control the sorting of your documentation pages</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">toc</code> option automatically generates a table of contents for each page</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">show_edit_url</code> can be set globally or per page</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">edit_url</code> is optional and only needed when the generated GitHub edit link is not the right target</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/post.html\"\n                            aria-disabled=\"false\">Post Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/landing.html\"\n                            aria-disabled=\"false\">Landing layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/docs.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#features\">Features</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Landing layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Landing layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Landing layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\",\"headline\":\"Landing layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/landing.html\"},\"url\":\"/docs/layouts/landing.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Landing layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>landing</strong> layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Landing layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Landing layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">landing</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">none</code></td>\n      <td>Layout style customization (optional)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">repo_info</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.repo_info</code></td>\n      <td>Shows repository information when enabled</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">nav</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.nav</code></td>\n      <td>Navigation items to render on the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">social_media</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.social_media</code></td>\n      <td>Social media configuration used to render social profile links</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Displays a masthead for branding and introduction.</li>\n  <li>Optionally includes a repository information card.</li>\n  <li>Shows navigation links when navigation items are available.</li>\n  <li>Includes a section for social media links.</li>\n  <li>Provides a customizable structure for content placement.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Landing page setup:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">none</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p>To override the site navigation for just this page, pass a custom list of links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Docs</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/docs/</span>\n  <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Blog</span>\n    <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog/</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/landing\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">nav</code> is not defined at the page or site level, the landing page simply renders without navigation.</li>\n  <li>Set <code class=\"language-plaintext highlighter-rouge\">nav</code> to a list of links when you want to override <code class=\"language-plaintext highlighter-rouge\">site.nav</code> for a single page.</li>\n  <li>Ensure <code class=\"language-plaintext highlighter-rouge\">repo_info</code> and <code class=\"language-plaintext highlighter-rouge\">social_media</code> are configured in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> if needed.</li>\n  <li>Custom styles can be applied by modifying the theme’s CSS.</li>\n  <li>The layout is responsive and should work well on all screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for branding.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for theme switching.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">mini-repo-info-card.html</code> include for repository info.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">nav.html</code> include for navigation.</li>\n  <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for social media links.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Landing layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/docs.html\"\n                            aria-disabled=\"false\">Docs Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/paginate_timeline.html\"\n                            aria-disabled=\"false\">Paginate Timeline...</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/landing.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Paginate Timeline Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginate Timeline Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Paginate Timeline Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\",\"headline\":\"Paginate Timeline Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/paginate_timeline.html\"},\"url\":\"/docs/layouts/paginate_timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Paginate Timeline Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>paginate_timeline</strong> layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting <a href=\"/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Paginate Timeline layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p>Jekyll’s pagination feature must be enabled in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>. For example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>\n</code></pre></div></div>\n\n<p>This config will split your post list into chunks of five items per page.</p>\n\n<p>The paginate layout must be used in the index page at the start of this path. For the example above, that would be <code class=\"language-plaintext highlighter-rouge\">/blog/index.html</code>.</p>\n\n<div class=\"markdown-alert markdown-alert-note\"><p class=\"markdown-alert-title\"><svg class=\"octicon octicon-info\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path></svg> Note</p><p>The path should be <em>absolute</em> and start with a <code class=\"language-plaintext highlighter-rouge\">/</code>, otherwise the index links will not work correctly.</p>\n</div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Paginate Timeline layout supports the following:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td>None</td>\n      <td>The heading to display on the timeline page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n      <td>None</td>\n      <td>You can write page content below the front matter. It will appear above the timeline.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.pagination.permalink</code> or <code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n      <td>Path structure for pagination pages (for example, <code class=\"language-plaintext highlighter-rouge\">/blog/page/:num</code>)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n      <td>Number of posts to display per page, if desired. Can also be overridden in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li><strong>Page Content</strong>: The layout renders any Markdown or HTML in <code class=\"language-plaintext highlighter-rouge\">{{ content }}</code> before displaying the timeline.</li>\n  <li><strong>Post Timeline</strong>: It includes the <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> partial, which loops through the specified collection (typically <code class=\"language-plaintext highlighter-rouge\">paginator.posts</code>) and renders each post.</li>\n  <li><strong>Pagination Links</strong>: At the bottom of the page, you’ll find controls for navigating to previous and next pages, as well as direct links to individual pages.</li>\n  <li><strong>Custom Index Path</strong>: The layout attempts to resolve <code class=\"language-plaintext highlighter-rouge\">paginator.first_page_path</code> or a fallback URL for linking back to the main blog index.</li>\n  <li><strong>Site-Level Configuration</strong>: The layout relies on your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> settings (<code class=\"language-plaintext highlighter-rouge\">paginate</code>, <code class=\"language-plaintext highlighter-rouge\">paginate_path</code>, etc.) to define pagination behavior.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>Below is a minimal usage example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my blog! Below is a list of the latest posts. Use the pagination buttons to navigate.</span>\n</code></pre></div></div>\n\n<p><code class=\"language-plaintext highlighter-rouge\">_config.yml</code></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>\n</code></pre></div></div>\n\n<p>With this configuration:</p>\n<ol>\n  <li>Each page shows 5 posts.</li>\n  <li>Pagination paths follow the pattern <code class=\"language-plaintext highlighter-rouge\">/blog/page/2</code>, <code class=\"language-plaintext highlighter-rouge\">/blog/page/3</code>, and so on.</li>\n</ol>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li><strong>Jekyll Pagination Plugin</strong>: Ensure you have the <a href=\"/docs/plugins/pagination.html\">jekyll-paginate</a> plugin configured (depending on your Jekyll version).</li>\n  <li><strong>Page vs. Post</strong>: Paginated content is typically drawn from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>, but you can specify a different collection if desired.</li>\n  <li><strong>Responsive</strong>: The layout is designed to adapt to mobile, tablet, and desktop screens.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<ol>\n  <li><a href=\"/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> (included): Used to render the collection of posts.</li>\n  <li><a href=\"/docs/includes/post-timeline-card.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code></a> (included): Used to render each post.</li>\n  <li><a href=\"/docs/plugins/pagination.html\">pagination</a>: Make sure your Jekyll site is set up for pagination, or the layout’s pagination features will not work.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Paginate Timeline layout to function correctly.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/landing.html\"\n                            aria-disabled=\"false\">Landing layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/repositories.html\"\n                            aria-disabled=\"false\">Repositories Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/paginate_timeline.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Repositories Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Repositories Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Repositories Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\",\"headline\":\"Repositories Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/repositories.html\"},\"url\":\"/docs/layouts/repositories.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Repositories Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>repositories</strong> layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Repositories layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Repositories layout accepts several parameters in the front matter:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">repositories</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">Repositories</code></td>\n      <td>The title displayed on the page</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n      <td>Optional</td>\n      <td>Additional text or descriptions displayed before the repositories</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Displays a title for the repositories page.</li>\n  <li>Optionally includes descriptive content before the repository list.</li>\n  <li>Dynamically loads and displays repositories using the <code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include.</li>\n  <li>Supports Jekyll’s standard content management for additional customization.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Repositories page with a custom title and description:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Projects</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my open-source projects repository page. Here you can find all my latest projects.</span>\n</code></pre></div></div>\n\n<p><a href=\"/demo/repositories\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">repositories</code> is <a href=\"/docs/configuration.html#repositories-optional\">configured</a> in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</li>\n  <li>You may need to include the <code class=\"language-plaintext highlighter-rouge\">jekyll-github-metadata</code> plugin in your Gemfile and/or included in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.\n  ```\n  plugins:\n    <ul>\n      <li>jekyll-github-metadata\n  ```</li>\n    </ul>\n  </li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/paginate_timeline.html\"\n                            aria-disabled=\"false\">Paginate Timeline...</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/paginate.html\"\n                            aria-disabled=\"false\">Paginate Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/repositories.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Paginate Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginate Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The paginate layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The paginate layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Paginate Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The paginate layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.\",\"headline\":\"Paginate Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/paginate.html\"},\"url\":\"/docs/layouts/paginate.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Paginate Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>paginate</strong> layout displays paginated posts as cards. It is useful for a traditional blog index where featured posts and standard post cards are shown in a grid.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Paginate layout, create an index page for your blog:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Blog</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>Enable Jekyll pagination in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>\n</code></pre></div></div>\n\n<p>For the example above, the page using <code class=\"language-plaintext highlighter-rouge\">layout: paginate</code> should live at <code class=\"language-plaintext highlighter-rouge\">blog/index.html</code>.</p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Renders the page content before the list of posts.</li>\n  <li>Iterates through <code class=\"language-plaintext highlighter-rouge\">paginator.posts</code>.</li>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">post-feature-card.html</code> for featured posts and the first post in the collection.</li>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">post-card.html</code> for the remaining posts.</li>\n  <li>Adds pagination controls with <code class=\"language-plaintext highlighter-rouge\">paginator_nav.html</code>.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Blog</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Latest posts from the site.</span>\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/blog/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Use <a href=\"/docs/layouts/paginate_timeline.html\">Paginate Timeline</a> if you prefer the timeline-style list instead of cards.</li>\n  <li>This layout depends on Jekyll pagination being enabled.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/repositories.html\"\n                            aria-disabled=\"false\">Repositories Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/tag_index.html\"\n                            aria-disabled=\"false\">Tag Index Layout</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/paginate.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Tag Index Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Tag Index Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The tag_index layout renders an index of tags and their associated posts. It works with jekyll-tagging or other tag-page generation approaches that provide tag collections and permalinks.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The tag_index layout renders an index of tags and their associated posts. It works with jekyll-tagging or other tag-page generation approaches that provide tag collections and permalinks.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Tag Index Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The tag_index layout renders an index of tags and their associated posts. It works with jekyll-tagging or other tag-page generation approaches that provide tag collections and permalinks.\",\"headline\":\"Tag Index Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/tag_index.html\"},\"url\":\"/docs/layouts/tag_index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Tag Index Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>tag_index</strong> layout renders an index of tags and their associated posts. It works with <code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> or other tag-page generation approaches that provide tag collections and permalinks.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>Create a tag index page like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">tag_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Tags</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">tag_index</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">Tags</code></td>\n      <td>Page title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.tags</code></td>\n      <td>Tag collection to render</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">tag_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.tag_page_dir</code></td>\n      <td>Base path used to build tag links</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.autopages.tags.permalink</code> or generated from <code class=\"language-plaintext highlighter-rouge\">tag_path</code></td>\n      <td>Tag page permalink pattern</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts shown per tag section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">site.tags</code> by default.</li>\n  <li>Builds tag permalinks from <code class=\"language-plaintext highlighter-rouge\">tag_path</code> or <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code>.</li>\n  <li>Renders grouped tag sections using <code class=\"language-plaintext highlighter-rouge\">post-index.html</code>.</li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/tags/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>This layout complements the setup described in <a href=\"/docs/plugins/tagging.html\">Tagging</a>.</li>\n  <li>If you want more control over tag permalinks, set <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code> explicitly.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/paginate.html\"\n                            aria-disabled=\"false\">Paginate Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/layouts/category_index.html\"\n                            aria-disabled=\"false\">Category Index La...</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/tag_index.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Category Index Layout | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Category Index Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The category_index layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from site.categories.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The category_index layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from site.categories.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Category Index Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The category_index layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from site.categories.\",\"headline\":\"Category Index Layout\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/layouts/category_index.html\"},\"url\":\"/docs/layouts/category_index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                layouts\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Category Index Layout</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>category_index</strong> layout renders an index of categories and their posts. It is designed to work with generated category pages or a category collection built from <code class=\"language-plaintext highlighter-rouge\">site.categories</code>.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>Create a category index page like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">category_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Categories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n      <td>Required</td>\n      <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">category_index</code></td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">Category</code></td>\n      <td>Page title</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">categories</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.categories</code></td>\n      <td>Category collection to render</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">category_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.category_path</code></td>\n      <td>Base path used to build category links</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.autopages.categories.permalink</code> or generated from <code class=\"language-plaintext highlighter-rouge\">category_path</code></td>\n      <td>Category page permalink pattern</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts shown per category section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>Uses <code class=\"language-plaintext highlighter-rouge\">site.categories</code> by default.</li>\n  <li>Builds category permalinks from <code class=\"language-plaintext highlighter-rouge\">category_path</code> or <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code>.</li>\n  <li>Renders grouped category sections using <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code>.</li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/category/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>This layout complements the setup described in <a href=\"/docs/plugins/category-pages.html\">Category pages</a>.</li>\n  <li>If you want more control over category permalinks, set <code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code> explicitly.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/tag_index.html\"\n                            aria-disabled=\"false\">Tag Index Layout</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/pagination.html\"\n                            aria-disabled=\"false\">Pagination</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/layouts/category_index.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Pagination | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Pagination\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Pagination\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Pagination\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Pagination\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Pagination\",\"headline\":\"Pagination\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/pagination.html\"},\"url\":\"/docs/plugins/pagination.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Pagination</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <h1 id=\"pagination\">Pagination</h1>\n\n<p><code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> is a Jekyll plugin that adds pagination functionality to your site, allowing posts to be split across multiple pages instead of displaying everything on a single page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>\n    <p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n    <div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">group</span> <span class=\"ss\">:jekyll_plugins</span> <span class=\"k\">do</span>\n  <span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-paginate\"</span>\n<span class=\"k\">end</span>\n</code></pre></div>    </div>\n\n    <p>Then, install the plugin:</p>\n\n    <div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div>    </div>\n  </li>\n  <li>\n    <p>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file:</p>\n\n    <div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-paginate settings</span>\n<span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>  <span class=\"c1\"># Number of posts per page</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page/:num\"</span>  <span class=\"c1\"># URL structure for paginated pages</span>\n</code></pre></div>    </div>\n  </li>\n  <li>\n    <p>(Optional) Add an index page at <code class=\"language-plaintext highlighter-rouge\">blog/index.html</code></p>\n\n    <div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code> ---\n title: My Blog\n layout: paginate\n ---\n</code></pre></div>    </div>\n\n    <p>Use <code class=\"language-plaintext highlighter-rouge\">layout: paginate_timeline</code> if you want the timeline-style listing instead of the card grid layout.</p>\n  </li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/blog/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://jekyllrb.com/docs/pagination/\">Jekyll Pagination Documentation</a></li>\n  <li><a href=\"https://github.com/jekyll/jekyll-paginate\">jekyll-paginate Repository</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/layouts/category_index.html\"\n                            aria-disabled=\"false\">Category Index La...</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/tagging.html\"\n                            aria-disabled=\"false\">Tagging</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/pagination.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#pagination\">Pagination</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n</li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Tagging | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Tagging\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Tagging\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\",\"headline\":\"Tagging\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/tagging.html\"},\"url\":\"/docs/plugins/tagging.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Tagging</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> is a plugin that enables better tag support in Jekyll sites.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>Add the following line to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-tagging\"</span>\n</code></pre></div></div>\n\n<ol>\n  <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">tag_page_layout</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n<span class=\"na\">tag_page_dir</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n</code></pre></div></div>\n\n<ol>\n  <li>(Optional) Add a tag index page at <code class=\"language-plaintext highlighter-rouge\">tags/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Tags\nlayout: tag_index\n---\n</code></pre></div></div>\n\n<ol>\n  <li>Add tags to your posts</li>\n</ol>\n\n<p>To assign tags to a post, include them in the front matter:</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ntags: [jekyll, tutorial, plugins]\n---\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/tags/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://jekyllrb.com/docs/posts/#tags\">Jekyll tags</a></li>\n  <li><a href=\"https://github.com/pattex/jekyll-tagging\">jekyll-tagging repository</a></li>\n  <li><a href=\"/docs/posts.html#tags-and-categories\">Posts documentation</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/pagination.html\"\n                            aria-disabled=\"false\">Pagination</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/category-pages.html\"\n                            aria-disabled=\"false\">Category pages</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/tagging.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Category pages | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Category pages\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Category pages\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\",\"headline\":\"Category pages\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/category-pages.html\"},\"url\":\"/docs/plugins/category-pages.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Category pages</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">group</span> <span class=\"ss\">:jekyll_plugins</span> <span class=\"k\">do</span>\n  <span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-category-pages\"</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<p>Then install it:</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div></div>\n\n<ol>\n  <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-category-pages settings</span>\n<span class=\"na\">category_path</span><span class=\"pi\">:</span> <span class=\"s\">category</span>\n<span class=\"na\">category_layout</span><span class=\"pi\">:</span> <span class=\"s\">category_layout.html</span>\n</code></pre></div></div>\n\n<ol>\n  <li>(Optional) Add a category index page at <code class=\"language-plaintext highlighter-rouge\">category/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Category\nlayout: category_index\n---\n</code></pre></div></div>\n\n<ol>\n  <li>Add a category to your post</li>\n</ol>\n\n<p>To assign a category to a post, include it in the front matter:</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ncategory: sample\n---\n</code></pre></div></div>\n\n<p>Or place the post within a directory.  The directory names will be automatically registered as categories for the post.</p>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/category/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://jekyllrb.com/docs/posts/#categories\">Jekyll categories</a></li>\n  <li><a href=\"https://github.com/field-theory/jekyll-category-pages\">jekyll-category-pages repository</a></li>\n  <li><a href=\"/docs/posts.html#categories\">Posts</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/tagging.html\"\n                            aria-disabled=\"false\">Tagging</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/plugins/mermaid.html\"\n                            aria-disabled=\"false\">Mermaid</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/category-pages.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Mermaid | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Mermaid\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Mermaid\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.\",\"headline\":\"Mermaid\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/plugins/mermaid.html\"},\"url\":\"/docs/plugins/mermaid.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                plugins\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Mermaid</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p><code class=\"language-plaintext highlighter-rouge\">Mermaid</code> lets you write diagrams directly in Markdown using fenced code blocks. The theme detects <code class=\"language-plaintext highlighter-rouge\">mermaid</code> code fences automatically and renders them as diagrams on the page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n  <li>Add a Mermaid code fence to any page, post, or docs document:</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>```mermaid\ngraph TD\n  A[Write Markdown] --&gt; B[Render Diagram]\n  B --&gt; C[Ship Docs]\n```\n</code></pre></div></div>\n\n<ol>\n  <li>Build or serve the site as usual.</li>\n</ol>\n\n<p>The theme will:</p>\n\n<ul>\n  <li>transform <code class=\"language-plaintext highlighter-rouge\">language-mermaid</code> code blocks into Mermaid containers</li>\n  <li>render them on page load</li>\n  <li>re-render them when the selected light, dark, or auto color mode changes</li>\n</ul>\n\n<h2 id=\"example\">Example</h2>\n\n<pre><code class=\"language-mermaid\">graph TD\n  A[Write Markdown] --&gt; B[Render Diagram]\n  B --&gt; C[Ship Docs]\n</code></pre>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/demo/mermaid/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n  <li><a href=\"https://mermaid.js.org/intro/\">Mermaid documentation</a></li>\n  <li><a href=\"https://www.markdownguide.org/extended-syntax/#fenced-code-blocks\">Markdown code fences</a></li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/category-pages.html\"\n                            aria-disabled=\"false\">Category pages</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/collection-menu.html\"\n                            aria-disabled=\"false\">Collection Menu</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/plugins/mermaid.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example\">Example</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Collection Menu | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Collection Menu\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Collection Menu\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\",\"headline\":\"Collection Menu\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/collection-menu.html\"},\"url\":\"/docs/includes/collection-menu.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Collection Menu</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>Collection Menu</strong> include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their <code class=\"language-plaintext highlighter-rouge\">category</code> field. It is particularly useful for displaying structured documentation, guides, or other content collections.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">docs_index</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">where_exp</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"item\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"s2\">\"item.url == '/docs/index.html'\"</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">first</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Documentation\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">docs_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"docs-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n      <td>Required</td>\n      <td>The Jekyll collection to display in the menu.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">index.title</code> or <code class=\"language-plaintext highlighter-rouge\">\"Collection\"</code></td>\n      <td>Display name for the collection in the menu header.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n      <td>None</td>\n      <td>Optional collection index document, used as the main link in the menu header.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">id</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">collection-menu</code></td>\n      <td>HTML <code class=\"language-plaintext highlighter-rouge\">id</code> attribute for the <code class=\"language-plaintext highlighter-rouge\">&lt;details&gt;</code> element; useful for multiple instances.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"example\">Example</h2>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">tutorials_index</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">where_exp</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"item\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"s2\">\"item.url == '/tutorials/index.html'\"</span><span class=\"w\"> </span><span class=\"p\">|</span><span class=\"w\"> </span><span class=\"nf\">first</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Tutorials\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">tutorials_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"tutorials-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li><strong>Dropdown Menu:</strong>\n    <ul>\n      <li>Uses Primer CSS’s <code class=\"language-plaintext highlighter-rouge\">details-overlay</code> pattern to create a dropdown.</li>\n      <li>Clicking the burger icon opens the menu; clicking outside or pressing the close button closes it.</li>\n    </ul>\n  </li>\n  <li><strong>Collection Items Grouped by Category:</strong>\n    <ul>\n      <li>The menu groups collection documents by their <code class=\"language-plaintext highlighter-rouge\">category</code> front matter field.</li>\n      <li>Each category is displayed as a section header.</li>\n    </ul>\n  </li>\n  <li><strong>Current Page Highlighting:</strong>\n    <ul>\n      <li>The current page is marked with <code class=\"language-plaintext highlighter-rouge\">aria-current=\"page\"</code> when its URL matches the menu item.</li>\n    </ul>\n  </li>\n  <li><strong>Optional Index Link:</strong>\n    <ul>\n      <li>If <code class=\"language-plaintext highlighter-rouge\">index</code> is provided, the collection name in the header becomes a link to the index page.</li>\n      <li>If <code class=\"language-plaintext highlighter-rouge\">name</code> is not provided, the include falls back to <code class=\"language-plaintext highlighter-rouge\">index.title</code> or <code class=\"language-plaintext highlighter-rouge\">\"Collection\"</code>.</li>\n    </ul>\n  </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n  <li><strong>Primer CSS:</strong> Classes like <code class=\"language-plaintext highlighter-rouge\">details-overlay</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, <code class=\"language-plaintext highlighter-rouge\">SideNav</code> are part of Primer’s styling system.</li>\n  <li><strong>Octicons:</strong> For the close button icon.</li>\n  <li><strong>jQuery:</strong> Required for the custom close button behavior.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<ol>\n  <li><strong>Change Menu Appearance:</strong>\n    <ul>\n      <li>Adjust Primer CSS classes like <code class=\"language-plaintext highlighter-rouge\">SideNav</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, or <code class=\"language-plaintext highlighter-rouge\">AppHeader-link</code>.</li>\n    </ul>\n  </li>\n  <li><strong>Adjust Categories:</strong>\n    <ul>\n      <li>Ensure your collection items have a <code class=\"language-plaintext highlighter-rouge\">category</code> field in their front matter for grouping.</li>\n    </ul>\n  </li>\n  <li><strong>Modify Close Behavior:</strong>\n    <ul>\n      <li>The script attached to the close button can be adapted or replaced with custom behavior if needed.</li>\n    </ul>\n  </li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">collection</code> parameter should be passed explicitly when using this include.</li>\n  <li>Pass <code class=\"language-plaintext highlighter-rouge\">index</code> as a document object, not a string path.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">id</code> parameter allows multiple instances of this menu to coexist on a page without conflicts.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">aria-haspopup</code> and <code class=\"language-plaintext highlighter-rouge\">aria-current</code> attributes enhance accessibility for the dropdown menu and navigation links.</li>\n  <li>Ensure your site includes <strong>Primer CSS</strong> and <strong>jQuery</strong> for proper styling and behavior.</li>\n</ul>\n\n<p>By integrating <code class=\"language-plaintext highlighter-rouge\">collection-menu.html</code>, you can create a well-structured and accessible collection menu that enhances site navigation.</p>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/plugins/mermaid.html\"\n                            aria-disabled=\"false\">Mermaid</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/link-card.html\"\n                            aria-disabled=\"false\">Link Card</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/collection-menu.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example\">Example</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Link Card | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Link Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Link Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\",\"headline\":\"Link Card\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/link-card.html\"},\"url\":\"/docs/includes/link-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Link Card</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">link_object</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing a <code class=\"language-plaintext highlighter-rouge\">link</code> object with the following properties:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Required</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n      <td>Yes</td>\n      <td>The name or title of the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n      <td>No</td>\n      <td>The URL for the link. If not provided, the card will be displayed as text-only</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n      <td>No</td>\n      <td>The path to an image to be used as a thumbnail</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n      <td>No</td>\n      <td>A brief description of the link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n      <td>No</td>\n      <td>An Octicon name to display instead of a thumbnail</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">featured_link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include checks if a URL is provided for the link.</li>\n  <li>If a URL is present:\n    <ul>\n      <li>It creates a clickable card with hover effects.</li>\n      <li>Displays a thumbnail image or Octicon if provided.</li>\n      <li>Shows the link name and description (if available).</li>\n    </ul>\n  </li>\n  <li>If no URL is present:\n    <ul>\n      <li>It creates a non-clickable text card.</li>\n      <li>Displays a thumbnail image if provided.</li>\n      <li>Shows the link name and description (if available).</li>\n    </ul>\n  </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file may depend on:</p>\n\n<ol>\n  <li>Octicons: The GitHub icon set, used if an <code class=\"language-plaintext highlighter-rouge\">octicon</code> property is specified.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The include uses Liquid tags and filters, such as <code class=\"language-plaintext highlighter-rouge\">relative_url</code>, to ensure correct URL generation.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> functionality assumes you have the Octicons library or a similar icon system set up in your theme.</li>\n  <li>The include uses responsive design principles with flexbox for layout.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/collection-menu.html\"\n                            aria-disabled=\"false\">Collection Menu</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/links.html\"\n                            aria-disabled=\"false\">Links</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/link-card.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Links | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Links\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Links\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\",\"headline\":\"Links\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/links.html\"},\"url\":\"/docs/includes/links.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Links</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a collection of link cards, typically used for displaying a set of important links on a page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>links.html<span class=\"w\"> </span><span class=\"na\">links</span><span class=\"o\">=</span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">featured_links</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include expects an explicit <code class=\"language-plaintext highlighter-rouge\">include.links</code> value:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Variable</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">include.links</code></td>\n      <td>Required</td>\n      <td>The collection of links to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include renders the provided <code class=\"language-plaintext highlighter-rouge\">include.links</code> collection.</li>\n  <li>It creates a container for the link cards.</li>\n  <li>It iterates through each link in the collection and includes a <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> for each one.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">link-card.html</code>: Another include file that defines how each link card is displayed.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the links collection:</p>\n\n<ol>\n  <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n  <li>Edit the <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include to change how individual links are displayed.</li>\n  <li>Adjust the container structure if you need a different layout for the links.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">include.links</code> is not provided, the include renders nothing.</li>\n  <li>The layout uses flexbox for responsive design, allowing the links to adapt to different screen sizes.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/link-card.html\"\n                            aria-disabled=\"false\">Link Card</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/paginator-nav.html\"\n                            aria-disabled=\"false\">Paginator Navigation</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/links.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Paginator Navigation | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginator Navigation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Paginator Navigation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\",\"headline\":\"Paginator Navigation\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/paginator-nav.html\"},\"url\":\"/docs/includes/paginator-nav.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Paginator Navigation</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>Paginator Navigation</strong> include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>You must also have <a href=\"/docs/plugins/pagination.html\"><code class=\"language-plaintext highlighter-rouge\">pagination</code></a> installed.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include can be customized by passing in the following optional parameters:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">paginate_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n      <td>Defines the pagination URL pattern (e.g., <code class=\"language-plaintext highlighter-rouge\">\"/blog/page/:num\"</code>).</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">previous_page_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">paginator.previous_page_path</code></td>\n      <td>The URL for the previous page in the pagination sequence.</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">next_page_path</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">paginator.next_page_path</code></td>\n      <td>The URL for the next page in the pagination sequence.</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>This allows it to work with <a href=\"/docs/plugins/category-pages.html\"><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code></a></p>\n\n<h3 id=\"example-usage-with-parameters\">Example Usage with Parameters</h3>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"na\">paginate_path</span><span class=\"o\">=</span><span class=\"s2\">\"/blog/page/:num\"</span><span class=\"w\"> </span><span class=\"na\">previous_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">previous_page_path</span><span class=\"w\"> </span><span class=\"na\">next_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">next_page_path</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"example-output\">Example Output</h2>\n\n<p>When used in a paginated blog, the output might look like this:</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"paginate-container\"</span><span class=\"nt\">&gt;</span>\n    <span class=\"nt\">&lt;div</span> <span class=\"na\">role=</span><span class=\"s\">\"navigation\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Pagination\"</span> <span class=\"na\">class=</span><span class=\"s\">\"d-flex d-md-inline-block pagination\"</span><span class=\"nt\">&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">class=</span><span class=\"s\">\"previous_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"prev\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">&gt;</span>Previous<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"1\"</span><span class=\"nt\">&gt;</span>1<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"2\"</span><span class=\"nt\">&gt;</span>2<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/3/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"3\"</span><span class=\"nt\">&gt;</span>3<span class=\"nt\">&lt;/a&gt;</span>\n        <span class=\"nt\">&lt;a</span> <span class=\"na\">class=</span><span class=\"s\">\"next_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"next\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">&gt;</span>Next<span class=\"nt\">&lt;/a&gt;</span>\n    <span class=\"nt\">&lt;/div&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">paginator.total_pages</code> check ensures pagination is only displayed when necessary.</li>\n  <li>The first page always links to the base URL instead of <code class=\"language-plaintext highlighter-rouge\">/page/1/</code> for cleaner URLs.</li>\n  <li>This include is meant to be used in layouts that support pagination (<code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> or <code class=\"language-plaintext highlighter-rouge\">jekyll-paginate-v2</code>).</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/links.html\"\n                            aria-disabled=\"false\">Links</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-gallery.html\"\n                            aria-disabled=\"false\">Post Gallery</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/paginator-nav.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#example-usage-with-parameters\">Example Usage with Parameters</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-output\">Example Output</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Gallery | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Gallery\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Gallery\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\",\"headline\":\"Post Gallery\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-gallery.html\"},\"url\":\"/docs/includes/post-gallery.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Gallery</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">sections</code></td>\n      <td>Required</td>\n      <td>Grouped post sections to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">section_permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.permalink</code></td>\n      <td>The permalink structure for individual sections</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n      <td>None</td>\n      <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> with the section slug</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.per_section</code> or <code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts to display per section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-gallery.html<span class=\"w\">\n    </span><span class=\"na\">sections</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n    </span><span class=\"na\">section_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n    </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n    </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">4</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>This include is component-oriented: <code class=\"language-plaintext highlighter-rouge\">sections</code> should be passed explicitly, while <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">per_section</code> can optionally fall back to page-level pagination values.</p>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> to create a page that showcases posts from various categories.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">category_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Explore Our Categories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/category/\" class=\"btn\">Category Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>For each section in the collection, the include renders a heading and an optional “View all” link.</li>\n  <li>The first post in each section is displayed using <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code>.</li>\n  <li>Subsequent posts use <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code>.</li>\n  <li>The layout alternates direction between sections for visual variety.</li>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">sections</code> is missing, the include renders nothing.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code></li>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code></li>\n  <li>Primer CSS classes</li>\n  <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code> and <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code> includes are properly set up in your Jekyll site.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">{% cycle '', 'flex-row-reverse' %}</code> tag alternates the layout direction for visual interest.</li>\n  <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/paginator-nav.html\"\n                            aria-disabled=\"false\">Paginator Navigation</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-index.html\"\n                            aria-disabled=\"false\">Post Index</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-gallery.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Index | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Index\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post-index.html include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The post-index.html include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Index\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The post-index.html include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\",\"headline\":\"Post Index\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-index.html\"},\"url\":\"/docs/includes/post-index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Index</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> include file creates a straightforward, list-style layout for displaying groups of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">sections</code></td>\n      <td>Required</td>\n      <td>Grouped post sections to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">section_permalink</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.pagination.permalink</code></td>\n      <td>The permalink structure for individual sections</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n      <td>None</td>\n      <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> with the section slug</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.per_section</code> or <code class=\"language-plaintext highlighter-rouge\">page.pagination.per_page</code></td>\n      <td>Number of posts to display per section</td>\n    </tr>\n  </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-index.html<span class=\"w\">\n    </span><span class=\"na\">sections</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n    </span><span class=\"na\">section_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n    </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n    </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">8</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>This include is component-oriented: <code class=\"language-plaintext highlighter-rouge\">sections</code> should be passed explicitly, while <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">per_section</code> can optionally fall back to page-level pagination values.</p>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> to create a page that showcases posts with various tags.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">tag_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Tags</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/tags/\" class=\"btn\">Tag Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>For each section in the collection, the include renders a heading and an optional “View all” link.</li>\n  <li>All posts within a section are displayed using <code class=\"language-plaintext highlighter-rouge\">post-card.html</code>.</li>\n  <li>Posts are arranged in a flex-wrap layout for responsive display.</li>\n  <li>The “View all” link is hidden on smaller screens and displayed on larger screens.</li>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">sections</code> is missing, the include renders nothing.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n<ul>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-card.html</code></li>\n  <li>Primer CSS classes</li>\n  <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-card.html</code> include is properly set up in your Jekyll site.</li>\n  <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">section_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-gallery.html\"\n                            aria-disabled=\"false\">Post Gallery</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-timeline-card.html\"\n                            aria-disabled=\"false\">Post Timeline Card</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-index.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Timeline Card | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Timeline Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\",\"headline\":\"Post Timeline Card\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-timeline-card.html\"},\"url\":\"/docs/includes/post-timeline-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Timeline Card</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>The <strong>Post Timeline Card</strong> include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line within a template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline-card.html<span class=\"w\"> </span><span class=\"na\">post</span><span class=\"o\">=</span><span class=\"nv\">post</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include requires a <code class=\"language-plaintext highlighter-rouge\">post</code> object to be passed, which contains various metadata fields. Below is a list of supported fields:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Required</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.url</code></td>\n      <td>✅ Yes</td>\n      <td>N/A</td>\n      <td>The permalink to the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.title</code></td>\n      <td>✅ Yes</td>\n      <td>N/A</td>\n      <td>The title of the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.author</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>The author of the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.date</code></td>\n      <td>✅ Yes</td>\n      <td>N/A</td>\n      <td>The date the post was published</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.tags</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>An array of tags associated with the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.excerpt</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>A short excerpt from the post</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.content</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>The full content of the post (used for “Continue Reading”)</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.type</code></td>\n      <td>❌ No</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">comment</code></td>\n      <td>The type of post, used for the Octicon badge</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.video</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>A URL to an embedded video</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">post.image</code></td>\n      <td>❌ No</td>\n      <td>None</td>\n      <td>A URL to a featured image</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">post-timeline</code> include, visit our demo page:</p>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Timeline Demo</a></p>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n  <li><strong>Octicons</strong>: The GitHub icon set for the badge next to the title.</li>\n  <li><strong>CSS Styles</strong>: The <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code> and <code class=\"language-plaintext highlighter-rouge\">.IssueLabel</code> classes should be styled appropriately in your theme.</li>\n  <li><strong>Jekyll Collections</strong>: The include expects a post-like object, typically from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To modify how posts are displayed:</p>\n\n<ol>\n  <li><strong>Edit the CSS</strong>: Adjust the <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code>, <code class=\"language-plaintext highlighter-rouge\">.title</code>, and <code class=\"language-plaintext highlighter-rouge\">.summary</code> styles.</li>\n  <li><strong>Modify the HTML</strong>: Change the markup within <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to match your theme.</li>\n  <li><strong>Update the Octicons</strong>: Modify the <code class=\"language-plaintext highlighter-rouge\">post.type</code> value to change the icon displayed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post</code> object is correctly passed when including this file.</li>\n  <li>If <code class=\"language-plaintext highlighter-rouge\">post.type</code> is not provided, it defaults to <code class=\"language-plaintext highlighter-rouge\">comment</code> for the Octicon.</li>\n  <li>The layout is designed to be responsive and adaptable to different screen sizes.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for post links to ensure compatibility with different site configurations.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-index.html\"\n                            aria-disabled=\"false\">Post Index</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/includes/post-timeline.html\"\n                            aria-disabled=\"false\">Post Timeline</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-timeline-card.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Timeline | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Timeline\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\",\"headline\":\"Post Timeline\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-timeline.html\"},\"url\":\"/docs/includes/post-timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Timeline</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing the following parameters:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts</code></td>\n      <td>Required</td>\n      <td>The posts to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code></td>\n      <td>The URL for the “More” link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.posts_limit</code>, <code class=\"language-plaintext highlighter-rouge\">site.paginate</code>, or <code class=\"language-plaintext highlighter-rouge\">-1</code></td>\n      <td>Number of posts to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">articles</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"s2\">\"/articles/\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>If the limit is set to a number below 0, all posts will be shown.</p>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> layout, visit our demo page:</p>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Post Timeline Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include sets up initial variables based on the provided parameters or fallback values.</li>\n  <li>It sorts the collection by date in reverse order (newest first).</li>\n  <li>It creates a container for the timeline posts.</li>\n  <li>It iterates through the provided posts (limited by <code class=\"language-plaintext highlighter-rouge\">limit</code> if set) and includes a <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> for each post.</li>\n  <li>If there are more posts than the displayed limit, it adds a “More” link at the bottom.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code>: Another include file that should define how each post card is displayed.</li>\n  <li>Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the timeline:</p>\n\n<ol>\n  <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n  <li>Edit the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> include to change how individual posts are displayed.</li>\n  <li>Adjust the “View all” link text and styling as needed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">posts</code> parameter must be passed explicitly.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">index</code> parameter is optional. If omitted, the include falls back to <code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code>.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for the link, which helps generate correct URLs in different site configurations.</li>\n  <li>The layout uses responsive design classes (<code class=\"language-plaintext highlighter-rouge\">container-xl</code>, <code class=\"language-plaintext highlighter-rouge\">p-responsive-blog</code>, etc.) for optimal display on various screen sizes.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-timeline-card.html\"\n                            aria-disabled=\"false\">Post Timeline Card</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/custom-styles.html\"\n                            aria-disabled=\"false\">Custom styles</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-timeline.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Custom styles | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Custom styles\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Site style\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Site style\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Custom styles\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Site style\",\"headline\":\"Custom styles\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/custom-styles.html\"},\"url\":\"/docs/custom-styles.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Custom styles</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <h2 id=\"site-style\">Site style</h2>\n\n<p>You can override theme styles in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code>. Using Sass is especially helpful when you want to reference Jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add CSS to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n    <span class=\"s\">.Link-btn {</span>\n        <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">h1 {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-timeline.html\"\n                            aria-disabled=\"false\">Post Timeline</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/debug.html\"\n                            aria-disabled=\"false\">Debug</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/custom-styles.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#site-style\">Site style</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#page-style\">Page style</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
        "You can also deploy this site with GitHub Actions. Below is a typical workflow file.\n\n```yaml\n# Sample workflow for building and deploying a Jekyll site to GitHub Pages\nname: Docs\n\non:\n  # Runs on pushes targeting the default branch\n  push:\n    branches: [\"main\"]\n\n  # Run on every pull request\n  pull_request:\n    types: [opened, reopened, synchronize]\n\n  # Allows you to run this workflow manually from the Actions tab\n  workflow_dispatch:\n\n  schedule:\n    # This will refresh your repositories and other user information every day\n    # * is a special character in YAML so you have to quote this string\n    # Generate from https://crontab.guru/\n    #        ┌───────────── minute (0 - 59)\n    #        │ ┌───────────── hour (0 - 23)\n    #        │ │ ┌───────────── day of the month (1 - 31)\n    #        │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)\n    #        │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)\n    #        │ │ │ │ │\n    #        │ │ │ │ │\n    #        │ │ │ │ │\n    #        * * * * *\n    - cron: \"0 0 * * *\"\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n  contents: read # needed to read your repository\n  pages: write # needed to enable and deploy GitHub Pages\n  id-token: write\n\n# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.\n# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: false\n\njobs:\n  # Build job\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v6\n      - name: Setup Ruby\n        uses: ruby/setup-ruby@v1.152.0\n        with:\n          bundler-cache: true # runs 'bundle install' and caches installed gems automatically\n      - name: Setup Pages\n        id: pages\n        uses: actions/configure-pages@v3\n        with:\n          enablement: true # Enable GitHub Pages if it is not already enabled\n      - name: Build\n        run: bundle exec jekyll build\n        env:\n          JEKYLL_ENV: production\n          JEKYLL_GITHUB_TOKEN: ${{ github.token }}\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3\n\n  # Deployment job\n  deploy:\n    if: github.ref == 'refs/heads/main' # Only deploy from the main branch\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    needs: build\n    steps:\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4\n\n```\n"
      ],
      "files": [],
      "relative_directory": "_docs",
      "output": true,
      "label": "docs",
      "sort_by": "order"
    },
    {
      "directory": "/home/runner/work/primerpages.github.io/primerpages.github.io/_posts",
      "docs": [
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with image | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta name=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-11-21T00:00:00+00:00\",\"datePublished\":\"2020-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/11/21/empty/\"},\"url\":\"/examples/2020/11/21/empty/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    <div class=\"d-lg-flex flex-1\">\n    <script>\n    $(document).ready(function () {\n        $('#toolbar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n        })\n        $('#sidebar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n\n        })\n    });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n    <div class=\"flex-column flex-1 position-sticky top-0\">\n        <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n            <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n                <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n            </div>\n            <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n            </div>\n            <div class=\"d-flex flex-justify-center\">\n                <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            </div>\n            <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n                <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n            </div>\n        </div>\n        <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n            <div class=\"text-center\">\n                <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n    <div class=\"CircleBadge\" style=\"width: 128px;\" >\n      <a href=\"/\">\n        <img src=\"https://avatars.githubusercontent.com/u/211580654?v=4\" alt=\"Primer Pages\" >\n      </a>\n    </div>\n\n  <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Primer Pages</h1>\n  \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n    \n    <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n        <div class=\"h2 mr-2 v-align-middle\">\n        <span class=\"octicon octicon-mark-github-24\"></span>\n        </div>\n        <a href=\"https://github.com/PrimerPages\">\n            @PrimerPages\n        </a>\n    </div>\n</div>\n\n</div>\n\n                </div>\n                <div class=\"py-2\">\n                    \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n                </div>\n                <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/\" class=\"Header-link\"\n      >\n      Home\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/docs\" class=\"Header-link\"\n      >\n      Documentation\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/blog\" class=\"Header-link\"\n      >\n      Blog\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/demo\" class=\"Header-link\"\n      >\n      Demo\n    </a>\n</div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n    \n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 21, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+image&url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F;t=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F%2F&title=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/sidebar\">sidebar</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
        "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
      ],
      "files": [],
      "relative_directory": "_posts",
      "output": true,
      "label": "posts",
      "permalink": "/:categories/:year/:month/:day/:title/"
    }
  ],
  "posts": [
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Header Colors | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-header-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2025/02/02/custom-header/\"},\"url\":\"/news/2025/02/02/custom-header/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n                <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Feb 02, 2025\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F;t=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2025%2F02%2F02%2Fcustom-header%2F%2F&title=Introducing+Custom+Header+Colors\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n  <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n  <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n  <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>    <span class=\"c1\"># Text color</span>\n  <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>                 <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>                 <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>  <span class=\"c1\"># Background image (optional)</span>\n  <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>       <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n  <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n  <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/demo/custom-header\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/header\">header</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Introducing Custom Backgrounds | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/custom-background-feature.png\" />\n<meta name=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/11/20/custom-background/\"},\"url\":\"/news/2024/11/20/custom-background/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n                <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 20, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F;t=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F11%2F20%2Fcustom-background%2F%2F&title=Introducing+Custom+Backgrounds\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n  <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n  <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n  <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n  <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/demo/custom-background\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/style\">style</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/customization\">customization</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/background\">background</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/08/08/timeline/\">\n        <img class=\"rounded-2\" src=\"/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/08/08/timeline/\">Showcase Your Content with the Jekyll Timeline Feature</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/media/blog-timeline-feature.png\" />\n<meta name=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/news/2024/08/08/timeline/\"},\"url\":\"/news/2024/08/08/timeline/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Aug 08, 2024\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fnews%2F2024%2F08%2F08%2Ftimeline%2F%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n  <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n  <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n  <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n  <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n  <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n  <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n  <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n  <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n  <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n  <li>All available parameters and their usage</li>\n  <li>How to modify the appearance of the timeline</li>\n  <li>Dependencies and required files</li>\n  <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/news\">news</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/includes\">includes</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2024/11/20/custom-background/\">\n        <img class=\"rounded-2\" src=\"/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2024/11/20/custom-background/\">Introducing Custom Backgrounds</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/news/2025/02/02/custom-header/\">\n        <img class=\"rounded-2\" src=\"/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/news/2025/02/02/custom-header/\">Introducing Custom Header Colors</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with video | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-12-14T00:00:00+00:00\",\"datePublished\":\"2020-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/12/14/video/\"},\"url\":\"/examples/2020/12/14/video/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Dec 14, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+video&url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F;t=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F12%2F14%2Fvideo%2F%2F&title=Empty+post+with+video\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n                            <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n                              width=\"inherited\"></iframe>\n                        </div>\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/video\">video</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/hello-world/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/hello-world/\">Welcome to Jekyll!</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Empty post with image | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2020-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta name=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2020-11-21T00:00:00+00:00\",\"datePublished\":\"2020-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2020/11/21/empty/\"},\"url\":\"/examples/2020/11/21/empty/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    <div class=\"d-lg-flex flex-1\">\n    <script>\n    $(document).ready(function () {\n        $('#toolbar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n        })\n        $('#sidebar-btn').click(function () {\n            $('.Sidebar').toggleClass('d-lg-block');\n            $('.Toolbar-expand').toggleClass('d-lg-block');\n            $('.Toolbar-collapse').toggleClass('d-lg-block');\n            $('.Toolbar').toggleClass('flex-lg-column');\n\n        })\n    });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n    <div class=\"flex-column flex-1 position-sticky top-0\">\n        <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n            <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n                <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n            </div>\n            <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n            </div>\n            <div class=\"d-flex flex-justify-center\">\n                <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            </div>\n            <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n                <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n            </div>\n        </div>\n        <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n            <div class=\"text-center\">\n                <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n    <div class=\"CircleBadge\" style=\"width: 128px;\" >\n      <a href=\"/\">\n        <img src=\"https://avatars.githubusercontent.com/u/211580654?v=4\" alt=\"Primer Pages\" >\n      </a>\n    </div>\n\n  <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Primer Pages</h1>\n  \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n    \n    <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n        <div class=\"h2 mr-2 v-align-middle\">\n        <span class=\"octicon octicon-mark-github-24\"></span>\n        </div>\n        <a href=\"https://github.com/PrimerPages\">\n            @PrimerPages\n        </a>\n    </div>\n</div>\n\n</div>\n\n                </div>\n                <div class=\"py-2\">\n                    \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n                </div>\n                <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/\" class=\"Header-link\"\n      >\n      Home\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/docs\" class=\"Header-link\"\n      >\n      Documentation\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/blog\" class=\"Header-link\"\n      >\n      Blog\n    </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n    <a href=\"/demo\" class=\"Header-link\"\n      >\n      Demo\n    </a>\n</div>\n\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n    \n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n                <p class=\"f4-mktg color-header-default\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Nov 21, 2020\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Empty+post+with+image&url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F;t=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2020%2F11%2F21%2Fempty%2F%2F&title=Empty+post+with+image\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        \n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/sidebar\">sidebar</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test short post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/30/short-post/\"},\"url\":\"/examples/2019/01/30/short-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 30, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+short+post&url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F;t=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F30%2Fshort-post%2F%2F&title=Test+short+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Test post | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/test-post/\"},\"url\":\"/examples/2019/01/29/test-post/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Test+post&url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F;t=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Ftest-post%2F%2F&title=Test+post\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/examples/2019/01/29/hello-world/\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header.</p>\n\n  <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n  <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n  <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n  <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: left\">head1</th>\n      <th style=\"text-align: left\">head two</th>\n      <th style=\"text-align: left\">three</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good swedish fish</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">out of stock</td>\n      <td style=\"text-align: left\">good and plenty</td>\n      <td style=\"text-align: left\">nice</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good cookies</td>\n      <td style=\"text-align: left\">good</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: left\">ok</td>\n      <td style=\"text-align: left\">good licorice</td>\n      <td style=\"text-align: left\">yum</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n  <li>Item foo</li>\n  <li>Item bar</li>\n  <li>Item baz</li>\n  <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n  <li>Item one</li>\n  <li>Item two</li>\n  <li>Item three</li>\n  <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item\n        <ul>\n          <li>level 3 item</li>\n          <li>level 3 item</li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item\n    <ul>\n      <li>level 2 item</li>\n      <li>level 2 item</li>\n    </ul>\n  </li>\n  <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/test\">test</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/syntax-highlighter/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/syntax-highlighter/\">Syntax highlighter</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Syntax highlighter | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/syntax-highlighter/\"},\"url\":\"/examples/2019/01/29/syntax-highlighter/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Syntax+highlighter&url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F;t=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter%2F%2F&title=Syntax+highlighter\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n  <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n  <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n  <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n    <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n  <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">&lt;?php</span>\n  <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n    <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n        <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n    <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;html&gt;</span>\n  <span class=\"nt\">&lt;head&gt;&lt;title&gt;</span>Title!<span class=\"nt\">&lt;/title&gt;&lt;/head&gt;</span>\n  <span class=\"nt\">&lt;body&gt;</span>\n    <span class=\"nt\">&lt;p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">&gt;</span>Hello, World!<span class=\"nt\">&lt;/p&gt;</span>\n    <span class=\"nt\">&lt;script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">&gt;</span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\">&lt;/script&gt;</span>\n    <span class=\"nt\">&lt;style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">&gt;</span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span>\n  <span class=\"nt\">&lt;/body&gt;</span>\n<span class=\"nt\">&lt;/html&gt;</span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n    <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n    <span class=\"c1\">// Outputs Hello World to screen.</span>\n    <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n    <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n  <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/example\">example</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/12/14/video/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/12/14/video/\">Empty post with video</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Welcome to Jekyll! | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta property=\"article:modified_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/examples/2019/01/29/hello-world/\"},\"url\":\"/examples/2019/01/29/hello-world/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n<div class=\"Blog flex-column flex-1 min-width-0\">\n    <div class=\"BlogHeader position-relative border-top\">\n        <div class=\"container-xl p-responsive\">\n            <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n                <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n                <p class=\"f4-mktg color-header-default\"></p>\n            </div>\n            <div class=\"offset-lg-1 col-lg-10\">\n                <div class=\"position-relative z-1\">\n                    <div class=\"image-container\">\n                        <img src=\"/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n        </div>\n    </div>\n    <div class=\"pb-5\">\n        <div class=\"container-xl mx-auto p-responsive\">\n            <!-- Post metadata -->\n            <div class=\"pt-5\">\n                <div class=\"col-12 offset-lg-1 col-lg-10\">\n                    <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n                    <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n                        <div class=\"d-flex flex-wrap\">PrimerPages</div>\n                        <div\n                            class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n                            Jan 29, 2019\n                        </div>\n                    </div>\n                    <div class=\"color-border-accent-emphasis border-bottom\"></div>\n                </div>\n            </div>\n            <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n                <div class=\"d-flex flex-wrap\">\n                    <div class=\"col-12 offset-lg-1 col-lg-1\">\n                        <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path\n                                            d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.facebook.com/sharer/sharer.php?u=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F;t=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n                                        <path\n                                            d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                            <li class=\"mr-4 mr-lg-0 mb-4\">\n                                <a href=\"https://www.linkedin.com/shareArticle?url=%2Fexamples%2F2019%2F01%2F29%2Fhello-world%2F%2F&title=Welcome+to+Jekyll%21\"\n                                    target=\"_blank\"\n                                    class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n                                    data-proofer-ignore>\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n                                        <path\n                                            d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n                                            fill=\"currentColor\"></path>\n                                    </svg>\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n                        \n                        <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n  <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n  <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n  <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n  <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n  <thead>\n    <tr>\n      <th>What</th>\n      <th>Follows</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n    <tr>\n      <td>A table</td>\n      <td>A header</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n  <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n  <li class=\"task-list-item\">[ ]</li>\n  <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n  <li>Fruits\n    <ul>\n      <li>Apple</li>\n      <li>Banana</li>\n      <li>Cherry</li>\n      <li>Grape</li>\n      <li>Orange</li>\n    </ul>\n  </li>\n  <li>Tools\n    <ul>\n      <li>Hammer</li>\n      <li>Screwdriver</li>\n      <li>Wrench</li>\n      <li>Pliers</li>\n    </ul>\n  </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n  <dt>Name</dt>\n  <dd>Godzilla</dd>\n  <dt>Born</dt>\n  <dd>1952</dd>\n  <dt>Birthplace</dt>\n  <dd>Japan</dd>\n  <dt>Color</dt>\n  <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Artist</th>\n      <th>Album</th>\n      <th>Year</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>David Bowie</td>\n      <td>Scary Monsters</td>\n      <td>1980</td>\n    </tr>\n    <tr>\n      <td>Prince</td>\n      <td>Purple Rain</td>\n      <td>1982</td>\n    </tr>\n    <tr>\n      <td>Beastie Boys</td>\n      <td>License to Ill</td>\n      <td>1986</td>\n    </tr>\n    <tr>\n      <td>Janet Jackson</td>\n      <td>Rhythm Nation 1814</td>\n      <td>1989</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Description</th>\n      <th>Color</th>\n      <th>Size</th>\n      <th>Material</th>\n      <th>Weight</th>\n      <th>Price</th>\n      <th>Rating</th>\n      <th>Stock</th>\n      <th>Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Chair</td>\n      <td>Office chair</td>\n      <td>Black</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>12kg</td>\n      <td>$120</td>\n      <td>4.5</td>\n      <td>Yes</td>\n      <td>Adjustable height</td>\n    </tr>\n    <tr>\n      <td>Table</td>\n      <td>Dining table</td>\n      <td>Brown</td>\n      <td>Large</td>\n      <td>Wood</td>\n      <td>30kg</td>\n      <td>$450</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Seats six</td>\n    </tr>\n    <tr>\n      <td>Lamp</td>\n      <td>Desk lamp</td>\n      <td>White</td>\n      <td>Small</td>\n      <td>Metal</td>\n      <td>2kg</td>\n      <td>$35</td>\n      <td>4.2</td>\n      <td>No</td>\n      <td>LED light included</td>\n    </tr>\n    <tr>\n      <td>Sofa</td>\n      <td>Living room sofa</td>\n      <td>Gray</td>\n      <td>Large</td>\n      <td>Fabric</td>\n      <td>45kg</td>\n      <td>$780</td>\n      <td>4.8</td>\n      <td>Yes</td>\n      <td>Three seats</td>\n    </tr>\n    <tr>\n      <td>Shelf</td>\n      <td>Wall shelf</td>\n      <td>Oak</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>8kg</td>\n      <td>$60</td>\n      <td>4.6</td>\n      <td>Yes</td>\n      <td>Easy to install</td>\n    </tr>\n    <tr>\n      <td>Bed</td>\n      <td>Queen bed frame</td>\n      <td>Black</td>\n      <td>Large</td>\n      <td>Metal</td>\n      <td>40kg</td>\n      <td>$550</td>\n      <td>4.9</td>\n      <td>Yes</td>\n      <td>Mattress not included</td>\n    </tr>\n    <tr>\n      <td>Mirror</td>\n      <td>Wall mirror</td>\n      <td>Silver</td>\n      <td>Medium</td>\n      <td>Glass</td>\n      <td>5kg</td>\n      <td>$90</td>\n      <td>4.3</td>\n      <td>Yes</td>\n      <td>Comes with mounting kit</td>\n    </tr>\n    <tr>\n      <td>Rug</td>\n      <td>Area rug</td>\n      <td>Beige</td>\n      <td>Large</td>\n      <td>Wool</td>\n      <td>10kg</td>\n      <td>$300</td>\n      <td>4.4</td>\n      <td>No</td>\n      <td>Hand-woven</td>\n    </tr>\n    <tr>\n      <td>Cabinet</td>\n      <td>Storage cabinet</td>\n      <td>White</td>\n      <td>Medium</td>\n      <td>Wood</td>\n      <td>20kg</td>\n      <td>$250</td>\n      <td>4.7</td>\n      <td>Yes</td>\n      <td>Multiple compartments</td>\n    </tr>\n    <tr>\n      <td>Fan</td>\n      <td>Standing fan</td>\n      <td>Gray</td>\n      <td>Medium</td>\n      <td>Plastic</td>\n      <td>4kg</td>\n      <td>$80</td>\n      <td>4.1</td>\n      <td>Yes</td>\n      <td>Adjustable speed settings</td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\">&lt;iostream&gt;</span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n  <span class=\"n\">cout</span> <span class=\"o\">&lt;&lt;</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n  <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n  <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n    <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Language</th>\n      <th>Code</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>JavasScript</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n    </tr>\n    <tr>\n      <td>Ruby</td>\n      <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n    </tr>\n  </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">&lt;samp&gt;</code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\">\n      <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\">\n      <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n\n                        <div class=\"post-tags text-mono f4-mktg mt-8\">\n                            <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n                            <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/how-to\">how-to</a></li>\n                                <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/tags/welcome\">welcome</a></li>\n                                \n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n                        <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n                            \n                            \n                            <div class=\"mb-8 table-of-contents \">\n                                <h2 class=\"h6-mktg pt-1\">\n                                    Table of Contents\n                                </h2>\n                                <div id=\"table-of-contents\">\n                                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"Related container-xl mx-auto p-responsive\">\n            \n\n\n\n\n\n\n\n\n\n\n\n  \n\n  \n    \n      \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n    \n\n    \n    \n\n    \n    \n\n    \n  \n\n  \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2020/11/21/empty/\">\n        <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2020/11/21/empty/\">Empty post with image</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post.  It should show up in the timeline, but not encourage click-through or expansions.</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2020</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/29/test-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/29/test-post/\">Test post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n  \n\n  \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n  <div class=\"py-4 d-flex flex-column \">\n    <div class=\"image-container\">\n      <a href=\"/examples/2019/01/30/short-post/\">\n        <img class=\"rounded-2\" src=\"/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n      </a>\n    </div>\n    <h3 class=\"h6-mktg mb-12px\">\n      <a class=\"Link--primary\" href=\"/examples/2019/01/30/short-post/\">Test short post</a>\n    </h3>\n    <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post.  It should show up on the timeline without a “continue” option.</p>\n</div>\n    <div class=\"mt-14px\">\n      <div class=\"d-flex flex-items-center\">\n        <div class=\"d-flex flex-items-end flex-wrap\">\n          <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n</div>\n\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n"
  ],
  "theme": "jekyll-theme-profile",
  "title": "Primer Pages",
  "description": "Theme built with jekyll-theme-profile",
  "repository": "PrimerPages/primerpages.github.io",
  "style": "appbar",
  "dark_theme": "dark",
  "light_theme": "light",
  "repo_info": true,
  "user_metadata": true,
  "profile_link": true,
  "repositories": {
    "sort_by": "stars",
    "limit": 24,
    "exclude": {
      "archived": true,
      "forks": true,
      "repositories": null
    }
  },
  "related_by": "tags or categories",
  "source": "/home/runner/work/primerpages.github.io/primerpages.github.io",
  "destination": "./_site",
  "collections_dir": "",
  "cache_dir": ".jekyll-cache",
  "plugins_dir": "_plugins",
  "layouts_dir": "_layouts",
  "data_dir": "_data",
  "includes_dir": "_includes",
  "safe": false,
  "include": [
    ".htaccess"
  ],
  "exclude": [
    "spec",
    ".sass-cache",
    ".jekyll-cache",
    "gemfiles",
    "Gemfile",
    "Gemfile.lock",
    "node_modules",
    "vendor/",
    "integration/",
    "vendor/bundle/",
    "vendor/cache/",
    "vendor/gems/",
    "vendor/ruby/"
  ],
  "keep_files": [
    ".git",
    ".svn"
  ],
  "encoding": "utf-8",
  "markdown_ext": "markdown,mkdown,mkdn,mkd,md",
  "strict_front_matter": false,
  "show_drafts": null,
  "limit_posts": 0,
  "future": false,
  "unpublished": false,
  "whitelist": [],
  "plugins": [
    "jekyll-awesome-nav",
    "jekyll-gfm-admonitions",
    "jekyll-github-metadata",
    "jekyll-octicons",
    "jekyll-relative-links",
    "jekyll-seo-tag",
    "jekyll-toc",
    "jemoji"
  ],
  "markdown": "kramdown",
  "highlighter": "rouge",
  "lsi": false,
  "excerpt_separator": "\n\n",
  "incremental": false,
  "detach": false,
  "port": "4000",
  "host": "127.0.0.1",
  "baseurl": "",
  "show_dir_listing": false,
  "permalink": "pretty",
  "paginate_path": "/blog/page:num",
  "timezone": null,
  "quiet": false,
  "verbose": false,
  "defaults": [
    {
      "scope": {
        "path": "",
        "type": "posts"
      },
      "values": {
        "layout": "post",
        "image": "/assets/img/default.png",
        "toc": true
      }
    },
    {
      "scope": {
        "path": "",
        "type": "pages"
      },
      "values": {
        "layout": "page",
        "image": "/assets/img/default.png"
      }
    },
    {
      "scope": {
        "path": "",
        "type": "docs"
      },
      "values": {
        "layout": "docs",
        "image": "/assets/img/default.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true
      }
    }
  ],
  "liquid": {
    "error_mode": "warn",
    "strict_filters": false,
    "strict_variables": false
  },
  "kramdown": {
    "auto_ids": true,
    "toc_levels": [
      1,
      2,
      3,
      4,
      5,
      6
    ],
    "entity_output": "as_char",
    "smart_quotes": "lsquo,rsquo,ldquo,rdquo",
    "input": "GFM",
    "hard_wrap": false,
    "guess_lang": true,
    "footnote_nr": 1,
    "show_warnings": false,
    "syntax_highlighter": "rouge",
    "syntax_highlighter_opts": {
      "default_lang": "plaintext",
      "guess_lang": true
    },
    "coderay": {}
  },
  "image": "/assets/img/social-preview.png",
  "edit_url": "https://github.com/PrimerPages/primerpages-dev/edit/main/site/",
  "nav": [
    {
      "name": "Home",
      "url": "/"
    },
    {
      "name": "Documentation",
      "url": "/docs"
    },
    {
      "name": "Blog",
      "url": "/blog"
    },
    {
      "name": "Demo",
      "url": "/demo"
    }
  ],
  "links": [
    {
      "name": "Browse posts by category",
      "url": "/category",
      "octicon": "file-directory"
    },
    {
      "name": "Browse posts by tag",
      "url": "/tags",
      "octicon": "tag"
    }
  ],
  "awesome_nav": {
    "enabled": true,
    "root": "demo/awesome-nav",
    "nav_filename": ".nav.yml"
  },
  "paginate": 6,
  "tag_page_layout": "tags",
  "tag_page_dir": "tags",
  "category_path": "category",
  "category_layout": "category_layout.html",
  "relative_links": {
    "enabled": true,
    "collections": true
  },
  "gfm_admonitions": {
    "inject_css": false
  },
  "serving": false,
  "tag_data": [
    [
      "background",
      1
    ],
    [
      "customization",
      2
    ],
    [
      "example",
      5
    ],
    [
      "header",
      1
    ],
    [
      "how-to",
      2
    ],
    [
      "includes",
      1
    ],
    [
      "news",
      4
    ],
    [
      "sidebar",
      1
    ],
    [
      "style",
      2
    ],
    [
      "test",
      4
    ],
    [
      "video",
      1
    ],
    [
      "welcome",
      1
    ]
  ],
  "awesome_nav_tree": [
    {
      "title": "Guides",
      "url": "/demo/awesome-nav/guides/",
      "children": [
        {
          "title": "Advanced",
          "children": [
            {
              "title": "Overrides",
              "url": "/demo/awesome-nav/guides/advanced/overrides/"
            }
          ]
        },
        {
          "title": "Configuration",
          "url": "/demo/awesome-nav/guides/configuration/"
        }
      ]
    },
    {
      "title": "Getting Started",
      "url": "/demo/awesome-nav/getting-started/"
    }
  ],
  "awesome_nav_local_map": {
    "demo/awesome-nav": [
      {
        "title": "Guides",
        "url": "/demo/awesome-nav/guides/",
        "children": [
          {
            "title": "Advanced",
            "children": [
              {
                "title": "Overrides",
                "url": "/demo/awesome-nav/guides/advanced/overrides/"
              }
            ]
          },
          {
            "title": "Configuration",
            "url": "/demo/awesome-nav/guides/configuration/"
          }
        ]
      },
      {
        "title": "Getting Started",
        "url": "/demo/awesome-nav/getting-started/"
      }
    ],
    "demo/awesome-nav/guides": [
      {
        "title": "Advanced",
        "children": [
          {
            "title": "Overrides",
            "url": "/demo/awesome-nav/guides/advanced/overrides/"
          }
        ]
      },
      {
        "title": "Configuration",
        "url": "/demo/awesome-nav/guides/configuration/"
      }
    ],
    "demo/awesome-nav/guides/advanced": [
      {
        "title": "Overrides",
        "url": "/demo/awesome-nav/guides/advanced/overrides/"
      }
    ]
  },
  "awesome_nav_files": {},
  "github": {
    "api_url": "https://api.github.com",
    "archived": false,
    "baseurl": "/pages/PrimerPages/primerpages.github.io",
    "build_revision": "a109f6a373f21f2db8a42f7e54b922f0c9b30673",
    "clone_url": "https://github.com/PrimerPages/primerpages.github.io.git",
    "contributors": [
      {
        "login": "actions-user",
        "id": 65916846,
        "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
        "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
        "gravatar_id": "",
        "url": "https://api.github.com/users/actions-user",
        "html_url": "https://github.com/actions-user",
        "followers_url": "https://api.github.com/users/actions-user/followers",
        "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
        "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
        "organizations_url": "https://api.github.com/users/actions-user/orgs",
        "repos_url": "https://api.github.com/users/actions-user/repos",
        "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
        "received_events_url": "https://api.github.com/users/actions-user/received_events",
        "type": "User",
        "user_view_type": "public",
        "site_admin": false,
        "contributions": 17
      },
      {
        "login": "athackst",
        "id": 6098197,
        "node_id": "MDQ6VXNlcjYwOTgxOTc=",
        "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
        "gravatar_id": "",
        "url": "https://api.github.com/users/athackst",
        "html_url": "https://github.com/athackst",
        "followers_url": "https://api.github.com/users/athackst/followers",
        "following_url": "https://api.github.com/users/athackst/following{/other_user}",
        "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
        "organizations_url": "https://api.github.com/users/athackst/orgs",
        "repos_url": "https://api.github.com/users/athackst/repos",
        "events_url": "https://api.github.com/users/athackst/events{/privacy}",
        "received_events_url": "https://api.github.com/users/athackst/received_events",
        "type": "User",
        "user_view_type": "public",
        "site_admin": false,
        "contributions": 8
      }
    ],
    "disabled": false,
    "environment": "development",
    "help_url": "https://docs.github.com",
    "hostname": "github.com",
    "is_project_page": true,
    "is_user_page": false,
    "issues_url": null,
    "language": "Ruby",
    "latest_release": {
      "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779",
      "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779/assets",
      "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779/assets{?name,label}",
      "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.1.1",
      "id": 321329779,
      "author": {
        "login": "athackst",
        "id": 6098197,
        "node_id": "MDQ6VXNlcjYwOTgxOTc=",
        "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
        "gravatar_id": "",
        "url": "https://api.github.com/users/athackst",
        "html_url": "https://github.com/athackst",
        "followers_url": "https://api.github.com/users/athackst/followers",
        "following_url": "https://api.github.com/users/athackst/following{/other_user}",
        "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
        "organizations_url": "https://api.github.com/users/athackst/orgs",
        "repos_url": "https://api.github.com/users/athackst/repos",
        "events_url": "https://api.github.com/users/athackst/events{/privacy}",
        "received_events_url": "https://api.github.com/users/athackst/received_events",
        "type": "User",
        "user_view_type": "public",
        "site_admin": false
      },
      "node_id": "RE_kwDOSAQtXM4TJxpz",
      "tag_name": "v2.1.1",
      "target_commitish": "main",
      "name": "Release v2.1.1",
      "draft": false,
      "immutable": false,
      "prerelease": false,
      "created_at": "2026-05-12 17:32:48 UTC",
      "updated_at": "2026-05-12 18:17:33 UTC",
      "published_at": "2026-05-12 18:17:33 UTC",
      "assets": [],
      "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.1.1",
      "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.1.1",
      "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
    },
    "license": {
      "key": "other",
      "name": "Other",
      "spdx_id": "NOASSERTION",
      "url": null,
      "node_id": "MDc6TGljZW5zZTA="
    },
    "organization_members": [],
    "owner": {
      "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
      "bio": null,
      "blog": null,
      "collaborators": null,
      "company": null,
      "created_at": "2025-05-13 21:18:32 UTC",
      "description": "",
      "email": null,
      "followers": 1,
      "following": 0,
      "has_organization_projects": true,
      "has_repository_projects": true,
      "hireable": null,
      "html_url": "https://github.com/PrimerPages",
      "id": 211580654,
      "is_verified": false,
      "location": null,
      "login": "PrimerPages",
      "name": "PrimerPages",
      "node_id": "O_kgDODJx27g",
      "public_gists": 0,
      "public_repos": 12,
      "type": "Organization",
      "updated_at": "2026-05-10 20:30:32 UTC"
    },
    "owner_display_name": "PrimerPages",
    "owner_gravatar_url": "https://github.com/PrimerPages.png",
    "owner_name": "PrimerPages",
    "owner_url": "https://github.com/PrimerPages",
    "pages_env": "development",
    "pages_hostname": "localhost:4000",
    "private": false,
    "project_tagline": "Primer Pages site",
    "project_title": "primerpages.github.io",
    "public_repositories": [
      {
        "id": 1221198635,
        "node_id": "R_kgDOSMoDKw",
        "name": "jekyll-awesome-nav",
        "full_name": "PrimerPages/jekyll-awesome-nav",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/jekyll-awesome-nav",
        "description": "A Jekyll plugin for building flexible page lists, navigation, and directory indexes.",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav",
        "forks_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/deployments",
        "created_at": "2026-04-25 22:05:39 UTC",
        "updated_at": "2026-05-12 17:19:14 UTC",
        "pushed_at": "2026-05-12 17:14:21 UTC",
        "git_url": "git://github.com/PrimerPages/jekyll-awesome-nav.git",
        "ssh_url": "git@github.com:PrimerPages/jekyll-awesome-nav.git",
        "clone_url": "https://github.com/PrimerPages/jekyll-awesome-nav.git",
        "svn_url": "https://github.com/PrimerPages/jekyll-awesome-nav",
        "homepage": "https://www.primerpages.com/jekyll-awesome-nav/",
        "size": 115,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Ruby",
        "has_issues": true,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/319063767",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/319063767/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/319063767/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-awesome-nav/releases/tag/v0.1.1",
            "id": 319063767,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSMoDK84TBIbX",
            "tag_name": "v0.1.1",
            "target_commitish": "main",
            "name": "Release v0.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-11 22:27:02 UTC",
            "updated_at": "2026-05-11 22:29:57 UTC",
            "published_at": "2026-05-11 22:29:46 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/assets/417820425",
                "id": 417820425,
                "node_id": "RA_kwDOSMoDK84Y528J",
                "name": "jekyll-awesome-nav-0.1.1.gem",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 29184,
                "digest": "sha256:d362fd70c291de704524a59554e9a07b7d6ceb30a654bb1d9f2f57acc4e16da5",
                "download_count": 0,
                "created_at": "2026-05-11 22:29:57 UTC",
                "updated_at": "2026-05-11 22:29:57 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-awesome-nav/releases/download/v0.1.1/jekyll-awesome-nav-0.1.1.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/tarball/v0.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/zipball/v0.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Prevent duplicate entries from manual nav references [#24](https://github.com/PrimerPages/jekyll-awesome-nav/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Dev/regression tests [#25](https://github.com/PrimerPages/jekyll-awesome-nav/pull/25)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#22](https://github.com/PrimerPages/jekyll-awesome-nav/pull/22)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/318648451",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/318648451/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/318648451/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-awesome-nav/releases/tag/v0.1.0",
            "id": 318648451,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSMoDK84S_jCD",
            "tag_name": "v0.1.0",
            "target_commitish": "main",
            "name": "Release v0.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-07 04:35:38 UTC",
            "updated_at": "2026-05-07 05:06:31 UTC",
            "published_at": "2026-05-07 05:06:19 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/assets/414119273",
                "id": 414119273,
                "node_id": "RA_kwDOSMoDK84YrvVp",
                "name": "jekyll-awesome-nav-0.1.0.gem",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 28672,
                "digest": "sha256:5fd0ade3d27f49b043824e805db21eb4e4882e8156e3692ca34d9228d13dee64",
                "download_count": 0,
                "created_at": "2026-05-07 05:06:30 UTC",
                "updated_at": "2026-05-07 05:06:31 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-awesome-nav/releases/download/v0.1.0/jekyll-awesome-nav-0.1.0.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/tarball/v0.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/zipball/v0.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Handle readme-index pages in nav generation [#17](https://github.com/PrimerPages/jekyll-awesome-nav/pull/17)\r\n- Add include and ignore config for page selection [#16](https://github.com/PrimerPages/jekyll-awesome-nav/pull/16)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Refine root labels and add regression coverage [#18](https://github.com/PrimerPages/jekyll-awesome-nav/pull/18)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Refresh docs demo layout with TOC and updated navigation wiring [#14](https://github.com/PrimerPages/jekyll-awesome-nav/pull/14)\r\n- Add rake tasks for build and release workflows [#12](https://github.com/PrimerPages/jekyll-awesome-nav/pull/12)\r\n- Add root-site fixture for full-root navigation demos [#15](https://github.com/PrimerPages/jekyll-awesome-nav/pull/15)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/313653275",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/313653275/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/313653275/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-awesome-nav/releases/tag/v0.0.1",
            "id": 313653275,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSMoDK84Ssfgb",
            "tag_name": "v0.0.1",
            "target_commitish": "refs/heads/main",
            "name": "Release v0.0.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-05 23:38:45 UTC",
            "updated_at": "2026-05-06 21:40:20 UTC",
            "published_at": "2026-05-06 21:40:20 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/releases/assets/413619468",
                "id": 413619468,
                "node_id": "RA_kwDOSMoDK84Yp1UM",
                "name": "jekyll-awesome-nav-0.0.1.gem",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 26624,
                "digest": "sha256:524090f31a708d8e928ebf80ee17a5850e8447f13d06e464565cf04b83e60f94",
                "download_count": 0,
                "created_at": "2026-05-06 15:22:14 UTC",
                "updated_at": "2026-05-06 15:22:14 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-awesome-nav/releases/download/v0.0.1/jekyll-awesome-nav-0.0.1.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/tarball/v0.0.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-awesome-nav/zipball/v0.0.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove enablement from site workflow [#8](https://github.com/PrimerPages/jekyll-awesome-nav/pull/8)\r\n- Bump actions/checkout from 4 to 6 [#5](https://github.com/PrimerPages/jekyll-awesome-nav/pull/5)\r\n\r\n## Miscellaneous\r\n\r\n- Overhaul CI [#7](https://github.com/PrimerPages/jekyll-awesome-nav/pull/7)\r\n\r\n"
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 36
          },
          {
            "login": "dependabot[bot]",
            "id": 49699333,
            "node_id": "MDM6Qm90NDk2OTkzMzM=",
            "avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/dependabot%5Bbot%5D",
            "html_url": "https://github.com/apps/dependabot",
            "followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
            "following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
            "gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
            "organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
            "repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
            "events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
            "received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
            "type": "Bot",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 3
          }
        ]
      },
      {
        "id": 836587889,
        "node_id": "R_kgDOMd1RcQ",
        "name": "jekyll-collection-pages",
        "full_name": "PrimerPages/jekyll-collection-pages",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/jekyll-collection-pages",
        "description": "Add collection index pages based on front matter wit hand without pagination",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages",
        "forks_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/deployments",
        "created_at": "2024-08-01 06:57:04 UTC",
        "updated_at": "2025-11-21 23:14:25 UTC",
        "pushed_at": "2025-11-21 23:14:22 UTC",
        "git_url": "git://github.com/PrimerPages/jekyll-collection-pages.git",
        "ssh_url": "git@github.com:PrimerPages/jekyll-collection-pages.git",
        "clone_url": "https://github.com/PrimerPages/jekyll-collection-pages.git",
        "svn_url": "https://github.com/PrimerPages/jekyll-collection-pages",
        "homepage": "https://primerpages.github.io/jekyll-collection-pages/",
        "size": 1272,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Ruby",
        "has_issues": true,
        "has_projects": true,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [
          "jekyll",
          "jekyll-plugin"
        ],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/releases/168522950",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/releases/168522950/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-collection-pages/releases/168522950/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-collection-pages/releases/tag/0.1.0",
            "id": 168522950,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOMd1Rcc4KC3TG",
            "tag_name": "0.1.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-11-18 01:07:41 UTC",
            "updated_at": "2025-11-18 01:18:33 UTC",
            "published_at": "2025-11-18 01:18:33 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/tarball/0.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-collection-pages/zipball/0.1.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Restructure and add meta for indexes (#5) @athackst\r\n* First commit with plugin (#1) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix page paths so nested paths will work (#17) @athackst\r\n* Raise an error if paginate is non numeric (#16) @athackst\r\n* Fix errors in demo files (#15) @athackst\r\n* Fix links for documentation (#2) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update code for PrimerPages (#23) @athackst\r\n* Reduce complexity in generation logic, add extra guard for path (#22) @athackst\r\n* Simplify and add validation to PathTemplate logic (#21) @athackst\r\n* Tag pager handles <=0 per_page (#20) @athackst\r\n* Update TagIndexPage to extend PageWithoutAFile (#19) @athackst\r\n* Optimize storing document tags (#18) @athackst\r\n* Relax rubocop settings (#14) @athackst\r\n* Refactor TagIndexPages and add tests (#13) @athackst\r\n* Refactor TagPages and update tests (#11) @athackst\r\n* Update integration ci test to use jekyll build (#12) @athackst\r\n* Update code to remove some linting errors (#10) @athackst\r\n* Add linting (#9) @athackst\r\n* Update devcontainer to setup ruby lsp (#6) @athackst\r\n* Update release draft workflow (#8) @athackst\r\n* Update ci test matrix (#7) @athackst\r\n* Update name of success job in ci (#3) @athackst\r\n",
            "mentions_count": 1
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 29
          }
        ]
      },
      {
        "id": 666952321,
        "node_id": "R_kgDOJ8DigQ",
        "name": "jekyll-theme-profile",
        "full_name": "PrimerPages/jekyll-theme-profile",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/jekyll-theme-profile",
        "description": "Github Primer based Jekyll Theme",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile",
        "forks_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/deployments",
        "created_at": "2023-07-16 06:21:09 UTC",
        "updated_at": "2026-05-06 23:12:42 UTC",
        "pushed_at": "2026-05-12 18:17:35 UTC",
        "git_url": "git://github.com/PrimerPages/jekyll-theme-profile.git",
        "ssh_url": "git@github.com:PrimerPages/jekyll-theme-profile.git",
        "clone_url": "https://github.com/PrimerPages/jekyll-theme-profile.git",
        "svn_url": "https://github.com/PrimerPages/jekyll-theme-profile",
        "homepage": "https://primerpages.github.io/jekyll-theme-profile/",
        "size": 15366,
        "stargazers_count": 9,
        "watchers_count": 9,
        "language": "HTML",
        "has_issues": true,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 1,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [
          "jekyll-theme",
          "jekyll-themes"
        ],
        "visibility": "public",
        "forks": 1,
        "open_issues": 0,
        "watchers": 9,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/321329797",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/321329797/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/321329797/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/v2.1.1",
            "id": 321329797,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4TJxqF",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-06 23:12:37 UTC",
            "updated_at": "2026-05-12 18:17:37 UTC",
            "published_at": "2026-05-12 18:17:36 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/assets/418595975",
                "id": 418595975,
                "node_id": "RA_kwDOJ8Digc4Y80SH",
                "name": "jekyll-theme-profile-2.1.1.gem",
                "label": "",
                "uploader": {
                  "login": "athackst",
                  "id": 6098197,
                  "node_id": "MDQ6VXNlcjYwOTgxOTc=",
                  "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/athackst",
                  "html_url": "https://github.com/athackst",
                  "followers_url": "https://api.github.com/users/athackst/followers",
                  "following_url": "https://api.github.com/users/athackst/following{/other_user}",
                  "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
                  "organizations_url": "https://api.github.com/users/athackst/orgs",
                  "repos_url": "https://api.github.com/users/athackst/repos",
                  "events_url": "https://api.github.com/users/athackst/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/athackst/received_events",
                  "type": "User",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 817664,
                "digest": "sha256:e828882759d1f50df7a5bc8c94015a40c52ecdd75a720bf5822710d557efa7f8",
                "download_count": 0,
                "created_at": "2026-05-12 18:17:37 UTC",
                "updated_at": "2026-05-12 18:17:37 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/download/v2.1.1/jekyll-theme-profile-2.1.1.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/318651485",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/318651485/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/318651485/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/v2.1.0",
            "id": 318651485,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4S_jxd",
            "tag_name": "v2.1.0",
            "target_commitish": "main",
            "name": "Release v2.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-06 20:48:20 UTC",
            "updated_at": "2026-05-06 21:46:40 UTC",
            "published_at": "2026-05-06 21:46:39 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/assets/413861074",
                "id": 413861074,
                "node_id": "RA_kwDOJ8Digc4YqwTS",
                "name": "jekyll-theme-profile-2.1.0.gem",
                "label": "",
                "uploader": {
                  "login": "athackst",
                  "id": 6098197,
                  "node_id": "MDQ6VXNlcjYwOTgxOTc=",
                  "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/athackst",
                  "html_url": "https://github.com/athackst",
                  "followers_url": "https://api.github.com/users/athackst/followers",
                  "following_url": "https://api.github.com/users/athackst/following{/other_user}",
                  "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
                  "organizations_url": "https://api.github.com/users/athackst/orgs",
                  "repos_url": "https://api.github.com/users/athackst/repos",
                  "events_url": "https://api.github.com/users/athackst/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/athackst/received_events",
                  "type": "User",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 817664,
                "digest": "sha256:f0c18718565d7b30459a0f6e4f1ac71a77238fed2cf3b0b42851000d69971a7b",
                "download_count": 0,
                "created_at": "2026-05-06 21:46:40 UTC",
                "updated_at": "2026-05-06 21:46:40 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/download/v2.1.0/jekyll-theme-profile-2.1.0.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/v2.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/v2.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/313521367",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/313521367/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/313521367/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/v2.0.3",
            "id": 313521367,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4Sr_TX",
            "tag_name": "v2.0.3",
            "target_commitish": "main",
            "name": "Release v2.0.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-25 04:32:41 UTC",
            "updated_at": "2026-04-25 04:56:51 UTC",
            "published_at": "2026-04-25 04:56:50 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/assets/405133139",
                "id": 405133139,
                "node_id": "RA_kwDOJ8Digc4YJddT",
                "name": "jekyll-theme-profile-2.0.3.gem",
                "label": "",
                "uploader": {
                  "login": "athackst",
                  "id": 6098197,
                  "node_id": "MDQ6VXNlcjYwOTgxOTc=",
                  "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/athackst",
                  "html_url": "https://github.com/athackst",
                  "followers_url": "https://api.github.com/users/athackst/followers",
                  "following_url": "https://api.github.com/users/athackst/following{/other_user}",
                  "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
                  "organizations_url": "https://api.github.com/users/athackst/orgs",
                  "repos_url": "https://api.github.com/users/athackst/repos",
                  "events_url": "https://api.github.com/users/athackst/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/athackst/received_events",
                  "type": "User",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 815104,
                "digest": "sha256:4cd7c0067f8b2ec592a9d609d4058bb5f4401bf5de60a5f21a07def7c0008e5c",
                "download_count": 0,
                "created_at": "2026-04-25 04:56:51 UTC",
                "updated_at": "2026-04-25 04:56:51 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/download/v2.0.3/jekyll-theme-profile-2.0.3.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/v2.0.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/v2.0.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/313422534",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/313422534/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/313422534/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/v2.0.2",
            "id": 313422534,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4SrnLG",
            "tag_name": "v2.0.2",
            "target_commitish": "main",
            "name": "Release v2.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 21:00:42 UTC",
            "updated_at": "2026-04-24 21:04:49 UTC",
            "published_at": "2026-04-24 21:04:48 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/assets/404803313",
                "id": 404803313,
                "node_id": "RA_kwDOJ8Digc4YIM7x",
                "name": "jekyll-theme-profile-2.0.2.gem",
                "label": "",
                "uploader": {
                  "login": "athackst",
                  "id": 6098197,
                  "node_id": "MDQ6VXNlcjYwOTgxOTc=",
                  "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/athackst",
                  "html_url": "https://github.com/athackst",
                  "followers_url": "https://api.github.com/users/athackst/followers",
                  "following_url": "https://api.github.com/users/athackst/following{/other_user}",
                  "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
                  "organizations_url": "https://api.github.com/users/athackst/orgs",
                  "repos_url": "https://api.github.com/users/athackst/repos",
                  "events_url": "https://api.github.com/users/athackst/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/athackst/received_events",
                  "type": "User",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 815104,
                "digest": "sha256:9c5fa7a5886b14d2ca3da070270687e7ed4ce886791c1589368ec6fc058861e1",
                "download_count": 0,
                "created_at": "2026-04-24 21:04:48 UTC",
                "updated_at": "2026-04-24 21:04:49 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/download/v2.0.2/jekyll-theme-profile-2.0.2.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/v2.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/v2.0.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/312966509",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/312966509/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/312966509/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/v1.13.2",
            "id": 312966509,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4Sp31t",
            "tag_name": "v1.13.2",
            "target_commitish": "main",
            "name": "Release v1.13.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-23 22:13:03 UTC",
            "updated_at": "2026-04-23 22:13:07 UTC",
            "published_at": "2026-04-23 22:13:06 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/assets/403824810",
                "id": 403824810,
                "node_id": "RA_kwDOJ8Digc4YEeCq",
                "name": "jekyll-theme-profile-1.13.2.gem",
                "label": "",
                "uploader": {
                  "login": "athackst",
                  "id": 6098197,
                  "node_id": "MDQ6VXNlcjYwOTgxOTc=",
                  "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/athackst",
                  "html_url": "https://github.com/athackst",
                  "followers_url": "https://api.github.com/users/athackst/followers",
                  "following_url": "https://api.github.com/users/athackst/following{/other_user}",
                  "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
                  "organizations_url": "https://api.github.com/users/athackst/orgs",
                  "repos_url": "https://api.github.com/users/athackst/repos",
                  "events_url": "https://api.github.com/users/athackst/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/athackst/received_events",
                  "type": "User",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 815104,
                "digest": "sha256:cdb7ecba99689798e240bfe601192c63ea952b6728a98df888da0674acbde4b5",
                "download_count": 0,
                "created_at": "2026-04-23 22:13:07 UTC",
                "updated_at": "2026-04-23 22:13:07 UTC",
                "browser_download_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/download/v1.13.2/jekyll-theme-profile-1.13.2.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/v1.13.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/v1.13.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Create releases in the downstream theme repo [#19](https://github.com/PrimerPages/primerpages-dev/pull/19)\r\n- Highlight the best matching nav item [#16](https://github.com/PrimerPages/primerpages-dev/pull/16)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.304.0 to 1.305.0 in /templates/primerpages-recommended/.github/workflows [#18](https://github.com/PrimerPages/primerpages-dev/pull/18)\r\n- Bump ruby/setup-ruby from 1.304.0 to 1.305.0 in /templates/primerpages-minimal/.github/workflows [#17](https://github.com/PrimerPages/primerpages-dev/pull/17)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/2.0.0",
            "id": 202143568,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4MDHdQ",
            "tag_name": "2.0.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 2.0.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-06-29 17:23:18 UTC",
            "updated_at": "2025-06-29 17:43:39 UTC",
            "published_at": "2025-06-29 17:43:39 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/2.0.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/2.0.0",
            "body": "# What’s Changed\r\n\r\n## :zap: Major\r\n\r\n* Modify to support Github pages remote theme (#384) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix docs layout, add debug (#385) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>6 changes</summary>\r\n\r\n* Bump athackst/htmlproofer-action from 0.3.2 to 0.4.0 (#387) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.229.0 to 1.245.0 (#383) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.228.0 to 1.229.0 (#369) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.222.0 to 1.228.0 (#368) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.221.0 to 1.222.0 (#363) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump athackst/htmlproofer-action from 0.3.1 to 0.3.2 (#362) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n</details>\r\n",
            "reactions": {
              "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/reactions",
              "total_count": 1,
              "+1": 0,
              "-1": 0,
              "laugh": 0,
              "hooray": 0,
              "confused": 0,
              "heart": 0,
              "rocket": 1,
              "eyes": 0
            },
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202118965",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202118965/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202118965/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.5",
            "id": 202118965,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4MDBc1",
            "tag_name": "1.12.5",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.12.5",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-24 21:27:58 UTC",
            "updated_at": "2025-02-24 21:28:10 UTC",
            "published_at": "2025-02-24 21:28:10 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.5",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.5",
            "body": "# What’s Changed\n\n## :bug: Bug Fixes\n\n* Fix check for github pages (#360) @athackst\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201960229",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201960229/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201960229/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.4",
            "id": 201960229,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4MCasl",
            "tag_name": "1.12.4",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.12.4",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-24 18:42:48 UTC",
            "updated_at": "2025-02-24 18:46:23 UTC",
            "published_at": "2025-02-24 18:46:23 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.4",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.4",
            "body": "# What’s Changed\n\n* Release v1.12.4 (#359) @athackst\n\n## :bug: Bug Fixes\n\n* Fix compatibility with github pages (#358) @athackst\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201958977",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201958977/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201958977/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.3",
            "id": 201958977,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4MCaZB",
            "tag_name": "1.12.3",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.12.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-24 06:41:54 UTC",
            "updated_at": "2025-02-24 06:42:05 UTC",
            "published_at": "2025-02-24 06:42:05 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.3",
            "body": "# What’s Changed\n\n## :toolbox: Maintenance\n\n* Reducing required github-metadata to 2.9 (#356) @athackst\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201602307",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201602307/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201602307/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.2",
            "id": 201602307,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4MBDUD",
            "tag_name": "1.12.2",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.12.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-24 05:01:14 UTC",
            "updated_at": "2025-02-24 05:01:27 UTC",
            "published_at": "2025-02-24 05:01:27 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.2",
            "body": "# What’s Changed\n\n* Release v1.12.2 (#355) @athackst\n* Update Gemfiles to rate limit GitHub calls (#354) @athackst\n\n## :toolbox: Maintenance\n\n* Add script to close stale releases to workflow (#353) @athackst\n\n## Dependency Updates\n\n* Bump peter-evans/create-pull-request from 5 to 7 (#352) @[dependabot[bot]](https://github.com/apps/dependabot)\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201595899",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201595899/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201595899/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.1",
            "id": 201595899,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4MBBv7",
            "tag_name": "1.12.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.12.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-21 07:26:51 UTC",
            "updated_at": "2025-02-21 07:27:02 UTC",
            "published_at": "2025-02-21 07:27:02 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.1",
            "body": "# What’s Changed\n\n## :bug: Bug Fixes\n\n* Add relative_url to docs dropdown nav links (#349) @athackst\n* Fix css theme colors (#348) @athackst\n* Fix custom header color (#347) @athackst\n* Fix post timeline card image to use relative_url (#346) @athackst\n\n## :memo: Documentation\n\n* Fix post descriptions (#350) @athackst\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/200778012",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/200778012/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/200778012/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.0",
            "id": 200778012,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4L96Ec",
            "tag_name": "1.12.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.12.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-21 06:32:16 UTC",
            "updated_at": "2025-02-21 06:32:28 UTC",
            "published_at": "2025-02-21 06:32:28 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.0",
            "body": "# What’s Changed\n\n## :rocket: New\n\n* Update primer css to 21.5.1 (#335) @athackst\n* Add option to set favicon from the config (#329) @athackst\n\n## :bug: Bug Fixes\n\n* Let include set social tooltip direction (#332) @athackst\n* Support links to tags from post timeline (#330) @athackst\n\n## :toolbox: Maintenance\n\n* Workflows use release token so other workflows are triggered (#344) @athackst\n* Cleanup masthead css (#343) @athackst\n* Fix lookup function for open release PRs (#340) @athackst\n* Update release draft workflow (#338) @athackst\n* Create release pr workflow (#336) @athackst\n* Set size of the masthead through include (#333) @athackst\n* Move unused images to demo so they're not included in theme (#331) @athackst\n* Cleanup unneeded lines in workflows (#328) @athackst\n* Remove bumping and add version determination to release workflow (#327) @athackst\n\n## :memo: Documentation\n\n* Update demo documentation (#326) @athackst\n\n## Dependency Updates\n\n* Bump ruby/setup-ruby from 1.214.0 to 1.221.0 (#325) @[dependabot[bot]](https://github.com/apps/dependabot)\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197472736",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197472736/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197472736/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.11.0",
            "id": 197472736,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4LxTHg",
            "tag_name": "1.11.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.11.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-02-15 02:20:07 UTC",
            "updated_at": "2025-02-17 07:54:56 UTC",
            "published_at": "2025-02-17 07:54:56 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.11.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.11.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add edit links to bottom of doc if edit_url is set (#317) @athackst\r\n* Make paginator navigation links an include file (#305) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix custom header sidebar so position is fixed (#324) @athackst\r\n* Polish up header colors, fix docs (#322) @athackst\r\n* Add color behind docs menu (#321) @athackst\r\n* Tag links to use relative_url (#320) @athackst\r\n* Fix all spelling words (#319) @athackst\r\n* Fix continue spelling in timeline card (#318) @athackst\r\n* Update timeline card to better handle continue and pagination (#315) @athackst\r\n* Fix all menus (#314) @athackst\r\n* Fix overlay menu in sidebar and stacked styles (#311) @athackst\r\n* Fix up how custom colors are handled, add header image (#310) @athackst\r\n* Update spacing between components (#306) @athackst\r\n* Fix formatting and improve encapsulation of link cards (#303) @athackst\r\n* Fix typo in post-timeline causing posts to not show up in profile layout (#302) @athackst\r\n* Refactor post-timeline to be more maintainable (#301) @athackst\r\n* Update the spacing of post-timeline card (#300) @athackst\r\n* Update default config (#293) @athackst\r\n* Update link card, linktree and profile to use include (#290) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Add tag index to root (#309) @athackst\r\n* Sort plugins (#308) @athackst\r\n* Remove unneeded spec files dir _plugins (#307) @athackst\r\n* Update page to include title if set and tag and category layouts to use (#304) @athackst\r\n* Add jekyll build and serve tasks (#295) @athackst\r\n* Remove incremental from serve script (#294) @athackst\r\n* Streamline vscode tasks and reduce dependencies (#289) @athackst\r\n* Update demo posts (#287) @athackst\r\n\r\n## :memo: Documentation\r\n\r\n* Add post for custom header (#323) @athackst\r\n* Add live demo to paginate timeline doc (#316) @athackst\r\n* Add octicons to links to demo pages (#299) @athackst\r\n* Update main readme file to link to site (#298) @athackst\r\n* Reorganize and update docs (#297) @athackst\r\n* Improve index and style pages for better preview (#296) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197072830",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197072830/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197072830/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.10.1",
            "id": 197072830,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4Lvxe-",
            "tag_name": "1.10.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.10.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-01-29 20:18:11 UTC",
            "updated_at": "2025-01-29 20:25:33 UTC",
            "published_at": "2025-01-29 20:25:33 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.10.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.10.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Assign user_img where it is used (#286) @athackst\r\n* Update post timeline to attempt to find index (#285) @athackst\r\n* Remove video from post header (#284) @athackst\r\n* Add default image to masthead (#283) @athackst\r\n* Remove options from default config that aren't needed (#282) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update devcontainer and vscode settings (#281) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump release-drafter/release-drafter from 6.0.0 to 6.1.0 (#278) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.207.0 to 1.214.0 (#280) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.10.0",
            "id": 168568137,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4KDCVJ",
            "tag_name": "1.10.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.10.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2025-01-10 19:00:01 UTC",
            "updated_at": "2025-01-27 04:21:42 UTC",
            "published_at": "2025-01-27 04:21:42 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.10.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.10.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Include _config.yml in gem file to provide a default config (#267) @athackst\r\n* Update docs layout and menu (#247) @athackst\r\n* Update linktree and linktree-card, make docs (#246) @athackst\r\n* Update post-timeline and add paginate_timeline layout (#245) @athackst\r\n* Add post-index include and update tag_index layout to use it (#244) @athackst\r\n* Add post-gallery include and update category_index layout to use it (#243) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix post timeline to work with post limit and reverse order (#248) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Drop deprecated ruby version 2.7 (#269) @athackst\r\n* Handle the case of empty public repositories (#268) @athackst\r\n* Update config so that a basic site can be built from main (#266) @athackst\r\n* Migrate from deprecated sass import (#264) @athackst\r\n* Add ports to devcontainer configuration (#242) @athackst\r\n* Update dev setup (#241) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>12 changes</summary>\r\n\r\n* Bump ruby/setup-ruby from 1.206.0 to 1.207.0 (#275) @dependabot\r\n* Bump athackst/htmlproofer-action from 0.3.0 to 0.3.1 (#274) @dependabot\r\n* Bump ruby/setup-ruby from 1.204.0 to 1.206.0 (#273) @dependabot\r\n* Bump ruby/setup-ruby from 1.203.0 to 1.204.0 (#265) @dependabot\r\n* Bump ruby/setup-ruby from 1.202.0 to 1.203.0 (#262) @dependabot\r\n* Bump ruby/setup-ruby from 1.201.0 to 1.202.0 (#261) @dependabot\r\n* Bump ruby/setup-ruby from 1.200.0 to 1.201.0 (#260) @dependabot\r\n* Bump ruby/setup-ruby from 1.199.0 to 1.200.0 (#259) @dependabot\r\n* Bump ruby/setup-ruby from 1.197.0 to 1.199.0 (#258) @dependabot\r\n* Bump ruby/setup-ruby from 1.196.0 to 1.197.0 (#256) @dependabot\r\n* Bump ruby/setup-ruby from 1.191.0 to 1.196.0 (#255) @dependabot\r\n* Bump ruby/setup-ruby from 1.190.0 to 1.191.0 (#250) @dependabot\r\n</details>\r\n",
            "reactions": {
              "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137/reactions",
              "total_count": 1,
              "+1": 0,
              "-1": 0,
              "laugh": 0,
              "hooray": 1,
              "confused": 0,
              "heart": 0,
              "rocket": 0,
              "eyes": 0
            },
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/139745225",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/139745225/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/139745225/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.9.0",
            "id": 139745225,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4IVFfJ",
            "tag_name": "1.9.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.9.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2024-08-03 04:43:31 UTC",
            "updated_at": "2024-08-03 04:48:41 UTC",
            "published_at": "2024-08-03 04:48:41 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.9.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.9.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Replace home with profile layout (#220) @athackst\r\n* Fix documentation layout and add docs (#219) @athackst\r\n* Add ability to set light and dark themes by name (#218) @athackst\r\n* Add video as heading image if defined (#217) @athackst\r\n* Add support for jekyll-category-pages plugin (#216) @athackst\r\n* Add class to masthead to adjust the circle badge size (#215) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix category_layout.html (#240) @athackst\r\n* Fix relative links and layouts page (#239) @athackst\r\n* Fix docs urls (#238) @athackst\r\n* Add rake to gemfile (#206) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Add local path to post create command (#214) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>15 changes</summary>\r\n\r\n* Bump ruby/setup-ruby from 1.188.0 to 1.190.0 (#237) @dependabot\r\n* Bump ruby/setup-ruby from 1.187.0 to 1.188.0 (#236) @dependabot\r\n* Bump ruby/setup-ruby from 1.184.0 to 1.187.0 (#235) @dependabot\r\n* Bump ruby/setup-ruby from 1.183.0 to 1.184.0 (#232) @dependabot\r\n* Bump ruby/setup-ruby from 1.180.0 to 1.183.0 (#231) @dependabot\r\n* Bump ruby/setup-ruby from 1.179.0 to 1.180.0 (#227) @dependabot\r\n* Bump ruby/setup-ruby from 1.178.0 to 1.179.0 (#225) @dependabot\r\n* Bump ruby/setup-ruby from 1.175.1 to 1.178.0 (#224) @dependabot\r\n* Bump ruby/setup-ruby from 1.173.0 to 1.175.1 (#213) @dependabot\r\n* Bump actions/configure-pages from 4 to 5 (#210) @dependabot\r\n* Bump ruby/setup-ruby from 1.172.0 to 1.173.0 (#209) @dependabot\r\n* Bump ruby/setup-ruby from 1.171.0 to 1.172.0 (#208) @dependabot\r\n* Bump TimonVS/pr-labeler-action from 4 to 5 (#207) @dependabot\r\n* Bump ruby/setup-ruby from 1.162.0 to 1.171.0 (#204) @dependabot\r\n* Bump release-drafter/release-drafter from 5.25.0 to 6.0.0 (#205) @dependabot\r\n</details>\r\n",
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134843428",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134843428/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134843428/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.6",
            "id": 134843428,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4ICYwk",
            "tag_name": "1.8.6",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.6",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-22 22:54:43 UTC",
            "updated_at": "2023-12-22 22:56:41 UTC",
            "published_at": "2023-12-22 22:56:39 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.6",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.6",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Update cookie to be strict (#194) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update jekyll site deps (#195) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134395615",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134395615/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134395615/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.5",
            "id": 134395615,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4IArbf",
            "tag_name": "1.8.5",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.5",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-20 21:26:59 UTC",
            "updated_at": "2023-12-20 21:33:45 UTC",
            "published_at": "2023-12-20 21:33:44 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.5",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.5",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix timeline video size (#189) @athackst\r\n* Fix the height of videos in timeline card (#186) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump actions/deploy-pages from 3 to 4 (#187) @dependabot\r\n* Bump actions/upload-pages-artifact from 2 to 3 (#188) @dependabot\r\n* Revert \"Bump actions/upload-pages-artifact from 2 to 3\" (#191) @athackst\r\n* Revert \"Bump actions/deploy-pages from 3 to 4\" (#190) @athackst\r\n",
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134384290",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134384290/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134384290/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.4",
            "id": 134384290,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4IAoqi",
            "tag_name": "1.8.4",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.4",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-18 21:08:39 UTC",
            "updated_at": "2023-12-18 21:27:08 UTC",
            "published_at": "2023-12-18 21:27:07 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.4",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.4",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove Toolbar class from landing page (#185) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/133456177",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/133456177/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/133456177/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.3",
            "id": 133456177,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4H9GEx",
            "tag_name": "1.8.3",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-15 20:50:39 UTC",
            "updated_at": "2023-12-17 21:48:25 UTC",
            "published_at": "2023-12-17 21:48:24 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove duplicate title tag (#183) @athackst\r\n* Fix appearance of video on mobile in timeline (#181) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Rename 'example' to 'demo' (#184) @athackst\r\n* Add data-proofer-ignore to socials (#182) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump ruby/setup-ruby from 1.161.0 to 1.162.0 (#180) @dependabot\r\n",
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132879125",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132879125/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132879125/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.2",
            "id": 132879125,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4H65MV",
            "tag_name": "1.8.2",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-07 08:46:09 UTC",
            "updated_at": "2023-12-07 17:53:09 UTC",
            "published_at": "2023-12-07 17:53:08 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove height-full from page (#179) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump actions/deploy-pages from 2 to 3 (#177) @dependabot\r\n* Bump actions/configure-pages from 3 to 4 (#176) @dependabot\r\n",
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132353188",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132353188/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132353188/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.1",
            "id": 132353188,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4H44yk",
            "tag_name": "1.8.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-03 05:46:17 UTC",
            "updated_at": "2023-12-03 05:49:29 UTC",
            "published_at": "2023-12-03 05:49:28 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Add kramdown parser to dependencies (#175) @athackst\r\n* Fix post print styles (#174) @athackst\r\n* Fix location of social in footer to be right justified (#173) @athackst\r\n* Fix location of the toggle in the landing layout (#172) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131597155",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131597155/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131597155/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.0",
            "id": 131597155,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4H2ANj",
            "tag_name": "1.8.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.8.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-12-01 22:02:56 UTC",
            "updated_at": "2023-12-01 22:21:33 UTC",
            "published_at": "2023-12-01 22:21:32 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add docs layout (#169) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix docs menu (#171) @athackst\r\n* Fix tag link (#166) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131491741",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131491741/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131491741/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.7.2",
            "id": 131491741,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4H1med",
            "tag_name": "1.7.2",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.7.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-27 08:01:20 UTC",
            "updated_at": "2023-11-27 08:05:01 UTC",
            "published_at": "2023-11-27 08:05:00 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.7.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.7.2",
            "body": "# What’s Changed\r\n\r\n* Update nav so that paths highlight when active (#160) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Only show related posts if the size is >0 (#164) @athackst\r\n* Add div to extend page to full height of screen (#163) @athackst\r\n* Use either the excerpt or the description in post-card (#162) @athackst\r\n* Fix formatting of linktree layout and allow defining links per page (#159) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update style/formatting (#165) @athackst\r\n* Fix permissions of jekyll workflow (#161) @athackst\r\n\r\n## :memo: Documentation\r\n\r\n* Add appbar to readme (#158) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131393909",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131393909/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131393909/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.7.1",
            "id": 131393909,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4H1Ol1",
            "tag_name": "1.7.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.7.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-26 16:26:09 UTC",
            "updated_at": "2023-11-26 16:29:43 UTC",
            "published_at": "2023-11-26 16:29:42 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.7.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.7.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove unneeded dependencies from gemspec and refactor (#157) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130831816",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130831816/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130831816/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.7.0",
            "id": 130831816,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4HzFXI",
            "tag_name": "1.7.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.7.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-23 02:17:24 UTC",
            "updated_at": "2023-11-23 02:17:52 UTC",
            "published_at": "2023-11-23 02:17:51 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.7.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.7.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add related posts to post page (#152) @athackst\r\n* Add tags to post layout and add tag page (#151) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix share link image for twitter->x (#154) @athackst\r\n* Fix toc so it doesn't improperly show on pages (#153) @athackst\r\n* Fix feature card (#150) @athackst\r\n* Update posts_limit to be able to be defined in page (#149) @athackst\r\n* Check for content before displaying continue in timeline block (#148) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Improve readability of comments in config (#155) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130711371",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130711371/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130711371/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.6.1",
            "id": 130711371,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4Hyn9L",
            "tag_name": "1.6.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.6.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-21 17:47:54 UTC",
            "updated_at": "2023-11-21 17:52:22 UTC",
            "published_at": "2023-11-21 17:52:21 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.6.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.6.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Move page style elements to .Page (#147) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130699545",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130699545/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130699545/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.6.0",
            "id": 130699545,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4HylEZ",
            "tag_name": "1.6.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.6.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-21 17:28:35 UTC",
            "updated_at": "2023-11-21 17:30:53 UTC",
            "published_at": "2023-11-21 17:30:52 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.6.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.6.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add new landing page (#145) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix formatting (#141) @athackst\r\n* Use either video or image in the post timeline (#140) @athackst\r\n* For posts use image for post or site image (#139) @athackst\r\n* set user_metadata from site only (#138) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Improve consistency in workflow names (#146) @athackst\r\n* Add permissions to bump_version workflow (#142) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/129872816",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/129872816/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/129872816/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.5.0",
            "id": 129872816,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4HvbOw",
            "tag_name": "1.5.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.5.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-21 06:01:22 UTC",
            "updated_at": "2023-11-21 06:04:01 UTC",
            "published_at": "2023-11-21 06:03:59 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.5.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.5.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add repositories layout and test page (#133) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix stacked header top margin (#134) @athackst\r\n* Fix minor formatting issues (#132) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update bump version workflow (#137) @athackst\r\n* Rename pr labeler workflow (#136) @athackst\r\n* Rename workflow publish_docs to jekyll_site (#135) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/119752951",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/119752951/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/119752951/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.4.0",
            "id": 119752951,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4HI0j3",
            "tag_name": "1.4.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.4.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-11-16 22:21:52 UTC",
            "updated_at": "2023-11-16 22:34:12 UTC",
            "published_at": "2023-11-16 22:34:11 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.4.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.4.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add profile layout (#109) @athackst\r\n* Add linktree example and custom css for page (#96) @athackst\r\n* Update blog post style to match github blog (#94) @athackst\r\n* Redesign and add appbar option (#93) @athackst\r\n* Update the look of posts on paginate (#92) @athackst\r\n* Add footer (#83) @athackst\r\n* Allow post timeline to grab icon from type (#71) @athackst\r\n* Add print styles for clean prints of pages (#70) @athackst\r\n* Add menu for nav dropdown on mobile (#69) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Update stacked layout on mobile to show the header (#131) @athackst\r\n* Another try to fix the circle badge (#130) @athackst\r\n* Another try to fix circle badge in masthead (#129) @athackst\r\n* Fix various padding issues (#126) @athackst\r\n* Add padding to masthead image so border doesn't get cut off (#125) @athackst\r\n* Update anchor link height on resize (#123) @athackst\r\n* Remove gutter-condensed from posts (#122) @athackst\r\n* Fix padding for masthead (#121) @athackst\r\n* Fix timeline anchor to update on resize (#120) @athackst\r\n* Improve linkcard formatting (#119) @athackst\r\n* Change layout to of Profile to Page (#118) @athackst\r\n* Change tooltip position of mini-repo-info card to (#117) @athackst\r\n* Use  image tag instead of social_image for SEO (#115) @athackst\r\n* Move from gutter-condensed to p-responsive (#114) @athackst\r\n* Attempt to fix nav overlay height for iphone - emulators not working (#113) @athackst\r\n* Simplify nav overlay (#112) @athackst\r\n* Switch to the SEO plugin (#111) @athackst\r\n* Fix sidebar, add collapse option (#110) @athackst\r\n* Fix minor formatting errors (#108) @athackst\r\n* Fix toc capture and convert README to post (#107) @athackst\r\n* Fix linktree width when viewing on mobile (#106) @athackst\r\n* Add additional padding to overlay to handle iphone screens better (#105) @athackst\r\n* Add script to calculate sticky position for timeline (#103) @athackst\r\n* Rename and make post timeline look more like github blog (#91) @athackst\r\n* Fix centering on masthead (#90) @athackst\r\n* Fix instagram and threads social icons (#87) @athackst\r\n* Fix footer formatting (#86) @athackst\r\n* Fix links to have a better max width (#84) @athackst\r\n* Fix toggle location so it doesn't cause scrolling (#82) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update profile page name in config (#124) @athackst\r\n* Add default container extensions to devcontainer (#116) @athackst\r\n* Cleanup global assigns (#104) @athackst\r\n* Update link thumbnails (#95) @athackst\r\n* Add Link css to link-card for easier overriding (#89) @athackst\r\n* Move scripts to assets/js (#88) @athackst\r\n* Rename header.html to head to better classify contents (#77) @athackst\r\n\r\n## :memo: Documentation\r\n\r\n* Update contributing documentation (#128) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>10 changes</summary>\r\n\r\n* Bump ruby/setup-ruby from 1.160.0 to 1.161.0 (#127) @dependabot\r\n* Bump ruby/setup-ruby from 1.159.0 to 1.160.0 (#85) @dependabot\r\n* Bump ruby/setup-ruby from 1.158.0 to 1.159.0 (#81) @dependabot\r\n* Bump ruby/setup-ruby from 1.156.0 to 1.158.0 (#80) @dependabot\r\n* Bump release-drafter/release-drafter from 5.24.0 to 5.25.0 (#78) @dependabot\r\n* Bump ruby/setup-ruby from 1.155.0 to 1.156.0 (#76) @dependabot\r\n* Bump ruby/setup-ruby from 1.154.0 to 1.155.0 (#75) @dependabot\r\n* Bump ruby/setup-ruby from 1.153.0 to 1.154.0 (#74) @dependabot\r\n* Bump ruby/setup-ruby from 1.152.0 to 1.153.0 (#73) @dependabot\r\n* Bump actions/checkout from 3 to 4 (#72) @dependabot\r\n</details>\r\n",
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/118062753",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/118062753/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/118062753/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.3.1",
            "id": 118062753,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4HCX6h",
            "tag_name": "1.3.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.3.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-31 02:27:38 UTC",
            "updated_at": "2023-09-04 00:24:59 UTC",
            "published_at": "2023-09-04 00:24:59 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.3.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.3.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Standardize theme toggle placement across all styles (#68) @athackst\r\n* Fix typos in meta tags (#65) @athackst\r\n* Increase topbar container size to xl (#64) @athackst\r\n* Fix margin to be padding so overlay works with background on header (#63) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Clean up assigns in layouts and includes (#67) @athackst\r\n* Cleanup assignments in header (#66) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.3.0",
            "id": 117925125,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4HB2UF",
            "tag_name": "1.3.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.3.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-20 21:09:19 UTC",
            "updated_at": "2023-08-20 21:09:58 UTC",
            "published_at": "2023-08-20 21:09:57 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.3.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.3.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add optional header custom styling (#60) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Add required ruby version (#62) @athackst\r\n* Update syntax highlighting to handle line numbers (#61) @athackst\r\n* Fix typo in accessing background.overlay (#59) @athackst\r\n",
            "reactions": {
              "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125/reactions",
              "total_count": 1,
              "+1": 0,
              "-1": 0,
              "laugh": 0,
              "hooray": 1,
              "confused": 0,
              "heart": 0,
              "rocket": 0,
              "eyes": 0
            },
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117226605",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117226605/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117226605/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.2.0",
            "id": 117226605,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G_Lxt",
            "tag_name": "1.2.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.2.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-14 20:49:20 UTC",
            "updated_at": "2023-08-14 20:50:45 UTC",
            "published_at": "2023-08-14 20:50:43 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.2.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.2.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Set color of profile from _config.yml (#57) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116980065",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116980065/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116980065/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.1.0",
            "id": 116980065,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G-Plh",
            "tag_name": "1.1.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-14 02:34:44 UTC",
            "updated_at": "2023-08-14 02:41:56 UTC",
            "published_at": "2023-08-14 02:41:55 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.1.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add tooltips to repo-info and color toggle (#55) @athackst\r\n* Add mail and github to social links (#54) @athackst\r\n* Add general overlay option (#53) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Increase spacing between toggle and user image (#56) @athackst\r\n* Fix minor spacing issues (#52) @athackst\r\n* Truncate previous and next post titles (#51) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116155614",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116155614/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116155614/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.0.0",
            "id": 116155614,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G7GTe",
            "tag_name": "1.0.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 1.0.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-13 05:53:22 UTC",
            "updated_at": "2023-08-13 06:00:02 UTC",
            "published_at": "2023-08-13 06:00:01 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.0.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.0.0",
            "body": "# What’s Changed\r\n\r\n## :zap: Breaking\r\n\r\n* Update site social card image to 'social_image' (#45) @athackst\r\n* Rename link urls and images to 'url' and 'thumbnail' (#43) @athackst\r\n\r\n## :rocket: New\r\n\r\n* Add mini repo card and fix up default layouts (#48) @athackst\r\n* Update site social card image to 'social_image' (#45) @athackst\r\n* Add nav option for website (#44) @athackst\r\n* Add ability to set social icon colors from config (#42) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix spelling (#50) @athackst\r\n* Make nav items use relative-url (#49) @athackst\r\n* Fix formatting issue created by d-flex for mobile (#47) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Move images to media folder so gem doesn't include them (#46) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114765901",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114765901/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114765901/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.3.0",
            "id": 114765901,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G1zBN",
            "tag_name": "0.3.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.3.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-10 06:36:07 UTC",
            "updated_at": "2023-08-10 06:43:18 UTC",
            "published_at": "2023-08-10 06:43:17 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.3.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.3.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add background option (#40) @athackst\r\n* Add social media support for threads and x (#36) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix breadcrumbs (#35) @athackst\r\n* Update sidebar spacing (#34) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Fix/success check (#39) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114600581",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114600581/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114600581/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.5",
            "id": 114600581,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G1KqF",
            "tag_name": "0.2.5",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.2.5",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-08-01 06:55:57 UTC",
            "updated_at": "2023-08-01 07:07:58 UTC",
            "published_at": "2023-08-01 07:07:57 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.5",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.5",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Make canonical link from absolute_url (#31) @athackst\r\n* Add alt to social images (#30) @athackst\r\n* Fix masthead name so that it will wrap if needed (#29) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114574234",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114574234/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114574234/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.4",
            "id": 114574234,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G1EOa",
            "tag_name": "0.2.4",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.2.4",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-07-31 22:58:24 UTC",
            "updated_at": "2023-07-31 23:04:36 UTC",
            "published_at": "2023-07-31 23:04:35 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.4",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.4",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Append index.html to the meta urls seems to fix twitter cards. (#28) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump actions/upload-pages-artifact from 1 to 2 (#27) @dependabot\r\n",
            "mentions_count": 2
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114438398",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114438398/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114438398/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.3",
            "id": 114438398,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G0jD-",
            "tag_name": "0.2.3",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.2.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-07-31 06:32:37 UTC",
            "updated_at": "2023-07-31 06:35:33 UTC",
            "published_at": "2023-07-31 06:35:32 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix folder URLs for meta and nav (#26) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114414457",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114414457/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114414457/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.2",
            "id": 114414457,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G0dN5",
            "tag_name": "0.2.2",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.2.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-07-30 23:04:04 UTC",
            "updated_at": "2023-07-30 23:13:25 UTC",
            "published_at": "2023-07-30 23:13:24 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix default permalink to include index so twitter cards will work. (#25) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114355894",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114355894/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114355894/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.1",
            "id": 114355894,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4G0O62",
            "tag_name": "0.2.1",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.2.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-07-30 03:00:04 UTC",
            "updated_at": "2023-07-30 15:19:21 UTC",
            "published_at": "2023-07-30 15:19:20 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Meta from an autogenerator to fix typos. (#24) @athackst\r\n* Fix twitter cards (#23) @athackst\r\n* Chanage type to website (#22) @athackst\r\n* Try changing meta type to object (#21) @athackst\r\n* Fix twitter image meta (#20) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114059595",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114059595/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114059595/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.0",
            "id": 114059595,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4GzGlL",
            "tag_name": "0.2.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.2.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-07-29 23:22:14 UTC",
            "updated_at": "2023-07-29 23:28:03 UTC",
            "published_at": "2023-07-29 23:28:02 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.0",
            "body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add twitter card to header (#18) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Use absoulte urls in meta data (#19) @athackst\r\n* Fix social image (#17) @athackst\r\n* Fix social and header links (#16) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update docs workflow to include 'canonical' jekyll build->deploy (#15) @athackst\r\n* Add release task to devcontainer (#14) @athackst\r\n",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/113942693",
            "assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/113942693/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/113942693/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.1.0",
            "id": 113942693,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOJ8Digc4GyqCl",
            "tag_name": "0.1.0",
            "target_commitish": "refs/heads/main",
            "name": "Release 0.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2023-07-28 19:29:04 UTC",
            "updated_at": "2023-07-28 19:34:51 UTC",
            "published_at": "2023-07-28 19:34:50 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.1.0",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Add logic to handle paginate from assets so defaults will work (#13) @athackst\r\n* Fix nav links to be relative (#12) @athackst\r\n* Fix version spacing. (#11) @athackst\r\n* Fix page links (#10) @athackst\r\n* Update paginate links to be relative_url (#8) @athackst\r\n* Fix workflow files. (#6) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Fix bump spacing (#9) @athackst\r\n* Update to release token (#7) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump release-drafter/release-drafter from 5.20.0 to 5.24.0 (#3) @dependabot\r\n* Bump TimonVS/pr-labeler-action from 3.1.0 to 4.1.1 (#2) @dependabot\r\n",
            "mentions_count": 2
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 293
          },
          {
            "login": "dependabot[bot]",
            "id": 49699333,
            "node_id": "MDM6Qm90NDk2OTkzMzM=",
            "avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/dependabot%5Bbot%5D",
            "html_url": "https://github.com/apps/dependabot",
            "followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
            "following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
            "gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
            "organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
            "repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
            "events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
            "received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
            "type": "Bot",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 59
          },
          {
            "login": "actions-user",
            "id": 65916846,
            "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
            "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/actions-user",
            "html_url": "https://github.com/actions-user",
            "followers_url": "https://api.github.com/users/actions-user/followers",
            "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
            "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
            "organizations_url": "https://api.github.com/users/actions-user/orgs",
            "repos_url": "https://api.github.com/users/actions-user/repos",
            "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
            "received_events_url": "https://api.github.com/users/actions-user/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 21
          }
        ]
      },
      {
        "id": 1213986531,
        "node_id": "R_kgDOSFv24w",
        "name": "primerpages-dev",
        "full_name": "PrimerPages/primerpages-dev",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/primerpages-dev",
        "description": "PrimerPages mono-repo",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/primerpages-dev",
        "forks_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/deployments",
        "created_at": "2026-04-18 01:34:25 UTC",
        "updated_at": "2026-05-12 17:53:49 UTC",
        "pushed_at": "2026-05-12 18:16:26 UTC",
        "git_url": "git://github.com/PrimerPages/primerpages-dev.git",
        "ssh_url": "git@github.com:PrimerPages/primerpages-dev.git",
        "clone_url": "https://github.com/PrimerPages/primerpages-dev.git",
        "svn_url": "https://github.com/PrimerPages/primerpages-dev",
        "homepage": "https://www.primerpages.com",
        "size": 17923,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "HTML",
        "has_issues": true,
        "has_projects": true,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "other",
          "name": "Other",
          "spdx_id": "NOASSERTION",
          "url": null,
          "node_id": "MDc6TGljZW5zZTA="
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/318682811",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/318682811/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/318682811/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v2.1.1",
            "id": 318682811,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484S_ra7",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-12 17:53:44 UTC",
            "updated_at": "2026-05-12 18:16:26 UTC",
            "published_at": "2026-05-12 18:16:26 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/314205363",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/314205363/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/314205363/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v2.1.0",
            "id": 314205363,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484SumSz",
            "tag_name": "v2.1.0",
            "target_commitish": "main",
            "name": "Release v2.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-06 20:48:10 UTC",
            "updated_at": "2026-05-06 21:45:34 UTC",
            "published_at": "2026-05-06 21:45:34 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v2.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v2.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/313517916",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/313517916/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/313517916/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v2.0.3",
            "id": 313517916,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484Sr-dc",
            "tag_name": "v2.0.3",
            "target_commitish": "main",
            "name": "Release v2.0.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-25 04:55:28 UTC",
            "updated_at": "2026-04-25 04:56:04 UTC",
            "published_at": "2026-04-25 04:56:04 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v2.0.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v2.0.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/312974393",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/312974393/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/312974393/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v2.0.2",
            "id": 312974393,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484Sp5w5",
            "tag_name": "v2.0.2",
            "target_commitish": "main",
            "name": "Release v2.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 21:00:31 UTC",
            "updated_at": "2026-04-24 21:04:12 UTC",
            "published_at": "2026-04-24 21:04:12 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v2.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v2.0.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/312076914",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/312076914/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/312076914/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v1.13.2",
            "id": 312076914,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484Smepy",
            "tag_name": "v1.13.2",
            "target_commitish": "main",
            "name": "Release v1.13.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-23 22:09:22 UTC",
            "updated_at": "2026-04-23 22:12:26 UTC",
            "published_at": "2026-04-23 22:12:26 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v1.13.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v1.13.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Create releases in the downstream theme repo [#19](https://github.com/PrimerPages/primerpages-dev/pull/19)\r\n- Highlight the best matching nav item [#16](https://github.com/PrimerPages/primerpages-dev/pull/16)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.304.0 to 1.305.0 in /templates/primerpages-recommended/.github/workflows [#18](https://github.com/PrimerPages/primerpages-dev/pull/18)\r\n- Bump ruby/setup-ruby from 1.304.0 to 1.305.0 in /templates/primerpages-minimal/.github/workflows [#17](https://github.com/PrimerPages/primerpages-dev/pull/17)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/312073085",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/312073085/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/312073085/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v1.13.1",
            "id": 312073085,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484Smdt9",
            "tag_name": "v1.13.1",
            "target_commitish": "main",
            "name": "Release v1.13.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-22 06:59:07 UTC",
            "updated_at": "2026-04-22 07:01:20 UTC",
            "published_at": "2026-04-22 07:00:23 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/assets/402225926",
                "id": 402225926,
                "node_id": "RA_kwDOSFv2484X-XsG",
                "name": "jekyll-theme-profile-1.13.1.gem",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 814592,
                "digest": "sha256:a9fefd821f73a3343982bfccf8082bfeed0daf8fd8130f3fd69833d299dea548",
                "download_count": 0,
                "created_at": "2026-04-22 07:01:19 UTC",
                "updated_at": "2026-04-22 07:01:20 UTC",
                "browser_download_url": "https://github.com/PrimerPages/primerpages-dev/releases/download/v1.13.1/jekyll-theme-profile-1.13.1.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v1.13.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v1.13.1",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Publish gems without Rake [#15](https://github.com/PrimerPages/primerpages-dev/pull/15)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/311943419",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/311943419/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-dev/releases/311943419/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-dev/releases/tag/v1.13.0",
            "id": 311943419,
            "author": {
              "login": "github-actions[bot]",
              "id": 41898282,
              "node_id": "MDM6Qm90NDE4OTgyODI=",
              "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/github-actions%5Bbot%5D",
              "html_url": "https://github.com/apps/github-actions",
              "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
              "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
              "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
              "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
              "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
              "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
              "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
              "type": "Bot",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSFv2484Sl-D7",
            "tag_name": "v1.13.0",
            "target_commitish": "main",
            "name": "Release v1.13.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-22 03:52:38 UTC",
            "updated_at": "2026-04-22 04:18:49 UTC",
            "published_at": "2026-04-22 03:57:55 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/primerpages-dev/releases/assets/402142110",
                "id": 402142110,
                "node_id": "RA_kwDOSFv2484X-DOe",
                "name": "jekyll-theme-profile-1.13.0.gem",
                "label": "",
                "uploader": {
                  "login": "athackst",
                  "id": 6098197,
                  "node_id": "MDQ6VXNlcjYwOTgxOTc=",
                  "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/athackst",
                  "html_url": "https://github.com/athackst",
                  "followers_url": "https://api.github.com/users/athackst/followers",
                  "following_url": "https://api.github.com/users/athackst/following{/other_user}",
                  "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
                  "organizations_url": "https://api.github.com/users/athackst/orgs",
                  "repos_url": "https://api.github.com/users/athackst/repos",
                  "events_url": "https://api.github.com/users/athackst/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/athackst/received_events",
                  "type": "User",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/x-tar",
                "state": "uploaded",
                "size": 814592,
                "digest": "sha256:b2a22e1321bce0e91e6947f80a10b5549148e923c33fb6901e5aa6951111855e",
                "download_count": 0,
                "created_at": "2026-04-22 04:18:49 UTC",
                "updated_at": "2026-04-22 04:18:49 UTC",
                "browser_download_url": "https://github.com/PrimerPages/primerpages-dev/releases/download/v1.13.0/jekyll-theme-profile-1.13.0.gem"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/tarball/v1.13.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-dev/zipball/v1.13.0",
            "body": "# What’s Changed\n\n## :rocket: New\n\n- Split release drafting and version bump into separate workflows [#7](https://github.com/PrimerPages/primerpages-dev/pull/7)\n- Wait for site workflow results in all sync jobs [#6](https://github.com/PrimerPages/primerpages-dev/pull/6)\n\n## :toolbox: Maintenance\n\n- Document monorepo output model [#13](https://github.com/PrimerPages/primerpages-dev/pull/13)\n- Update release draft workflow [#12](https://github.com/PrimerPages/primerpages-dev/pull/12)\n- Update docs to remove stale refs [#8](https://github.com/PrimerPages/primerpages-dev/pull/8)\n\n## Dependency Updates\n\n<details>\n<summary>4 changes</summary>\n\n- Bump ruby/setup-ruby from 1.302.0 to 1.304.0 in /templates/primerpages-recommended/.github/workflows [#11](https://github.com/PrimerPages/primerpages-dev/pull/11)\n- Bump ruby/setup-ruby from 1.302.0 to 1.304.0 in /templates/primerpages-minimal/.github/workflows [#10](https://github.com/PrimerPages/primerpages-dev/pull/10)\n- Unpin jekyll-github-metadata across project Gemfiles [#9](https://github.com/PrimerPages/primerpages-dev/pull/9)\n- Update dotenv requirement from ~> 2.7 to ~> 3.2 in /site [#3](https://github.com/PrimerPages/primerpages-dev/pull/3)\n</details>\n"
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 60
          },
          {
            "login": "dependabot[bot]",
            "id": 49699333,
            "node_id": "MDM6Qm90NDk2OTkzMzM=",
            "avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/dependabot%5Bbot%5D",
            "html_url": "https://github.com/apps/dependabot",
            "followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
            "following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
            "gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
            "organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
            "repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
            "events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
            "received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
            "type": "Bot",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 10
          }
        ]
      },
      {
        "id": 1236824009,
        "node_id": "R_kgDOSbhvyQ",
        "name": "primerpages-docs",
        "full_name": "PrimerPages/primerpages-docs",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/primerpages-docs",
        "description": "Template repository for minimal documentation setup",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/primerpages-docs",
        "forks_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/deployments",
        "created_at": "2026-05-12 15:54:14 UTC",
        "updated_at": "2026-05-12 17:59:29 UTC",
        "pushed_at": "2026-05-12 18:17:32 UTC",
        "git_url": "git://github.com/PrimerPages/primerpages-docs.git",
        "ssh_url": "git@github.com:PrimerPages/primerpages-docs.git",
        "clone_url": "https://github.com/PrimerPages/primerpages-docs.git",
        "svn_url": "https://github.com/PrimerPages/primerpages-docs",
        "homepage": "https://www.primerpages.com/primerpages-docs/",
        "size": 0,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Python",
        "has_issues": false,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": null,
        "allow_forking": true,
        "is_template": true,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-docs/releases/321329769",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/releases/321329769/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-docs/releases/321329769/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-docs/releases/tag/v2.1.1",
            "id": 321329769,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSbhvyc4TJxpp",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-12 17:54:01 UTC",
            "updated_at": "2026-05-12 18:17:32 UTC",
            "published_at": "2026-05-12 18:17:32 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-docs/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 1
          },
          {
            "login": "actions-user",
            "id": 65916846,
            "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
            "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/actions-user",
            "html_url": "https://github.com/actions-user",
            "followers_url": "https://api.github.com/users/actions-user/followers",
            "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
            "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
            "organizations_url": "https://api.github.com/users/actions-user/orgs",
            "repos_url": "https://api.github.com/users/actions-user/repos",
            "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
            "received_events_url": "https://api.github.com/users/actions-user/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 1
          }
        ]
      },
      {
        "id": 985944233,
        "node_id": "R_kgDOOsRQqQ",
        "name": "primerpages-gh-pages",
        "full_name": "PrimerPages/primerpages-gh-pages",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/primerpages-gh-pages",
        "description": null,
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages",
        "forks_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/deployments",
        "created_at": "2025-05-18 20:57:27 UTC",
        "updated_at": "2026-04-29 23:39:17 UTC",
        "pushed_at": "2026-05-12 18:17:38 UTC",
        "git_url": "git://github.com/PrimerPages/primerpages-gh-pages.git",
        "ssh_url": "git@github.com:PrimerPages/primerpages-gh-pages.git",
        "clone_url": "https://github.com/PrimerPages/primerpages-gh-pages.git",
        "svn_url": "https://github.com/PrimerPages/primerpages-gh-pages",
        "homepage": "https://www.primerpages.com/primerpages-gh-pages/",
        "size": 13533,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "HTML",
        "has_issues": false,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "collaborators_only",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/321329818",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/321329818/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-gh-pages/releases/321329818/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-gh-pages/releases/tag/v2.1.1",
            "id": 321329818,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOOsRQqc4TJxqa",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-29 23:39:13 UTC",
            "updated_at": "2026-05-12 18:17:39 UTC",
            "published_at": "2026-05-12 18:17:39 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/318651479",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/318651479/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-gh-pages/releases/318651479/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-gh-pages/releases/tag/v2.1.0",
            "id": 318651479,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOOsRQqc4S_jxX",
            "tag_name": "v2.1.0",
            "target_commitish": "main",
            "name": "Release v2.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-29 23:39:13 UTC",
            "updated_at": "2026-05-06 21:46:38 UTC",
            "published_at": "2026-05-06 21:46:38 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/tarball/v2.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/zipball/v2.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/313521362",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/313521362/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-gh-pages/releases/313521362/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-gh-pages/releases/tag/v2.0.3",
            "id": 313521362,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOOsRQqc4Sr_TS",
            "tag_name": "v2.0.3",
            "target_commitish": "main",
            "name": "Release v2.0.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:40:24 UTC",
            "updated_at": "2026-04-25 04:56:48 UTC",
            "published_at": "2026-04-25 04:56:48 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/tarball/v2.0.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/zipball/v2.0.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/313422499",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/releases/313422499/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-gh-pages/releases/313422499/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-gh-pages/releases/tag/v2.0.2",
            "id": 313422499,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOOsRQqc4SrnKj",
            "tag_name": "v2.0.2",
            "target_commitish": "main",
            "name": "Release v2.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:40:24 UTC",
            "updated_at": "2026-04-24 21:04:44 UTC",
            "published_at": "2026-04-24 21:04:44 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/tarball/v2.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-gh-pages/zipball/v2.0.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n\n"
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 19
          },
          {
            "login": "actions-user",
            "id": 65916846,
            "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
            "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/actions-user",
            "html_url": "https://github.com/actions-user",
            "followers_url": "https://api.github.com/users/actions-user/followers",
            "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
            "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
            "organizations_url": "https://api.github.com/users/actions-user/orgs",
            "repos_url": "https://api.github.com/users/actions-user/repos",
            "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
            "received_events_url": "https://api.github.com/users/actions-user/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 6
          }
        ]
      },
      {
        "id": 1211953612,
        "node_id": "R_kgDOSDzxzA",
        "name": "primerpages-minimal",
        "full_name": "PrimerPages/primerpages-minimal",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/primerpages-minimal",
        "description": "Template repository for minimal primer pages setup",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/primerpages-minimal",
        "forks_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/deployments",
        "created_at": "2026-04-15 23:19:40 UTC",
        "updated_at": "2026-05-12 02:11:52 UTC",
        "pushed_at": "2026-05-12 18:17:38 UTC",
        "git_url": "git://github.com/PrimerPages/primerpages-minimal.git",
        "ssh_url": "git@github.com:PrimerPages/primerpages-minimal.git",
        "clone_url": "https://github.com/PrimerPages/primerpages-minimal.git",
        "svn_url": "https://github.com/PrimerPages/primerpages-minimal",
        "homepage": "https://www.primerpages.com/primerpages-minimal/",
        "size": 26,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "HTML",
        "has_issues": false,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": true,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/321329820",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/321329820/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-minimal/releases/321329820/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-minimal/releases/tag/v2.1.1",
            "id": 321329820,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDzxzM4TJxqc",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-12 02:11:48 UTC",
            "updated_at": "2026-05-12 18:17:39 UTC",
            "published_at": "2026-05-12 18:17:39 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/318651487",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/318651487/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-minimal/releases/318651487/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-minimal/releases/tag/v2.1.0",
            "id": 318651487,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDzxzM4S_jxf",
            "tag_name": "v2.1.0",
            "target_commitish": "main",
            "name": "Release v2.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-01 07:13:07 UTC",
            "updated_at": "2026-05-06 21:46:40 UTC",
            "published_at": "2026-05-06 21:46:40 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/tarball/v2.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/zipball/v2.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/313521359",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/313521359/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-minimal/releases/313521359/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-minimal/releases/tag/v2.0.3",
            "id": 313521359,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDzxzM4Sr_TP",
            "tag_name": "v2.0.3",
            "target_commitish": "main",
            "name": "Release v2.0.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:51:19 UTC",
            "updated_at": "2026-04-25 04:56:48 UTC",
            "published_at": "2026-04-25 04:56:48 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/tarball/v2.0.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/zipball/v2.0.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/313422502",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/releases/313422502/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-minimal/releases/313422502/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-minimal/releases/tag/v2.0.2",
            "id": 313422502,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDzxzM4SrnKm",
            "tag_name": "v2.0.2",
            "target_commitish": "main",
            "name": "Release v2.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:51:19 UTC",
            "updated_at": "2026-04-24 21:04:44 UTC",
            "published_at": "2026-04-24 21:04:44 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/tarball/v2.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-minimal/zipball/v2.0.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n\n"
          }
        ],
        "contributors": [
          {
            "login": "actions-user",
            "id": 65916846,
            "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
            "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/actions-user",
            "html_url": "https://github.com/actions-user",
            "followers_url": "https://api.github.com/users/actions-user/followers",
            "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
            "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
            "organizations_url": "https://api.github.com/users/actions-user/orgs",
            "repos_url": "https://api.github.com/users/actions-user/repos",
            "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
            "received_events_url": "https://api.github.com/users/actions-user/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 10
          },
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 2
          }
        ]
      },
      {
        "id": 1211954501,
        "node_id": "R_kgDOSDz1RQ",
        "name": "primerpages-recommended",
        "full_name": "PrimerPages/primerpages-recommended",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/primerpages-recommended",
        "description": "Template repository for the recommended primer pages set up",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/primerpages-recommended",
        "forks_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/deployments",
        "created_at": "2026-04-15 23:21:38 UTC",
        "updated_at": "2026-05-12 02:12:04 UTC",
        "pushed_at": "2026-05-12 18:17:38 UTC",
        "git_url": "git://github.com/PrimerPages/primerpages-recommended.git",
        "ssh_url": "git@github.com:PrimerPages/primerpages-recommended.git",
        "clone_url": "https://github.com/PrimerPages/primerpages-recommended.git",
        "svn_url": "https://github.com/PrimerPages/primerpages-recommended",
        "homepage": "https://www.primerpages.com/primerpages-recommended/",
        "size": 26,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "HTML",
        "has_issues": false,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": true,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "collaborators_only",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/321329815",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/321329815/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-recommended/releases/321329815/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-recommended/releases/tag/v2.1.1",
            "id": 321329815,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDz1Rc4TJxqX",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-12 02:11:59 UTC",
            "updated_at": "2026-05-12 18:17:38 UTC",
            "published_at": "2026-05-12 18:17:38 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/318651525",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/318651525/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-recommended/releases/318651525/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-recommended/releases/tag/v2.1.0",
            "id": 318651525,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDz1Rc4S_jyF",
            "tag_name": "v2.1.0",
            "target_commitish": "main",
            "name": "Release v2.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-01 06:58:32 UTC",
            "updated_at": "2026-05-06 21:46:48 UTC",
            "published_at": "2026-05-06 21:46:48 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/tarball/v2.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/zipball/v2.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/313521361",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/313521361/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-recommended/releases/313521361/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-recommended/releases/tag/v2.0.3",
            "id": 313521361,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDz1Rc4Sr_TR",
            "tag_name": "v2.0.3",
            "target_commitish": "main",
            "name": "Release v2.0.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:40:23 UTC",
            "updated_at": "2026-04-25 04:56:48 UTC",
            "published_at": "2026-04-25 04:56:48 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/tarball/v2.0.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/zipball/v2.0.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/313422493",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/releases/313422493/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages-recommended/releases/313422493/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages-recommended/releases/tag/v2.0.2",
            "id": 313422493,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSDz1Rc4SrnKd",
            "tag_name": "v2.0.2",
            "target_commitish": "main",
            "name": "Release v2.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:40:23 UTC",
            "updated_at": "2026-04-24 21:04:42 UTC",
            "published_at": "2026-04-24 21:04:42 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/tarball/v2.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages-recommended/zipball/v2.0.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n\n"
          }
        ],
        "contributors": [
          {
            "login": "actions-user",
            "id": 65916846,
            "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
            "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/actions-user",
            "html_url": "https://github.com/actions-user",
            "followers_url": "https://api.github.com/users/actions-user/followers",
            "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
            "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
            "organizations_url": "https://api.github.com/users/actions-user/orgs",
            "repos_url": "https://api.github.com/users/actions-user/repos",
            "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
            "received_events_url": "https://api.github.com/users/actions-user/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 9
          },
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 2
          }
        ]
      },
      {
        "id": 1208233308,
        "node_id": "R_kgDOSAQtXA",
        "name": "primerpages.github.io",
        "full_name": "PrimerPages/primerpages.github.io",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/primerpages.github.io",
        "description": "Primer Pages site",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io",
        "forks_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/deployments",
        "created_at": "2026-04-12 02:06:54 UTC",
        "updated_at": "2026-05-12 17:32:53 UTC",
        "pushed_at": "2026-05-12 18:17:33 UTC",
        "git_url": "git://github.com/PrimerPages/primerpages.github.io.git",
        "ssh_url": "git@github.com:PrimerPages/primerpages.github.io.git",
        "clone_url": "https://github.com/PrimerPages/primerpages.github.io.git",
        "svn_url": "https://github.com/PrimerPages/primerpages.github.io",
        "homepage": "https://www.primerpages.com/",
        "size": 15983,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Ruby",
        "has_issues": false,
        "has_projects": false,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "other",
          "name": "Other",
          "spdx_id": "NOASSERTION",
          "url": null,
          "node_id": "MDc6TGljZW5zZTA="
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.1.1",
            "id": 321329779,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSAQtXM4TJxpz",
            "tag_name": "v2.1.1",
            "target_commitish": "main",
            "name": "Release v2.1.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-12 17:32:48 UTC",
            "updated_at": "2026-05-12 18:17:33 UTC",
            "published_at": "2026-05-12 18:17:33 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.1.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.1.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/318651510",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/318651510/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/318651510/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.1.0",
            "id": 318651510,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSAQtXM4S_jx2",
            "tag_name": "v2.1.0",
            "target_commitish": "main",
            "name": "Release v2.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-06 20:48:27 UTC",
            "updated_at": "2026-05-06 21:46:46 UTC",
            "published_at": "2026-05-06 21:46:46 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313521366",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313521366/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/313521366/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.0.3",
            "id": 313521366,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSAQtXM4Sr_TW",
            "tag_name": "v2.0.3",
            "target_commitish": "main",
            "name": "Release v2.0.3",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:29:41 UTC",
            "updated_at": "2026-04-25 04:56:50 UTC",
            "published_at": "2026-04-25 04:56:50 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.0.3",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.0.3",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313422490",
            "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313422490/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/313422490/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.0.2",
            "id": 313422490,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSAQtXM4SrnKa",
            "tag_name": "v2.0.2",
            "target_commitish": "main",
            "name": "Release v2.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-04-24 20:29:41 UTC",
            "updated_at": "2026-04-24 21:04:42 UTC",
            "published_at": "2026-04-24 21:04:42 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.0.2",
            "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n\n"
          }
        ],
        "contributors": [
          {
            "login": "actions-user",
            "id": 65916846,
            "node_id": "MDQ6VXNlcjY1OTE2ODQ2",
            "avatar_url": "https://avatars.githubusercontent.com/u/65916846?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/actions-user",
            "html_url": "https://github.com/actions-user",
            "followers_url": "https://api.github.com/users/actions-user/followers",
            "following_url": "https://api.github.com/users/actions-user/following{/other_user}",
            "gists_url": "https://api.github.com/users/actions-user/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/actions-user/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/actions-user/subscriptions",
            "organizations_url": "https://api.github.com/users/actions-user/orgs",
            "repos_url": "https://api.github.com/users/actions-user/repos",
            "events_url": "https://api.github.com/users/actions-user/events{/privacy}",
            "received_events_url": "https://api.github.com/users/actions-user/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 17
          },
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 8
          }
        ]
      },
      {
        "id": 1234257200,
        "node_id": "R_kgDOSZFFMA",
        "name": "semiliterate",
        "full_name": "PrimerPages/semiliterate",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/semiliterate",
        "description": "Reusable semiliterate documentation extraction engine and CLI",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/semiliterate",
        "forks_url": "https://api.github.com/repos/PrimerPages/semiliterate/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/semiliterate/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/semiliterate/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/semiliterate/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/semiliterate/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/semiliterate/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/semiliterate/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/semiliterate/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/semiliterate/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/semiliterate/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/semiliterate/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/semiliterate/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/semiliterate/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/semiliterate/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/semiliterate/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/semiliterate/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/semiliterate/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/semiliterate/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/semiliterate/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/semiliterate/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/semiliterate/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/semiliterate/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/semiliterate/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/semiliterate/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/semiliterate/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/semiliterate/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/semiliterate/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/semiliterate/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/semiliterate/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/semiliterate/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/semiliterate/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/semiliterate/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/semiliterate/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/semiliterate/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/semiliterate/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/semiliterate/deployments",
        "created_at": "2026-05-10 00:17:48 UTC",
        "updated_at": "2026-05-12 17:11:19 UTC",
        "pushed_at": "2026-05-12 17:02:44 UTC",
        "git_url": "git://github.com/PrimerPages/semiliterate.git",
        "ssh_url": "git@github.com:PrimerPages/semiliterate.git",
        "clone_url": "https://github.com/PrimerPages/semiliterate.git",
        "svn_url": "https://github.com/PrimerPages/semiliterate",
        "homepage": null,
        "size": 38,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Python",
        "has_issues": true,
        "has_projects": true,
        "has_downloads": true,
        "has_wiki": true,
        "has_pages": false,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "apache-2.0",
          "name": "Apache License 2.0",
          "spdx_id": "Apache-2.0",
          "url": "https://api.github.com/licenses/apache-2.0",
          "node_id": "MDc6TGljZW5zZTI="
        },
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/320661107",
            "assets_url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/320661107/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/semiliterate/releases/320661107/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/semiliterate/releases/tag/v0.1.0",
            "id": 320661107,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSZFFMM4THOZz",
            "tag_name": "v0.1.0",
            "target_commitish": "main",
            "name": "Release v0.1.0",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-12 03:00:03 UTC",
            "updated_at": "2026-05-12 03:01:39 UTC",
            "published_at": "2026-05-12 03:01:02 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/assets/417994934",
                "id": 417994934,
                "node_id": "RA_kwDOSZFFMM4Y6hi2",
                "name": "semiliterate-0.1.0-py3-none-any.whl",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/octet-stream",
                "state": "uploaded",
                "size": 15233,
                "digest": "sha256:36740024fbde1f90b211b00cfc79d67a3365a0b78988863ab69d768e1644b845",
                "download_count": 0,
                "created_at": "2026-05-12 03:01:38 UTC",
                "updated_at": "2026-05-12 03:01:38 UTC",
                "browser_download_url": "https://github.com/PrimerPages/semiliterate/releases/download/v0.1.0/semiliterate-0.1.0-py3-none-any.whl"
              },
              {
                "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/assets/417994933",
                "id": 417994933,
                "node_id": "RA_kwDOSZFFMM4Y6hi1",
                "name": "semiliterate-0.1.0.tar.gz",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/gzip",
                "state": "uploaded",
                "size": 15046,
                "digest": "sha256:e440799b72eeaed6b8fa78f2bc63324c45203ade621998a089023c15541509b5",
                "download_count": 0,
                "created_at": "2026-05-12 03:01:38 UTC",
                "updated_at": "2026-05-12 03:01:38 UTC",
                "browser_download_url": "https://github.com/PrimerPages/semiliterate/releases/download/v0.1.0/semiliterate-0.1.0.tar.gz"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/semiliterate/tarball/v0.1.0",
            "zipball_url": "https://api.github.com/repos/PrimerPages/semiliterate/zipball/v0.1.0",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add include and ignore extras to config [#4](https://github.com/PrimerPages/semiliterate/pull/4)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Refactor file types for inclusion in config [#3](https://github.com/PrimerPages/semiliterate/pull/3)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/320632904",
            "assets_url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/320632904/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/semiliterate/releases/320632904/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/semiliterate/releases/tag/v0.0.2",
            "id": 320632904,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSZFFMM4THHhI",
            "tag_name": "v0.0.2",
            "target_commitish": "main",
            "name": "Release v0.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-10 19:16:22 UTC",
            "updated_at": "2026-05-11 16:42:14 UTC",
            "published_at": "2026-05-11 16:41:41 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/assets/417599953",
                "id": 417599953,
                "node_id": "RA_kwDOSZFFMM4Y5BHR",
                "name": "semiliterate-0.0.2-py3-none-any.whl",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/octet-stream",
                "state": "uploaded",
                "size": 14846,
                "digest": "sha256:189e402bc4ce23f4867a993c9d1c396f17abf0c9ba7c45d29f16df6c1f71724b",
                "download_count": 0,
                "created_at": "2026-05-11 16:42:14 UTC",
                "updated_at": "2026-05-11 16:42:14 UTC",
                "browser_download_url": "https://github.com/PrimerPages/semiliterate/releases/download/v0.0.2/semiliterate-0.0.2-py3-none-any.whl"
              },
              {
                "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/assets/417599951",
                "id": 417599951,
                "node_id": "RA_kwDOSZFFMM4Y5BHP",
                "name": "semiliterate-0.0.2.tar.gz",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/gzip",
                "state": "uploaded",
                "size": 14516,
                "digest": "sha256:37068eee9e3763e0a5f1abb314ddef1adb29fcaa80a1b61a965dde5fae6f34f4",
                "download_count": 0,
                "created_at": "2026-05-11 16:42:14 UTC",
                "updated_at": "2026-05-11 16:42:14 UTC",
                "browser_download_url": "https://github.com/PrimerPages/semiliterate/releases/download/v0.0.2/semiliterate-0.0.2.tar.gz"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/semiliterate/tarball/v0.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/semiliterate/zipball/v0.0.2",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's Changed\r\n* Update github workflows by @athackst in https://github.com/PrimerPages/semiliterate/pull/1\r\n* Ignore output folder",
            "mentions_count": 1
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/320175940",
            "assets_url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/320175940/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/semiliterate/releases/320175940/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/semiliterate/releases/tag/v0.0.1",
            "id": 320175940,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSZFFMM4TFX9E",
            "tag_name": "v0.0.1",
            "target_commitish": "main",
            "name": "Release v0.0.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-10 19:16:22 UTC",
            "updated_at": "2026-05-10 19:26:11 UTC",
            "published_at": "2026-05-10 19:25:41 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/assets/416843296",
                "id": 416843296,
                "node_id": "RA_kwDOSZFFMM4Y2IYg",
                "name": "semiliterate-0.0.1-py3-none-any.whl",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/octet-stream",
                "state": "uploaded",
                "size": 14846,
                "digest": "sha256:40d4e6d9a57db3a55811d94bf1e8da1883de05bd53492bef0ac2c7970d14653e",
                "download_count": 0,
                "created_at": "2026-05-10 19:26:11 UTC",
                "updated_at": "2026-05-10 19:26:11 UTC",
                "browser_download_url": "https://github.com/PrimerPages/semiliterate/releases/download/v0.0.1/semiliterate-0.0.1-py3-none-any.whl"
              },
              {
                "url": "https://api.github.com/repos/PrimerPages/semiliterate/releases/assets/416843297",
                "id": 416843297,
                "node_id": "RA_kwDOSZFFMM4Y2IYh",
                "name": "semiliterate-0.0.1.tar.gz",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/gzip",
                "state": "uploaded",
                "size": 14516,
                "digest": "sha256:e32e7f263f66633f256a9873096830ffdce4ae80ed89b300c795790812e1deff",
                "download_count": 0,
                "created_at": "2026-05-10 19:26:11 UTC",
                "updated_at": "2026-05-10 19:26:11 UTC",
                "browser_download_url": "https://github.com/PrimerPages/semiliterate/releases/download/v0.0.1/semiliterate-0.0.1.tar.gz"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/semiliterate/tarball/v0.0.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/semiliterate/zipball/v0.0.1",
            "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\nInitial release\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Update github workflows [#1](https://github.com/PrimerPages/semiliterate/pull/1)\r\n"
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 10
          }
        ]
      },
      {
        "id": 1234907343,
        "node_id": "R_kgDOSZswzw",
        "name": "versite",
        "full_name": "PrimerPages/versite",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/versite",
        "description": "Versioned static-site deployments for MkDocs, Jekyll, and other command-line builders",
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/versite",
        "forks_url": "https://api.github.com/repos/PrimerPages/versite/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/versite/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/versite/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/versite/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/versite/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/versite/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/versite/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/versite/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/versite/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/versite/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/versite/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/versite/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/versite/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/versite/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/versite/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/versite/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/versite/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/versite/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/versite/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/versite/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/versite/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/versite/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/versite/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/versite/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/versite/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/versite/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/versite/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/versite/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/versite/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/versite/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/versite/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/versite/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/versite/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/versite/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/versite/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/versite/deployments",
        "created_at": "2026-05-10 19:47:05 UTC",
        "updated_at": "2026-05-12 17:22:18 UTC",
        "pushed_at": "2026-05-12 17:18:52 UTC",
        "git_url": "git://github.com/PrimerPages/versite.git",
        "ssh_url": "git@github.com:PrimerPages/versite.git",
        "clone_url": "https://github.com/PrimerPages/versite.git",
        "svn_url": "https://github.com/PrimerPages/versite",
        "homepage": null,
        "size": 33,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Python",
        "has_issues": true,
        "has_projects": true,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": false,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": null,
        "allow_forking": true,
        "is_template": false,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [
          {
            "url": "https://api.github.com/repos/PrimerPages/versite/releases/320196060",
            "assets_url": "https://api.github.com/repos/PrimerPages/versite/releases/320196060/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/versite/releases/320196060/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/versite/releases/tag/v0.0.2",
            "id": 320196060,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSZswz84TFc3c",
            "tag_name": "v0.0.2",
            "target_commitish": "main",
            "name": "Release v0.0.2",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-11 04:12:49 UTC",
            "updated_at": "2026-05-11 04:15:18 UTC",
            "published_at": "2026-05-11 04:15:18 UTC",
            "assets": [],
            "tarball_url": "https://api.github.com/repos/PrimerPages/versite/tarball/v0.0.2",
            "zipball_url": "https://api.github.com/repos/PrimerPages/versite/zipball/v0.0.2",
            "body": "## What's changed\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add build from folder option and examples [#2](https://github.com/PrimerPages/versite/pull/2)\r\n- Remove builders [#3](https://github.com/PrimerPages/versite/pull/3)\r\n"
          },
          {
            "url": "https://api.github.com/repos/PrimerPages/versite/releases/320180179",
            "assets_url": "https://api.github.com/repos/PrimerPages/versite/releases/320180179/assets",
            "upload_url": "https://uploads.github.com/repos/PrimerPages/versite/releases/320180179/assets{?name,label}",
            "html_url": "https://github.com/PrimerPages/versite/releases/tag/v0.0.1",
            "id": 320180179,
            "author": {
              "login": "athackst",
              "id": 6098197,
              "node_id": "MDQ6VXNlcjYwOTgxOTc=",
              "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
              "gravatar_id": "",
              "url": "https://api.github.com/users/athackst",
              "html_url": "https://github.com/athackst",
              "followers_url": "https://api.github.com/users/athackst/followers",
              "following_url": "https://api.github.com/users/athackst/following{/other_user}",
              "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
              "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
              "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
              "organizations_url": "https://api.github.com/users/athackst/orgs",
              "repos_url": "https://api.github.com/users/athackst/repos",
              "events_url": "https://api.github.com/users/athackst/events{/privacy}",
              "received_events_url": "https://api.github.com/users/athackst/received_events",
              "type": "User",
              "user_view_type": "public",
              "site_admin": false
            },
            "node_id": "RE_kwDOSZswz84TFY_T",
            "tag_name": "v0.0.1",
            "target_commitish": "main",
            "name": "Release v0.0.1",
            "draft": false,
            "immutable": false,
            "prerelease": false,
            "created_at": "2026-05-10 19:53:02 UTC",
            "updated_at": "2026-05-10 20:28:43 UTC",
            "published_at": "2026-05-10 20:28:12 UTC",
            "assets": [
              {
                "url": "https://api.github.com/repos/PrimerPages/versite/releases/assets/416873372",
                "id": 416873372,
                "node_id": "RA_kwDOSZswz84Y2Puc",
                "name": "versite-0.0.1-py3-none-any.whl",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/octet-stream",
                "state": "uploaded",
                "size": 15021,
                "digest": "sha256:45ee0a778c77aa408b9dfd51a01ab1d3c67fe0ad5fd32c21ed975c8243f2acaa",
                "download_count": 0,
                "created_at": "2026-05-10 20:28:42 UTC",
                "updated_at": "2026-05-10 20:28:43 UTC",
                "browser_download_url": "https://github.com/PrimerPages/versite/releases/download/v0.0.1/versite-0.0.1-py3-none-any.whl"
              },
              {
                "url": "https://api.github.com/repos/PrimerPages/versite/releases/assets/416873371",
                "id": 416873371,
                "node_id": "RA_kwDOSZswz84Y2Pub",
                "name": "versite-0.0.1.tar.gz",
                "label": "",
                "uploader": {
                  "login": "github-actions[bot]",
                  "id": 41898282,
                  "node_id": "MDM6Qm90NDE4OTgyODI=",
                  "avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
                  "gravatar_id": "",
                  "url": "https://api.github.com/users/github-actions%5Bbot%5D",
                  "html_url": "https://github.com/apps/github-actions",
                  "followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
                  "following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
                  "gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
                  "starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
                  "subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
                  "organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
                  "repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
                  "events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
                  "received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
                  "type": "Bot",
                  "user_view_type": "public",
                  "site_admin": false
                },
                "content_type": "application/gzip",
                "state": "uploaded",
                "size": 15965,
                "digest": "sha256:f3010706d79e8cc10a98fde7948189abe203bebf43ee87751502c94b54e59db1",
                "download_count": 0,
                "created_at": "2026-05-10 20:28:42 UTC",
                "updated_at": "2026-05-10 20:28:43 UTC",
                "browser_download_url": "https://github.com/PrimerPages/versite/releases/download/v0.0.1/versite-0.0.1.tar.gz"
              }
            ],
            "tarball_url": "https://api.github.com/repos/PrimerPages/versite/tarball/v0.0.1",
            "zipball_url": "https://api.github.com/repos/PrimerPages/versite/zipball/v0.0.1",
            "body": "## What's changed\r\n\r\nInitial release. \r\n\r\n## Miscellaneous\r\n\r\n- Add ci workflows [#1](https://github.com/PrimerPages/versite/pull/1)\r\n"
          }
        ],
        "contributors": [
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 7
          }
        ]
      },
      {
        "id": 985486864,
        "node_id": "R_kgDOOr1WEA",
        "name": "vscode-jekyll-template",
        "full_name": "PrimerPages/vscode-jekyll-template",
        "private": false,
        "owner": {
          "login": "PrimerPages",
          "id": 211580654,
          "node_id": "O_kgDODJx27g",
          "avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/PrimerPages",
          "html_url": "https://github.com/PrimerPages",
          "followers_url": "https://api.github.com/users/PrimerPages/followers",
          "following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
          "gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
          "organizations_url": "https://api.github.com/users/PrimerPages/orgs",
          "repos_url": "https://api.github.com/users/PrimerPages/repos",
          "events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
          "received_events_url": "https://api.github.com/users/PrimerPages/received_events",
          "type": "Organization",
          "user_view_type": "public",
          "site_admin": false
        },
        "html_url": "https://github.com/PrimerPages/vscode-jekyll-template",
        "description": null,
        "fork": false,
        "url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template",
        "forks_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/forks",
        "keys_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/keys{/key_id}",
        "collaborators_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/collaborators{/collaborator}",
        "teams_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/teams",
        "hooks_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/hooks",
        "issue_events_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/issues/events{/number}",
        "events_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/events",
        "assignees_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/assignees{/user}",
        "branches_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/branches{/branch}",
        "tags_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/tags",
        "blobs_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/git/blobs{/sha}",
        "git_tags_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/git/tags{/sha}",
        "git_refs_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/git/refs{/sha}",
        "trees_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/git/trees{/sha}",
        "statuses_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/statuses/{sha}",
        "languages_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/languages",
        "stargazers_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/stargazers",
        "contributors_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/contributors",
        "subscribers_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/subscribers",
        "subscription_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/subscription",
        "commits_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/commits{/sha}",
        "git_commits_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/git/commits{/sha}",
        "comments_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/comments{/number}",
        "issue_comment_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/issues/comments{/number}",
        "contents_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/contents/{+path}",
        "compare_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/compare/{base}...{head}",
        "merges_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/merges",
        "archive_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/{archive_format}{/ref}",
        "downloads_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/downloads",
        "issues_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/issues{/number}",
        "pulls_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/pulls{/number}",
        "milestones_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/milestones{/number}",
        "notifications_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/notifications{?since,all,participating}",
        "labels_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/labels{/name}",
        "releases_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/releases{/id}",
        "deployments_url": "https://api.github.com/repos/PrimerPages/vscode-jekyll-template/deployments",
        "created_at": "2025-05-17 21:37:57 UTC",
        "updated_at": "2026-04-20 03:29:33 UTC",
        "pushed_at": "2026-03-16 16:24:08 UTC",
        "git_url": "git://github.com/PrimerPages/vscode-jekyll-template.git",
        "ssh_url": "git@github.com:PrimerPages/vscode-jekyll-template.git",
        "clone_url": "https://github.com/PrimerPages/vscode-jekyll-template.git",
        "svn_url": "https://github.com/PrimerPages/vscode-jekyll-template",
        "homepage": "https://www.primerpages.com/vscode-jekyll-template/",
        "size": 59,
        "stargazers_count": 0,
        "watchers_count": 0,
        "language": "Ruby",
        "has_issues": true,
        "has_projects": true,
        "has_downloads": true,
        "has_wiki": false,
        "has_pages": true,
        "has_discussions": false,
        "forks_count": 0,
        "mirror_url": null,
        "archived": false,
        "disabled": false,
        "open_issues_count": 0,
        "license": {
          "key": "mit",
          "name": "MIT License",
          "spdx_id": "MIT",
          "url": "https://api.github.com/licenses/mit",
          "node_id": "MDc6TGljZW5zZTEz"
        },
        "allow_forking": true,
        "is_template": true,
        "web_commit_signoff_required": false,
        "has_pull_requests": true,
        "pull_request_creation_policy": "all",
        "topics": [],
        "visibility": "public",
        "forks": 0,
        "open_issues": 0,
        "watchers": 0,
        "default_branch": "main",
        "releases": [],
        "contributors": [
          {
            "login": "dependabot[bot]",
            "id": 49699333,
            "node_id": "MDM6Qm90NDk2OTkzMzM=",
            "avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/dependabot%5Bbot%5D",
            "html_url": "https://github.com/apps/dependabot",
            "followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
            "following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
            "gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
            "organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
            "repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
            "events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
            "received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
            "type": "Bot",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 17
          },
          {
            "login": "athackst",
            "id": 6098197,
            "node_id": "MDQ6VXNlcjYwOTgxOTc=",
            "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/athackst",
            "html_url": "https://github.com/athackst",
            "followers_url": "https://api.github.com/users/athackst/followers",
            "following_url": "https://api.github.com/users/athackst/following{/other_user}",
            "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
            "organizations_url": "https://api.github.com/users/athackst/orgs",
            "repos_url": "https://api.github.com/users/athackst/repos",
            "events_url": "https://api.github.com/users/athackst/events{/privacy}",
            "received_events_url": "https://api.github.com/users/athackst/received_events",
            "type": "User",
            "user_view_type": "public",
            "site_admin": false,
            "contributions": 8
          }
        ]
      }
    ],
    "releases": [
      {
        "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779",
        "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779/assets",
        "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/321329779/assets{?name,label}",
        "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.1.1",
        "id": 321329779,
        "author": {
          "login": "athackst",
          "id": 6098197,
          "node_id": "MDQ6VXNlcjYwOTgxOTc=",
          "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/athackst",
          "html_url": "https://github.com/athackst",
          "followers_url": "https://api.github.com/users/athackst/followers",
          "following_url": "https://api.github.com/users/athackst/following{/other_user}",
          "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
          "organizations_url": "https://api.github.com/users/athackst/orgs",
          "repos_url": "https://api.github.com/users/athackst/repos",
          "events_url": "https://api.github.com/users/athackst/events{/privacy}",
          "received_events_url": "https://api.github.com/users/athackst/received_events",
          "type": "User",
          "user_view_type": "public",
          "site_admin": false
        },
        "node_id": "RE_kwDOSAQtXM4TJxpz",
        "tag_name": "v2.1.1",
        "target_commitish": "main",
        "name": "Release v2.1.1",
        "draft": false,
        "immutable": false,
        "prerelease": false,
        "created_at": "2026-05-12 17:32:48 UTC",
        "updated_at": "2026-05-12 18:17:33 UTC",
        "published_at": "2026-05-12 18:17:33 UTC",
        "assets": [],
        "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.1.1",
        "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.1.1",
        "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Update primerpages docs workflows [#71](https://github.com/PrimerPages/primerpages-dev/pull/71)\r\n- Remove default from awesome-nav-root handling [#63](https://github.com/PrimerPages/primerpages-dev/pull/63)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add primerpages-docs template [#69](https://github.com/PrimerPages/primerpages-dev/pull/69)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-recommended/.github/workflows [#68](https://github.com/PrimerPages/primerpages-dev/pull/68)\r\n- Bump ruby/setup-ruby from 1.306.0 to 1.307.0 in /templates/primerpages-minimal/.github/workflows [#67](https://github.com/PrimerPages/primerpages-dev/pull/67)\r\n\n"
      },
      {
        "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/318651510",
        "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/318651510/assets",
        "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/318651510/assets{?name,label}",
        "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.1.0",
        "id": 318651510,
        "author": {
          "login": "athackst",
          "id": 6098197,
          "node_id": "MDQ6VXNlcjYwOTgxOTc=",
          "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/athackst",
          "html_url": "https://github.com/athackst",
          "followers_url": "https://api.github.com/users/athackst/followers",
          "following_url": "https://api.github.com/users/athackst/following{/other_user}",
          "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
          "organizations_url": "https://api.github.com/users/athackst/orgs",
          "repos_url": "https://api.github.com/users/athackst/repos",
          "events_url": "https://api.github.com/users/athackst/events{/privacy}",
          "received_events_url": "https://api.github.com/users/athackst/received_events",
          "type": "User",
          "user_view_type": "public",
          "site_admin": false
        },
        "node_id": "RE_kwDOSAQtXM4S_jx2",
        "tag_name": "v2.1.0",
        "target_commitish": "main",
        "name": "Release v2.1.0",
        "draft": false,
        "immutable": false,
        "prerelease": false,
        "created_at": "2026-05-06 20:48:27 UTC",
        "updated_at": "2026-05-06 21:46:46 UTC",
        "published_at": "2026-05-06 21:46:46 UTC",
        "assets": [],
        "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.1.0",
        "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.1.0",
        "body": "<!-- This file is generated from .copier-answers.ci.yml. Do not edit directly; update the template instead. -->\r\n\r\n## What's changed\r\n\r\n## :rocket: New\r\n\r\n- Add awesome nav support [#62](https://github.com/PrimerPages/primerpages-dev/pull/62)\r\n- Add custom admonition styles [#57](https://github.com/PrimerPages/primerpages-dev/pull/57)\r\n- Expand Linktree layout options [#46](https://github.com/PrimerPages/primerpages-dev/pull/46)\r\n- Support landing layout overrides [#45](https://github.com/PrimerPages/primerpages-dev/pull/45)\r\n- Add configurable docs edit links [#41](https://github.com/PrimerPages/primerpages-dev/pull/41)\r\n- Normalize component include inputs and docs [#38](https://github.com/PrimerPages/primerpages-dev/pull/38)\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Add edit links to site config [#58](https://github.com/PrimerPages/primerpages-dev/pull/58)\r\n- Fix local serve extra arguments [#52](https://github.com/PrimerPages/primerpages-dev/pull/52)\r\n- Default unspecified layouts to appbar style [#44](https://github.com/PrimerPages/primerpages-dev/pull/44)\r\n- Fix SideNav collection menu rendering [#42](https://github.com/PrimerPages/primerpages-dev/pull/42)\r\n- Adjust linktree layout spacing [#35](https://github.com/PrimerPages/primerpages-dev/pull/35)\r\n- Show repo info when available [#34](https://github.com/PrimerPages/primerpages-dev/pull/34)\r\n- Remove repositories page from minimal template [#33](https://github.com/PrimerPages/primerpages-dev/pull/33)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Add timing to build tasks [#59](https://github.com/PrimerPages/primerpages-dev/pull/59)\r\n- Fix bump script to work with CI [#55](https://github.com/PrimerPages/primerpages-dev/pull/55)\r\n- Use copier based ci [#54](https://github.com/PrimerPages/primerpages-dev/pull/54)\r\n- Bump rubygems/configure-rubygems-credentials from 1.0.0 to 2.0.0 [#53](https://github.com/PrimerPages/primerpages-dev/pull/53)\r\n- Add Mermaid diagram support [#51](https://github.com/PrimerPages/primerpages-dev/pull/51)\r\n- Add gfm admonitions support [#50](https://github.com/PrimerPages/primerpages-dev/pull/50)\r\n- Add guard-based local build and serve workflow [#49](https://github.com/PrimerPages/primerpages-dev/pull/49)\r\n- Refresh remaining docs and examples [#48](https://github.com/PrimerPages/primerpages-dev/pull/48)\r\n- Sync template configs and local serve flow [#47](https://github.com/PrimerPages/primerpages-dev/pull/47)\r\n- Reorganize layout demos and align layout docs [#40](https://github.com/PrimerPages/primerpages-dev/pull/40)\r\n- Ignore Codex local state [#39](https://github.com/PrimerPages/primerpages-dev/pull/39)\r\n- Pin Ruby version in release workflow [#32](https://github.com/PrimerPages/primerpages-dev/pull/32)\r\n\r\n## Dependency Updates\r\n\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-recommended/.github/workflows [#37](https://github.com/PrimerPages/primerpages-dev/pull/37)\r\n- Bump ruby/setup-ruby from 1.305.0 to 1.306.0 in /templates/primerpages-minimal/.github/workflows [#36](https://github.com/PrimerPages/primerpages-dev/pull/36)\r\n\n"
      },
      {
        "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313521366",
        "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313521366/assets",
        "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/313521366/assets{?name,label}",
        "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.0.3",
        "id": 313521366,
        "author": {
          "login": "athackst",
          "id": 6098197,
          "node_id": "MDQ6VXNlcjYwOTgxOTc=",
          "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/athackst",
          "html_url": "https://github.com/athackst",
          "followers_url": "https://api.github.com/users/athackst/followers",
          "following_url": "https://api.github.com/users/athackst/following{/other_user}",
          "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
          "organizations_url": "https://api.github.com/users/athackst/orgs",
          "repos_url": "https://api.github.com/users/athackst/repos",
          "events_url": "https://api.github.com/users/athackst/events{/privacy}",
          "received_events_url": "https://api.github.com/users/athackst/received_events",
          "type": "User",
          "user_view_type": "public",
          "site_admin": false
        },
        "node_id": "RE_kwDOSAQtXM4Sr_TW",
        "tag_name": "v2.0.3",
        "target_commitish": "main",
        "name": "Release v2.0.3",
        "draft": false,
        "immutable": false,
        "prerelease": false,
        "created_at": "2026-04-24 20:29:41 UTC",
        "updated_at": "2026-04-25 04:56:50 UTC",
        "published_at": "2026-04-25 04:56:50 UTC",
        "assets": [],
        "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.0.3",
        "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.0.3",
        "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Use PR token for automated bump pushes [#28](https://github.com/PrimerPages/primerpages-dev/pull/28)\r\n- Fix landing page repository links [#27](https://github.com/PrimerPages/primerpages-dev/pull/27)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Remove no-op downstream sync rebuild dispatches [#30](https://github.com/PrimerPages/primerpages-dev/pull/30)\r\n- Wait for gem availability before downstream tagging [#29](https://github.com/PrimerPages/primerpages-dev/pull/29)\r\n\n"
      },
      {
        "url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313422490",
        "assets_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/releases/313422490/assets",
        "upload_url": "https://uploads.github.com/repos/PrimerPages/primerpages.github.io/releases/313422490/assets{?name,label}",
        "html_url": "https://github.com/PrimerPages/primerpages.github.io/releases/tag/v2.0.2",
        "id": 313422490,
        "author": {
          "login": "athackst",
          "id": 6098197,
          "node_id": "MDQ6VXNlcjYwOTgxOTc=",
          "avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
          "gravatar_id": "",
          "url": "https://api.github.com/users/athackst",
          "html_url": "https://github.com/athackst",
          "followers_url": "https://api.github.com/users/athackst/followers",
          "following_url": "https://api.github.com/users/athackst/following{/other_user}",
          "gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
          "starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
          "subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
          "organizations_url": "https://api.github.com/users/athackst/orgs",
          "repos_url": "https://api.github.com/users/athackst/repos",
          "events_url": "https://api.github.com/users/athackst/events{/privacy}",
          "received_events_url": "https://api.github.com/users/athackst/received_events",
          "type": "User",
          "user_view_type": "public",
          "site_admin": false
        },
        "node_id": "RE_kwDOSAQtXM4SrnKa",
        "tag_name": "v2.0.2",
        "target_commitish": "main",
        "name": "Release v2.0.2",
        "draft": false,
        "immutable": false,
        "prerelease": false,
        "created_at": "2026-04-24 20:29:41 UTC",
        "updated_at": "2026-04-24 21:04:42 UTC",
        "published_at": "2026-04-24 21:04:42 UTC",
        "assets": [],
        "tarball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/tarball/v2.0.2",
        "zipball_url": "https://api.github.com/repos/PrimerPages/primerpages.github.io/zipball/v2.0.2",
        "body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n- Hide landing repo info when repositories are disabled [#26](https://github.com/PrimerPages/primerpages-dev/pull/26)\r\n- Enable blog pagination in the minimal template [#25](https://github.com/PrimerPages/primerpages-dev/pull/25)\r\n- Track rebuild runs without downstream commits [#24](https://github.com/PrimerPages/primerpages-dev/pull/24)\r\n\r\n## :toolbox: Maintenance\r\n\r\n- Force trigger of downstream rebuilds on pushes to main [#23](https://github.com/PrimerPages/primerpages-dev/pull/23)\r\n- Trigger downstream site rebuilds after theme releases [#22](https://github.com/PrimerPages/primerpages-dev/pull/22)\r\n- Let downstream releases create their own tags [#21](https://github.com/PrimerPages/primerpages-dev/pull/21)\r\n\n"
      }
    ],
    "releases_url": "https://github.com/PrimerPages/primerpages.github.io/releases",
    "repository_name": "primerpages.github.io",
    "repository_nwo": "PrimerPages/primerpages.github.io",
    "repository_url": "https://github.com/PrimerPages/primerpages.github.io",
    "show_downloads": true,
    "source": {
      "branch": "gh-pages",
      "path": "/"
    },
    "tar_url": "https://github.com/PrimerPages/primerpages.github.io/tarball/gh-pages",
    "url": "https://github.com/pages/PrimerPages/primerpages.github.io",
    "versions": {},
    "wiki_url": null,
    "zip_url": "https://github.com/PrimerPages/primerpages.github.io/zipball/gh-pages"
  }
}

Page Variables

{
  "name": "debug.md",
  "path": "_docs/debug.md",
  "next": {
    "name": "github-action.md",
    "path": "_docs/github-action.md",
    "next": null,
    "url": "/docs/github-action.html",
    "collection": "docs",
    "id": "/docs/github-action",
    "relative_path": "_docs/github-action.md",
    "excerpt": "<p>You can also deploy this site with GitHub Actions. Below is a typical workflow file.</p>\n",
    "categories": [
      "Advanced"
    ],
    "previous": {
      "name": "debug.md",
      "path": "_docs/debug.md",
      "next": {
        "name": "github-action.md",
        "path": "_docs/github-action.md",
        "url": "/docs/github-action.html",
        "collection": "docs",
        "id": "/docs/github-action",
        "relative_path": "_docs/github-action.md",
        "categories": [
          "Advanced"
        ],
        "title": "Using with GitHub Actions",
        "tags": [],
        "date": "2026-05-12 18:17:53 +0000",
        "draft": false,
        "layout": "docs",
        "image": "https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true,
        "order": 100,
        "category": "Advanced",
        "slug": "github-action",
        "ext": ".md"
      },
      "url": "/docs/debug.html",
      "collection": "docs",
      "id": "/docs/debug",
      "relative_path": "_docs/debug.md",
      "excerpt": "<h2 id=\"jekyll-version\">Jekyll version</h2>\n",
      "categories": [],
      "previous": {
        "name": "custom-styles.md",
        "path": "_docs/custom-styles.md",
        "url": "/docs/custom-styles.html",
        "collection": "docs",
        "id": "/docs/custom-styles",
        "relative_path": "_docs/custom-styles.md",
        "categories": [
          "Advanced"
        ],
        "title": "Custom styles",
        "tags": [],
        "date": "2026-05-12 18:17:53 +0000",
        "draft": false,
        "layout": "docs",
        "image": "/assets/img/default.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true,
        "order": 100,
        "category": "Advanced",
        "slug": "custom-styles",
        "ext": ".md"
      },
      "title": "Debug",
      "tags": [],
      "date": "2026-05-12 18:17:53 +0000",
      "output": null,
      "content": "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
      "draft": false,
      "layout": "docs",
      "image": "/assets/img/default.png",
      "permalink": "/docs/:path:output_ext",
      "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
      "default_category": "Other",
      "toc": true,
      "order": 100,
      "slug": "debug",
      "ext": ".md"
    },
    "title": "Using with GitHub Actions",
    "tags": [],
    "date": "2026-05-12 18:17:53 +0000",
    "output": null,
    "content": "You can also deploy this site with GitHub Actions. Below is a typical workflow file.\n\n```yaml\n# Sample workflow for building and deploying a Jekyll site to GitHub Pages\nname: Docs\n\non:\n  # Runs on pushes targeting the default branch\n  push:\n    branches: [\"main\"]\n\n  # Run on every pull request\n  pull_request:\n    types: [opened, reopened, synchronize]\n\n  # Allows you to run this workflow manually from the Actions tab\n  workflow_dispatch:\n\n  schedule:\n    # This will refresh your repositories and other user information every day\n    # * is a special character in YAML so you have to quote this string\n    # Generate from https://crontab.guru/\n    #        ┌───────────── minute (0 - 59)\n    #        │ ┌───────────── hour (0 - 23)\n    #        │ │ ┌───────────── day of the month (1 - 31)\n    #        │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)\n    #        │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)\n    #        │ │ │ │ │\n    #        │ │ │ │ │\n    #        │ │ │ │ │\n    #        * * * * *\n    - cron: \"0 0 * * *\"\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n  contents: read # needed to read your repository\n  pages: write # needed to enable and deploy GitHub Pages\n  id-token: write\n\n# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.\n# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: false\n\njobs:\n  # Build job\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v6\n      - name: Setup Ruby\n        uses: ruby/setup-ruby@v1.152.0\n        with:\n          bundler-cache: true # runs 'bundle install' and caches installed gems automatically\n      - name: Setup Pages\n        id: pages\n        uses: actions/configure-pages@v3\n        with:\n          enablement: true # Enable GitHub Pages if it is not already enabled\n      - name: Build\n        run: bundle exec jekyll build\n        env:\n          JEKYLL_ENV: production\n          JEKYLL_GITHUB_TOKEN: ${{ github.token }}\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3\n\n  # Deployment job\n  deploy:\n    if: github.ref == 'refs/heads/main' # Only deploy from the main branch\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    needs: build\n    steps:\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4\n\n```\n",
    "draft": false,
    "layout": "docs",
    "image": "https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png",
    "permalink": "/docs/:path:output_ext",
    "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
    "default_category": "Other",
    "toc": true,
    "order": 100,
    "category": "Advanced",
    "slug": "github-action",
    "ext": ".md"
  },
  "url": "/docs/debug.html",
  "collection": "docs",
  "id": "/docs/debug",
  "relative_path": "_docs/debug.md",
  "excerpt": "<h2 id=\"jekyll-version\">Jekyll version</h2>\n",
  "categories": [],
  "previous": {
    "name": "custom-styles.md",
    "path": "_docs/custom-styles.md",
    "next": {
      "name": "debug.md",
      "path": "_docs/debug.md",
      "next": {
        "name": "github-action.md",
        "path": "_docs/github-action.md",
        "url": "/docs/github-action.html",
        "collection": "docs",
        "id": "/docs/github-action",
        "relative_path": "_docs/github-action.md",
        "categories": [
          "Advanced"
        ],
        "title": "Using with GitHub Actions",
        "tags": [],
        "date": "2026-05-12 18:17:53 +0000",
        "draft": false,
        "layout": "docs",
        "image": "https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true,
        "order": 100,
        "category": "Advanced",
        "slug": "github-action",
        "ext": ".md"
      },
      "url": "/docs/debug.html",
      "collection": "docs",
      "id": "/docs/debug",
      "relative_path": "_docs/debug.md",
      "excerpt": "<h2 id=\"jekyll-version\">Jekyll version</h2>\n",
      "categories": [],
      "previous": {
        "name": "custom-styles.md",
        "path": "_docs/custom-styles.md",
        "url": "/docs/custom-styles.html",
        "collection": "docs",
        "id": "/docs/custom-styles",
        "relative_path": "_docs/custom-styles.md",
        "categories": [
          "Advanced"
        ],
        "title": "Custom styles",
        "tags": [],
        "date": "2026-05-12 18:17:53 +0000",
        "draft": false,
        "layout": "docs",
        "image": "/assets/img/default.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true,
        "order": 100,
        "category": "Advanced",
        "slug": "custom-styles",
        "ext": ".md"
      },
      "title": "Debug",
      "tags": [],
      "date": "2026-05-12 18:17:53 +0000",
      "output": null,
      "content": "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
      "draft": false,
      "layout": "docs",
      "image": "/assets/img/default.png",
      "permalink": "/docs/:path:output_ext",
      "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
      "default_category": "Other",
      "toc": true,
      "order": 100,
      "slug": "debug",
      "ext": ".md"
    },
    "url": "/docs/custom-styles.html",
    "collection": "docs",
    "id": "/docs/custom-styles",
    "relative_path": "_docs/custom-styles.md",
    "excerpt": "<h2 id=\"site-style\">Site style</h2>\n",
    "categories": [
      "Advanced"
    ],
    "previous": {
      "name": "post-timeline.md",
      "path": "_docs/includes/post-timeline.md",
      "next": {
        "name": "custom-styles.md",
        "path": "_docs/custom-styles.md",
        "url": "/docs/custom-styles.html",
        "collection": "docs",
        "id": "/docs/custom-styles",
        "relative_path": "_docs/custom-styles.md",
        "categories": [
          "Advanced"
        ],
        "title": "Custom styles",
        "tags": [],
        "date": "2026-05-12 18:17:53 +0000",
        "draft": false,
        "layout": "docs",
        "image": "/assets/img/default.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true,
        "order": 100,
        "category": "Advanced",
        "slug": "custom-styles",
        "ext": ".md"
      },
      "url": "/docs/includes/post-timeline.html",
      "collection": "docs",
      "id": "/docs/includes/post-timeline",
      "relative_path": "_docs/includes/post-timeline.md",
      "excerpt": "<p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n",
      "categories": [
        "includes"
      ],
      "previous": {
        "name": "post-timeline-card.md",
        "path": "_docs/includes/post-timeline-card.md",
        "url": "/docs/includes/post-timeline-card.html",
        "collection": "docs",
        "id": "/docs/includes/post-timeline-card",
        "relative_path": "_docs/includes/post-timeline-card.md",
        "categories": [
          "includes"
        ],
        "title": "Post Timeline Card",
        "tags": [],
        "date": "2026-05-12 18:17:53 +0000",
        "draft": false,
        "layout": "docs",
        "image": "/assets/img/default.png",
        "permalink": "/docs/:path:output_ext",
        "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
        "default_category": "Other",
        "toc": true,
        "category": "includes",
        "order": 42,
        "slug": "post-timeline-card",
        "ext": ".md"
      },
      "title": "Post Timeline",
      "tags": [],
      "date": "2026-05-12 18:17:53 +0000",
      "output": "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Post Timeline | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Post Timeline\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\",\"headline\":\"Post Timeline\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/includes/post-timeline.html\"},\"url\":\"/docs/includes/post-timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                includes\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Post Timeline</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing the following parameters:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts</code></td>\n      <td>Required</td>\n      <td>The posts to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code></td>\n      <td>The URL for the “More” link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.posts_limit</code>, <code class=\"language-plaintext highlighter-rouge\">site.paginate</code>, or <code class=\"language-plaintext highlighter-rouge\">-1</code></td>\n      <td>Number of posts to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">articles</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"s2\">\"/articles/\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>If the limit is set to a number below 0, all posts will be shown.</p>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> layout, visit our demo page:</p>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Post Timeline Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include sets up initial variables based on the provided parameters or fallback values.</li>\n  <li>It sorts the collection by date in reverse order (newest first).</li>\n  <li>It creates a container for the timeline posts.</li>\n  <li>It iterates through the provided posts (limited by <code class=\"language-plaintext highlighter-rouge\">limit</code> if set) and includes a <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> for each post.</li>\n  <li>If there are more posts than the displayed limit, it adds a “More” link at the bottom.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code>: Another include file that should define how each post card is displayed.</li>\n  <li>Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the timeline:</p>\n\n<ol>\n  <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n  <li>Edit the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> include to change how individual posts are displayed.</li>\n  <li>Adjust the “View all” link text and styling as needed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">posts</code> parameter must be passed explicitly.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">index</code> parameter is optional. If omitted, the include falls back to <code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code>.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for the link, which helps generate correct URLs in different site configurations.</li>\n  <li>The layout uses responsive design classes (<code class=\"language-plaintext highlighter-rouge\">container-xl</code>, <code class=\"language-plaintext highlighter-rouge\">p-responsive-blog</code>, etc.) for optimal display on various screen sizes.</li>\n</ul>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-timeline-card.html\"\n                            aria-disabled=\"false\">Post Timeline Card</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/custom-styles.html\"\n                            aria-disabled=\"false\">Custom styles</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/includes/post-timeline.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
      "content": "<p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing the following parameters:</p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Parameter</th>\n      <th>Default</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">posts</code></td>\n      <td>Required</td>\n      <td>The posts to display</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code></td>\n      <td>The URL for the “More” link</td>\n    </tr>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">limit</code></td>\n      <td><code class=\"language-plaintext highlighter-rouge\">page.posts_limit</code>, <code class=\"language-plaintext highlighter-rouge\">site.paginate</code>, or <code class=\"language-plaintext highlighter-rouge\">-1</code></td>\n      <td>Number of posts to display</td>\n    </tr>\n  </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">posts</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">articles</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"s2\">\"/articles/\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>If the limit is set to a number below 0, all posts will be shown.</p>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> layout, visit our demo page:</p>\n\n<p><a href=\"/demo/timeline\" class=\"btn\">Post Timeline Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n  <li>The include sets up initial variables based on the provided parameters or fallback values.</li>\n  <li>It sorts the collection by date in reverse order (newest first).</li>\n  <li>It creates a container for the timeline posts.</li>\n  <li>It iterates through the provided posts (limited by <code class=\"language-plaintext highlighter-rouge\">limit</code> if set) and includes a <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> for each post.</li>\n  <li>If there are more posts than the displayed limit, it adds a “More” link at the bottom.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n  <li><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code>: Another include file that should define how each post card is displayed.</li>\n  <li>Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the timeline:</p>\n\n<ol>\n  <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n  <li>Edit the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> include to change how individual posts are displayed.</li>\n  <li>Adjust the “View all” link text and styling as needed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">posts</code> parameter must be passed explicitly.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">index</code> parameter is optional. If omitted, the include falls back to <code class=\"language-plaintext highlighter-rouge\">page.first_page_path</code>.</li>\n  <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for the link, which helps generate correct URLs in different site configurations.</li>\n  <li>The layout uses responsive design classes (<code class=\"language-plaintext highlighter-rouge\">container-xl</code>, <code class=\"language-plaintext highlighter-rouge\">p-responsive-blog</code>, etc.) for optimal display on various screen sizes.</li>\n</ul>\n",
      "draft": false,
      "layout": "docs",
      "image": "/assets/img/default.png",
      "permalink": "/docs/:path:output_ext",
      "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
      "default_category": "Other",
      "toc": true,
      "category": "includes",
      "order": 42,
      "slug": "post-timeline",
      "ext": ".md"
    },
    "title": "Custom styles",
    "tags": [],
    "date": "2026-05-12 18:17:53 +0000",
    "output": "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- HTML Meta Tags -->\n  <!-- Begin Jekyll SEO tag v2.9.0 -->\n<title>Custom styles | Primer Pages</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Custom styles\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Site style\" />\n<meta name=\"twitter:description\" property=\"og:description\" content=\"Site style\" />\n<meta property=\"og:site_name\" content=\"Primer Pages\" />\n<meta property=\"og:image\" content=\"/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta property=\"article:modified_time\" content=\"2026-05-12T18:17:53+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:image\" content=\"/assets/img/default.png\" />\n<meta name=\"twitter:title\" content=\"Custom styles\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2026-05-12T18:17:53+00:00\",\"datePublished\":\"2026-05-12T18:17:53+00:00\",\"description\":\"Site style\",\"headline\":\"Custom styles\",\"image\":\"/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"/docs/custom-styles.html\"},\"url\":\"/docs/custom-styles.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n  <link href=\"/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n  <link href=\"/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n  \n  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">\n\n  <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n  <script src=\"/assets/js/theme-toggle.js\"></script>\n  <script src=\"/assets/js/anchor-links.js\"></script>\n  <script src=\"/assets/js/topbar.js\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js\"></script>\n  <script src=\"/assets/js/mermaid.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n    \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n    <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n        <div class=\"d-flex d-sm-none\">\n            \n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#nav-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n    <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                            src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                        <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"SelectMenu-list\">\n                <a href=\"/\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Home</a>\n                <a href=\"/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n                <a href=\"/blog\" class=\"SelectMenu-item\" role=\"menuitem\">Blog</a>\n                <a href=\"/demo\" class=\"SelectMenu-item\" role=\"menuitem\">Demo</a>\n            </div>\n            <div class=\"SelectMenu-footer\">\n                <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n        </div>\n        <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n            <a href=\"/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n                <span class=\"octicon octicon-mark-github-24\"></span>\n                <span class=\"h4 text-semibold mx-3\">Primer Pages</span>\n            </a>\n        </div>\n        <div class=\"AppHeader-item d-flex flex-items-center\">\n            <div class=\"Toggle d-flex flex-items-center\">\n    <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n            class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n            <div class=\"AppHeader-item hide-sm\">\n                \n\n\n<div class=\"Repo-info\">\n    <a href=\"https://github.com/PrimerPages/primerpages.github.io\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n        <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n            <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n            <div>\n                <div>\n                    PrimerPages/primerpages.github.io\n                </div>\n                \n                <div class=\"d-flex flex-row\">\n                    <div class=\"mr-3\">\n                        <span><span class=\"octicon octicon-tag-16\"></span> v2.1.1</span>\n                    </div>\n                    \n                    <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 0</div>\n                    <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 0</span></div>\n                    \n                </div>\n                \n            </div>\n\n        </div>\n    </a>\n</div>\n\n            </div>\n            \n            <div class=\"AppHeader-item mr-0\">\n                <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n                    <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Primer Pages\"\n                src=\"https://avatars.githubusercontent.com/u/211580654?v=4\">\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"d-flex flex-items-center mt-2\">\n        <div class=\"AppHeader-item width-full hide-sm\">\n\n<nav class=\"UnderlineNav\">\n    <ul class=\"UnderlineNav-body flex-row list-style-none\">\n        <li class=\"d-inline-flex\">\n          <a href=\"/\" class=\"UnderlineNav-item m-2\"\n             >\n            Home\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/docs\" class=\"UnderlineNav-item m-2\"\n             \n               aria-current=\"page\"\n             >\n            Documentation\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/blog\" class=\"UnderlineNav-item m-2\"\n             >\n            Blog\n          </a>\n        </li>\n        <li class=\"d-inline-flex\">\n          <a href=\"/demo\" class=\"UnderlineNav-item m-2\"\n             >\n            Demo\n          </a>\n        </li>\n    </ul>\n</nav>\n\n        </div>\n    </div>\n</header>\n\n    <div class=\"d-flex flex-1 flex-column\">\n    \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n    <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n        <div class=\"Layout-sidebar position-sticky\"\n            style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n            >\n            <nav>\n                \n                <div class=\"d-none px-4 pb-3 border-bottom d-xl-block\"\n                    style=\"height: calc(38px + 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        <a class=\"f6 pl-2 pr-5 ml-n1 pb-1 color-fg-default\"\n                            href=\"/docs/index.html\">\n                            <span class=\"octicon octicon-arrow-left-16 mr-1\"></span>\n                            Documentation\n                        </a>\n                        \n                    </div>\n                    <h2 class=\"pt-3\">\n                        <div class=\"d-block pl-1 mb-2 h3 color-fg-default no-underline\">\n                            Documentation\n                        </div>\n                    </h2>\n                </div>\n                \n                <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n                    style=\"height: calc(100vh - var(--topbar-height, 150px) - 38px - 55px);\">\n                    <div class=\"pt-3\">\n                        \n                        \n\n\n\n\n<ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n  <li class=\"h4\">Getting started\n    <ul>\n      \n      <a href=\"/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Get started\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Theme configuration\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/choose-a-layout.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Choose a layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Write a post\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Styles\n    <ul>\n      \n      <a href=\"/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Appbar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Sidebar style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Stacked style\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Topbar style\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Layouts\n    <ul>\n      \n      <a href=\"/docs/layouts/page.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Page Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Home Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Profile Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Linktree Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/post.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Docs Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Landing layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Timeline Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Repositories Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/paginate.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginate Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/tag_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tag Index Layout\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/layouts/category_index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category Index Layout\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Plugins\n    <ul>\n      \n      <a href=\"/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Pagination\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Tagging\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Category pages\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/plugins/mermaid.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Mermaid\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Includes\n    <ul>\n      \n      <a href=\"/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Collection Menu\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Link Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Links\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Paginator Navigation\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Gallery\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Index\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline Card\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Post Timeline\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Advanced\n    <ul>\n      \n      <a href=\"/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" aria-current=\"page\">\n          Custom styles\n        </li>\n      </a>\n      \n      \n      <a href=\"/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Using with GitHub Actions\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n  <li class=\"h4\">Other\n    <ul>\n      \n      <a href=\"/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n        <li class=\"menu-item ActionList-item border-0\" >\n          Debug\n        </li>\n      </a>\n      \n    </ul>\n  </li>\n</ul>\n\n                        \n                    </div>\n                </div>\n            </nav>\n        </div>\n    </div>\n    <div class=\"container-xl flex-1  p-responsive pb-6\">\n        <div class=\"py-4 d-flex\">\n            <div class=\"d-xl-none\">\n                \n                \n\n\n<script>\n    $(document).ready(function () {\n        const $menu = $(\"#collection-menu\");\n        const $closeButton = $(\".close-menu\");\n\n        if ($menu.length && $closeButton.length) {\n            $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n        }\n    });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n    <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        </svg>\n    </summary>\n    <details-menu class=\"SelectMenu\" role=\"menu\">\n        <div class=\"SelectMenu-modal\">\n\n            <div class=\"SelectMenu-header\">\n                <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n                    <a href=\"/docs/index.html\"\n                        class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n                        <span class=\"h3 color-fg-default text-bold\">Documentation</span>\n                    </a>\n                </div>\n                <div class=\"d-flex flex-justify-end\">\n                    <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n                        <span class=\"octicon octicon-x-16\"></span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"SideNav border overflow-y-auto\">\n                <div class=\"SideNav-item no-underline h4\">Getting started</div>\n                <a href=\"/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n                <a href=\"/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n                <a href=\"/docs/choose-a-layout.html\" class=\"SideNav-item\" role=\"menuitem\" >Choose a layout</a>\n                <a href=\"/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n                <div class=\"SideNav-item no-underline h4\">Styles</div>\n                <a href=\"/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n                <a href=\"/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n                <a href=\"/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n                <a href=\"/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n                <div class=\"SideNav-item no-underline h4\">Layouts</div>\n                <a href=\"/docs/layouts/page.html\" class=\"SideNav-item\" role=\"menuitem\" >Page Layout</a>\n                <a href=\"/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n                <a href=\"/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n                <a href=\"/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n                <a href=\"/docs/layouts/post.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Layout</a>\n                <a href=\"/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n                <a href=\"/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n                <a href=\"/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n                <a href=\"/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n                <a href=\"/docs/layouts/paginate.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Layout</a>\n                <a href=\"/docs/layouts/tag_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Tag Index Layout</a>\n                <a href=\"/docs/layouts/category_index.html\" class=\"SideNav-item\" role=\"menuitem\" >Category Index Layout</a>\n                <div class=\"SideNav-item no-underline h4\">Plugins</div>\n                <a href=\"/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n                <a href=\"/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n                <a href=\"/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n                <a href=\"/docs/plugins/mermaid.html\" class=\"SideNav-item\" role=\"menuitem\" >Mermaid</a>\n                <div class=\"SideNav-item no-underline h4\">Includes</div>\n                <a href=\"/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n                <a href=\"/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n                <a href=\"/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n                <a href=\"/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n                <a href=\"/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n                <a href=\"/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n                <a href=\"/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n                <a href=\"/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n                <div class=\"SideNav-item no-underline h4\">Advanced</div>\n                <a href=\"/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\"  aria-current=\"page\" >Custom styles</a>\n                <a href=\"/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with GitHub Actions</a>\n                <div class=\"SideNav-item no-underline h4\">Documentation</div>\n                <a href=\"/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n            </div>\n        </div>\n    </details-menu>\n</details>\n\n                \n            </div>\n            \n            \n<div class=\"Breadcrumb d-flex flex-items-center\">\n    <nav aria-label=\"Breadcrumb\" class=\"f5\">\n        <ol class=\"breadcrumb\">\n            <li class=\"breadcrumb-item\">\n                <a href=\"/\">home</a>\n            </li>\n\n            \n            <li class=\"breadcrumb-item\">\n                <a href=\"/docs\">docs</a>\n            </li>\n        </ol>\n    </nav>\n</div>\n\n            \n        </div>\n        <div class=\"pb-5 p-responsive\">\n            <h1 class=\"border-bottom-0\">Custom styles</h1>\n            <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n        </div>\n        <div class=\"d-flex flex-wrap-reverse\">\n            <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n                <h2 id=\"site-style\">Site style</h2>\n\n<p>You can override theme styles in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code>. Using Sass is especially helpful when you want to reference Jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add CSS to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n    <span class=\"s\">.Link-btn {</span>\n        <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">h1 {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n\n\n                <!-- Pagination links -->\n                <div class=\"paginate-container py-3\">\n                    <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n                        \n                        \n                        <a class=\"previous_page\" rel=\"prev\" href=\"/docs/includes/post-timeline.html\"\n                            aria-disabled=\"false\">Post Timeline</a>\n                        \n\n                        \n                        <a class=\"next_page\" rel=\"next\" href=\"/docs/debug.html\"\n                            aria-disabled=\"false\">Debug</a>\n                        \n                        \n                    </div>\n                </div>\n\n                <!-- Edit link -->\n                \n                <div class=\"doc-footer border-top my-8 py-5\">\n                    <a href=\"https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs/_docs/custom-styles.md\">\n                        <span class=\"octicon octicon-pencil-16\"></span>\n                        Edit this page</a>\n                </div>\n                \n            </div>\n            <div class=\"col-12 col-md-4 markdown-body\">\n                \n                \n                <div class=\"position-sticky top-12 ml-5 pb-5\">\n                    <h4 class=\"ml-3 mb-1\">In this article</h4>\n                    <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#site-style\">Site style</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#page-style\">Page style</a></li>\n</ul>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</div>\n\n    </div><footer>\n   <div class=\"footer py-3 color-bg-subtle border-top\">\n        <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n            <div class=\"flex-1\"></div>\n            <div class=\"flex-0 mx-auto px-4\">\n                <div>Made with <a href=\"https://primerpages.github.io/jekyll-theme-profile/\">jekyll theme profile</a></div>\n            </div>\n        </div>\n   </div>\n</footer>\n\n</body>\n\n</html>\n",
    "content": "<h2 id=\"site-style\">Site style</h2>\n\n<p>You can override theme styles in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code>. Using Sass is especially helpful when you want to reference Jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add CSS to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n    <span class=\"s\">.Link-btn {</span>\n        <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n    <span class=\"s\">h1 {</span>\n        <span class=\"s\">color: #FFFF;</span>\n    <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n",
    "draft": false,
    "layout": "docs",
    "image": "/assets/img/default.png",
    "permalink": "/docs/:path:output_ext",
    "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
    "default_category": "Other",
    "toc": true,
    "order": 100,
    "category": "Advanced",
    "slug": "custom-styles",
    "ext": ".md"
  },
  "title": "Debug",
  "tags": [],
  "date": "2026-05-12 18:17:53 +0000",
  "output": null,
  "content": "## Jekyll version\n\n<pre>{{ jekyll.version }}</pre>\n\n## Jekyll environment\n\n<pre>{{ jekyll.environment }}</pre>\n\n## Site Variables\n\n<pre>{{ site | inspect }}</pre>\n\n## Page Variables\n\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n## Paginator Variables\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
  "draft": false,
  "layout": "docs",
  "image": "/assets/img/default.png",
  "permalink": "/docs/:path:output_ext",
  "edit_url": "https://github.com/PrimerPages/primerpages.github.io/edit/main/_docs",
  "default_category": "Other",
  "toc": true,
  "order": 100,
  "slug": "debug",
  "ext": ".md"
}