<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <atom:link href="https://codemonkeys.tech/rss.xml" rel="self" type="application/rss+xml"/>
    <title>Code Monkeys</title>
    <link>https://codemonkeys.tech/</link>
    <description>Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵</description>
    <language>en-US</language>
    <pubDate>Sat, 01 Aug 2026 16:05:36 GMT</pubDate>
    <lastBuildDate>Sat, 01 Aug 2026 16:05:36 GMT</lastBuildDate>
    <generator>vuepress-plugin-feed1</generator>
    <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
    <copyright>Made by and for Code Monkeys 🐵</copyright>
    <image>
      <title>Code Monkeys</title>
      <url>https://codemonkeys.tech/images/code-monkeys-logos/code-monkeys-rss-image.png</url>
      <link>https://codemonkeys.tech/</link>
    </image>
    <item>
      <title>Climbing Stairs Solution 1</title>
      <link>https://codemonkeys.tech/climbing-stairs-solution-1/</link>
      <guid>https://codemonkeys.tech/climbing-stairs-solution-1/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Climbing Stairs Solution 1</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the first Solution &amp; Notes for the LeetCode problem Climbing Stairs! 🍌🐒</description>
      <pubDate>Wed, 30 Jun 2021 16:43:32 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="climbing-stairs-solution-1"> Climbing Stairs Solution 1</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/climbing-stairs/" target="_blank" rel="noopener noreferrer">Climbing Stairs <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>You are climbing a staircase. It takes <span>n</span> steps to reach the top.</p>
<p>Each time you can either climb <span>1</span> or <span>2</span> steps. In how many distinct ways can you climb to the top?</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>n = 2</span> <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>2</span></p>
<p>Explanation: There are <span>two</span> ways to climb to the top.<br>1. 1 step + 1 step<br>2. 2 steps</p>
<p>Ex 2) Input: <span>n = 3</span> <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>3</span></p>
<p>Explanation: There are <span>three</span> ways to climb to the top.<br>1. 1 step + 1 step + 1 step<br>2. 1 step + 2 steps<br>3. 2 steps + 1 step</p>
<h2 id="constraints"> Constraints</h2>
<ul>
<li><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="4"></mjx-c><mjx-c c="5"></mjx-c></mjx-mn></mjx-math></mjx-container></li>
</ul>
<h2 id="thought-process"> Thought Process</h2>
<ul>
<li>
<p>Let's start by diagramming the different ways we can climb the steps to see if we can find a pattern.</p>
<ul>
<li>When <span>n = 3</span> we have:</li>
</ul>
</li>
</ul>
<Mermaid id="mermaid_382ee1e0" :graph="$dataBlock.mermaid_382ee1e0"></Mermaid><ul>
<li>
<p>From the diagram we can see there are <span>3</span> distinct ways to climb to the top when <span>n = 3</span> since we can ignore the scenarios where we take extra steps.</p>
</li>
<li>
<p>To help you see a pattern try drawing out more diagrams for larger values of <span>n</span> or creating a generalized diagram for any value of <span>n</span>.</p>
</li>
<li>
<p>The diagram above is an example of a <span>recursion tree</span>.</p>
</li>
<li>
<p>So, one way to solve this problem is to come up with a <span>recursive formula</span> that represents how many distinct ways we can climb the stairs.</p>
</li>
<li>
<p>Let's use the diagram to help us come up with our <span>recursive formula</span>.</p>
</li>
<li>
<p>We know we can either add <span>1</span> step or <span>2</span> steps each time we climb up the stairs, and we want to hit our target of <span>n</span> steps.</p>
</li>
<li>
<p>So, we need to keep track of how many steps we have taken which we can represent with the variable <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mi size="s"><mjx-c c="c"></mjx-c></mjx-mi></mjx-script></mjx-msub></mjx-mstyle></mjx-math></mjx-container>, where <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container> represents the current choice when climbing the stairs.</p>
</li>
<li>
<p>Initially, <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container>, here <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container> means we haven't made a choice to take <span>1</span> step or <span>2</span> steps yet.</p>
</li>
<li>
<p>Each time we climb the stairs we make one of the following choices:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mi size="s"><mjx-c c="c"></mjx-c></mjx-mi></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mn space="3"><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle space="2"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c=">"></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mi size="s"><mjx-c c="c"></mjx-c></mjx-mi></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mn space="3"><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle space="2"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c=">"></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Now, we'll let <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container> denote our function for climbing the stairs.</p>
</li>
<li>
<p>Here's how we can represent the different scenarios for climbing the stairs:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mn space="3"><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="2"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="3"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mn space="3"><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="2"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle space="2"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c=">"></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>We're passing the <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle></mjx-math></mjx-container> + <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="x"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="S"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="S"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="z"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container> and our target value of <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container> steps to our function <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container>.</p>
</li>
<li>
<p>Now, we need to determine how many times we need to to call <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container>.</p>
</li>
<li>
<p>We know from the diagram if <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mi size="s"><mjx-c c="c"></mjx-c></mjx-mi></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c=">"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container>, then we can ignore that way of climbing the stairs</p>
</li>
<li>
<p>We also know if <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mi size="s"><mjx-c c="c"></mjx-c></mjx-mi></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container>, then we have found a valid way to climb the steps.</p>
</li>
<li>
<p>Using this knowledge we can come up with the following:</p>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Climbing Stairs Solution 1">
<pre vue-slot="code">
var climbStairs = function(n) {
  return wayToClimb(0, n);
};

var wayToClimb = function(stepsTaken, n) {
  if (stepsTaken > n) {
    return 0;
  }

  if (stepsTaken === n) {
    return 1;
  }

  return wayToClimb(stepsTaken + 1, n) + wayToClimb(stepsTaken + 2, n);
};

let n = 4;
console.log(climbStairs(n));

</pre>
</code-fence>
<h2 id="downsides"> Downsides</h2>
<ul>
<li>
<p>Our solution will work, but it's not efficient.</p>
</li>
<li>
<p>We'll actually get a time limit exceeded error on LeetCode if we submit this.</p>
</li>
<li>
<p>This is because the <span>time complexity</span> of our solution is <span>O(2<sup>n</sup>)</span>.</p>
</li>
<li>
<p>We can look at our <span>recursion tree</span> above and count the number of nodes to determine the <span>time complexity</span>.</p>
</li>
<li>
<p>Now, we won't count exactly <span>2<sup>n</sup></span> nodes since our <span>recursive formula</span> isn't exactly <span>2<sup>n</sup></span>, but when dealing with <span>Big-Oh</span> we only care about the behavior as <span>n</span> becomes very large.</p>
</li>
<li>
<p>We'll be improving this in the next post by drawing out <span>recursion trees</span> for larger values of <span>n</span> which will allow us to see an interesting pattern.</p>
</li>
</ul>
]]></content:encoded>
    </item>
    <item>
      <title>Climbing Stairs Solution 2</title>
      <link>https://codemonkeys.tech/climbing-stairs-solution-2/</link>
      <guid>https://codemonkeys.tech/climbing-stairs-solution-2/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Climbing Stairs Solution 2</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the second Solution &amp; Notes for the LeetCode problem Climbing Stairs! 🍌🐒</description>
      <pubDate>Thu, 01 Jul 2021 15:45:32 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="climbing-stairs-solution-2"> Climbing Stairs Solution 2</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/climbing-stairs/" target="_blank" rel="noopener noreferrer">Climbing Stairs <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>You are climbing a staircase. It takes <span>n</span> steps to reach the top.</p>
<p>Each time you can either climb <span>1</span> or <span>2</span> steps. In how many distinct ways can you climb to the top?</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>n = 2</span> <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>2</span></p>
<p>Explanation: There are <span>two</span> ways to climb to the top.<br>1. 1 step + 1 step<br>2. 2 steps</p>
<p>Ex 2) Input: <span>n = 3</span> <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>3</span></p>
<p>Explanation: There are <span>three</span> ways to climb to the top.<br>1. 1 step + 1 step + 1 step<br>2. 1 step + 2 steps<br>3. 2 steps + 1 step</p>
<h2 id="constraints"> Constraints</h2>
<ul>
<li><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="4"></mjx-c><mjx-c c="5"></mjx-c></mjx-mn></mjx-math></mjx-container></li>
</ul>
<h2 id="thought-process"> Thought Process</h2>
<ul>
<li>
<p>We previously came up with a solution for this problem by using a <span>recursive formula</span> that represents how many distinct ways we can climb the stairs.</p>
</li>
<li>
<p>The issue with the previous solution is it has a <span>time complexity</span> of <span>O(2<sup>n</sup>)</span> which is very inefficient.</p>
</li>
<li>
<p>To come up with a better solution we'll be drawing out multiple <span>recursion trees</span> to help us see a pattern.</p>
</li>
<li>
<p>When <span>n = 1</span> we have:</p>
</li>
</ul>
<Mermaid id="mermaid_382ee1e8" :graph="$dataBlock.mermaid_382ee1e8"></Mermaid><ul>
<li>
<p>From the diagram we can see there is <span>1 distinct way</span> to climb to the top when <span>n = 1</span> since we can ignore the scenarios where we take extra steps.</p>
</li>
<li>
<p>When <span>n = 2</span> we have:</p>
</li>
</ul>
<Mermaid id="mermaid_382ee21f" :graph="$dataBlock.mermaid_382ee21f"></Mermaid><ul>
<li>
<p>So, we have <span>2 distinct ways</span> to climb to the top.</p>
</li>
<li>
<p>When <span>n = 3</span> we have:</p>
</li>
</ul>
<Mermaid id="mermaid_382ee241" :graph="$dataBlock.mermaid_382ee241"></Mermaid><ul>
<li>
<p>So, we have <span>3 distinct ways</span> to climb to the top.</p>
</li>
<li>
<p>When <span>n = 4</span> we have:</p>
</li>
</ul>
<Mermaid id="mermaid_64a570dc" :graph="$dataBlock.mermaid_64a570dc"></Mermaid><ul>
<li>
<p>So, we have <span>5 distinct ways</span> to climb to the top.</p>
</li>
<li>
<p>Now, let's take a look at our cases from <span>n = 1</span> to <span>n = 2</span> and see if we can find a pattern:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Here, <span>waysToClimb</span> denotes our function for determining how many unique ways we can climb the stairs.</p>
</li>
<li>
<p>This sequence of numbers follows the <span>Fibonacci</span> sequence with the only difference being the value of the <span>1<sup>st</sup></span> and <span>2<sup>nd</sup></span> terms.</p>
</li>
<li>
<p>Here, the <span>1<sup>st</sup></span> term has a value of <span>1</span> and the <span>2<sup>nd</sup></span> term has a value of <span>2</span>.</p>
</li>
<li>
<p>Also, notice that we know we have <span>two ways</span> to climb the stairs to reach the <span>n<sup>th</sup></span> step.</p>
</li>
<li>
<p>If we take <span>1 step</span>, then we're <span>n - 1</span> steps closer to <span>n</span>, and if we take <span>2 steps</span> then we're <span>n - 2</span> steps closer to <span>n</span>.</p>
</li>
<li>
<p>So, we can get the distinct number of ways to climb the steps by summing up the ways of climbing to the <span>n - 1 step</span> and the ways of climbing to the <span>n - 2 step</span> using the following formula:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mo space="3"><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn space="3"><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="3"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mo space="3"><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn space="3"><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c=">"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>The <span>Fibonacci</span> sequence is the following series of numbers:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="5"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="8"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="1"></mjx-c><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="2"></mjx-c><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="3"></mjx-c><mjx-c c="4"></mjx-c></mjx-mn><mjx-msub><mjx-mo noIC="true"><mjx-c c=","></mjx-c></mjx-mo><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mo><mjx-c c="22EF"></mjx-c></mjx-mo></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>The next number is found by <span>adding up the two numbers before it</span>.</p>
</li>
<li>
<p>For example, <span>5</span> is found by adding <span>2</span> and <span>3</span>.</p>
</li>
<li>
<p>The <span>first two terms</span> are called <span>seed numbers</span>, which we'll denote as:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-msub><mjx-mi noIC="true"><mjx-c c="f"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="2"><mjx-msub><mjx-mi noIC="true"><mjx-c c="f"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>Here's the formula used to characterize the sequence:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-msub><mjx-mi noIC="true"><mjx-c c="f"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mi size="s"><mjx-c c="n"></mjx-c></mjx-mi></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-msub><mjx-mi noIC="true"><mjx-c c="f"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="3"><mjx-c c="+"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="3"><mjx-msub><mjx-mi noIC="true"><mjx-c c="f"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-TeXAtom></mjx-script></mjx-msub></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c=">"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>The <span>seed numbers</span> for our problem are:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="b"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="2"><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="C"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-msub><mjx-mi noIC="true"><mjx-c c="b"></mjx-c></mjx-mi><mjx-script style="vertical-align: -0.15em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-script></mjx-msub></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Now that we know our pattern of climbing the stairs follows a <span>Fibonnaci</span> sequence we can implement the sequence in our code using the <span>waysToClimb</span> formula and the <span>seed numbers</span> we came up with.</p>
</li>
<li>
<p>This will improve the <span>time complexity</span> of our solution from the <span>O(2<sup>n</sup>)</span> solution we previously came up with.</p>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Climbing Stairs Solution 2">
<pre vue-slot="code">
var climbStairs = function(n) {
  if (n === 1) {
    return 1;
  } else if (n === 2) {
    return 2;
  } else {
    let waysToClimb1 = 1;
    let waysToClimb2 = 2;
    let waysToClimb;
    let i = 1;

    while (n - 1 > i) {
      waysToClimb = waysToClimb2 + waysToClimb1;
      waysToClimb1 = waysToClimb2;
      waysToClimb2 = waysToClimb;
      i++;
    }

    return waysToClimb;
  }
};

let n = 4;
console.log(climbStairs(n));

</pre>
</code-fence>
<h2 id="analysis"> Analysis</h2>
<ul>
<li>
<p>Since we're looping over the length of <span>n - 1</span> our <span>time complexity</span> is <span>O(n)</span> which is a much more efficient solution!</p>
</li>
<li>
<p>See if you can come up with an even more efficient solution using more properties of the <span>Fibonnaci</span> sequence!</p>
</li>
</ul>
]]></content:encoded>
    </item>
    <item>
      <title>Reverse String</title>
      <link>https://codemonkeys.tech/reverse-string/</link>
      <guid>https://codemonkeys.tech/reverse-string/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Reverse String</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the Solution &amp; Notes for the LeetCode problem Reverse String! 🍌🐒</description>
      <pubDate>Wed, 11 Aug 2021 15:35:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="reverse-string"> Reverse String</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/reverse-string/" target="_blank" rel="noopener noreferrer">Reverse String <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>Write a function that reverses a string. The input string is given as an array of characters <span>s</span>.</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>s</span> = [&quot;h&quot;, &quot;e&quot;, &quot;l&quot;, &quot;l&quot;, &quot;o&quot;] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>[&quot;o&quot;, &quot;l&quot;, &quot;l&quot;, &quot;e&quot;, &quot;h&quot;]</span></p>
<p>Ex 2) Input: <span>s</span> = [&quot;H&quot;, &quot;a&quot;, &quot;n&quot;, &quot;n&quot;, &quot;a&quot;, &quot;h&quot;] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>[&quot;h&quot;, &quot;a&quot;, &quot;n&quot;, &quot;n&quot;, &quot;a&quot;, &quot;H&quot;]</span></p>
<h2 id="constraints"> Constraints</h2>
<ul>
<li>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="."></mjx-c></mjx-mo><mjx-mi space="2"><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="g"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></p>
</li>
<li>
<p><span>s[i]</span> is a printable ASCII character.</p>
</li>
<li>
<p>Do not allocate extra space for another array. You must do this <span>in-place</span> with <span>O(1) extra memory</span>.</p>
</li>
</ul>
<h2 id="what-is-a-printable-ascii-character"> What is a printable ASCII Character?</h2>
<ul>
<li>
<p>ASCII stands for American Standard Code for Information Interchange and it consists of 33 non-printable and 95 printable characters.</p>
</li>
<li>
<p>You can check out the non-printable, printable, and extended ASCII characters <a href="https://www.ascii-code.com/" target="_blank" rel="noopener noreferrer">here<i>Content not supported</i></a>.</p>
</li>
<li>
<p>For this problem we only care about the printable ASCII characters.</p>
</li>
</ul>
<h2 id="what-does-in-place-mean"> What does In-Place Mean?</h2>
<ul>
<li>
<p><span>In-place</span> refers to an algorithm that transforms input using no auxiliary data structure.</p>
</li>
<li>
<p>So, we <span>cannot</span> allocate extra space for another array, a hash table, or any other data structure.</p>
</li>
<li>
<p>Another way of saying this is we must use <span>O(1) extra memory</span>.</p>
</li>
</ul>
<h2 id="thought-process"> Thought Process</h2>
<ul>
<li>
<p>Let's take our two examples from earlier and find a way to model the reversing of the characters in <span>s</span>.</p>
</li>
<li>
<p>Let's start with Ex 1)</p>
<ul>
<li>Initially, we have</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.056em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.066em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p>and after reversing <span>s</span> our output should be:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.066em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.056em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>To perform the reversal we need to swap the characters in <span>s</span>.</p>
</li>
<li>
<p>We can start by swapping the <span>leftmost</span> character and the <span>rightmost</span> character.</p>
</li>
<li>
<p>Then we'll move to the <span>second leftmost</span> character and the <span>second rightmost</span> character and swap them.</p>
</li>
<li>
<p>We'll continue this process until <span>every</span> character has been swapped if we have an <span>even</span> number of characters, or until we have <span>one</span> unswapped character left if we have an <span>odd</span> number of characters.</p>
</li>
<li>
<p>To perform this swapping we'll need to loop over <span>s</span> while there are still characters that can be swapped.</p>
</li>
<li>
<p>Let's visualize this process to help us see how the swapping will occur and to better understand what we need to keep track of.</p>
<ul>
<li>
<p><span>1<sup>st</sup> Iteration</span>:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.056em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.066em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Current Leftmost Character: <span>h</span></p>
</li>
<li>
<p>Current Rightmost Character: <span>o</span></p>
</li>
<li>
<p>Now, we can swap the characters by assigning <span>s[0]</span> to be <span>s[4]</span>, but if we want to assign <span>s[4]</span> to be <span>s[0]</span>, then we must first store <span>s[0]</span> in a <span>temp</span> variable.</p>
</li>
<li>
<p>Storing <span>s[0]</span> in a <span>temp</span> variable will allow us to still have the original character that was stored in <span>s[0]</span>.</p>
</li>
<li>
<p>Here's the steps for the swapping process:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>Here's <span>s</span> after the 1<sup>st</sup> swap:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.066em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.056em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p><span>2<sup>nd</sup> Iteration</span>:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.066em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.056em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Current Leftmost Character: <span>e</span></p>
</li>
<li>
<p>Current Rightmost Character: <span>l</span></p>
</li>
<li>
<p>Now, we can swap the characters by assigning <span>s[1]</span> to be <span>s[3]</span> and by assinging <span>s[3]</span> to be <span>s[1]</span> using the swapping process from before.</p>
</li>
<li>
<p>Here's the steps for the swapping process:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>Here's <span>s</span> after the 2<sup>nd</sup> swap:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.066em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base style="padding-left: 0.028em"><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.056em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>There are no unswapped characters left to swap with our only remaining unswapped character, <span>s[2]</span>, so the reversal is complete.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>To perform these swaps we had to keep track of the index of our <span>current leftmost character</span> which we'll denote with <span>i</span> and the index of our <span>current rightmost character</span> which we'll denote with <span>j</span>.</p>
</li>
<li>
<p>Keeping track of the <span>current leftmost</span> index required us to start with <span>i = 0</span> and to increment <span>i</span> on each subsequent iteration.</p>
</li>
<li>
<p>Keeping track of the <span>current rightmost</span> index required us to start with <span>j = s.length - 1</span> and to decrement <span>j</span> on each subsequent iteration.</p>
</li>
<li>
<p>We continued the loop while <span>i</span> &lt; <span>j</span>.</p>
</li>
</ul>
</li>
<li>
<p>Let's now look at Ex 2)</p>
<ul>
<li>Initially, we have</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p>and after reversing <span>s</span> our output should be:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>We need to swap the characters in <span>s</span> again like in Ex) 1.</p>
</li>
<li>
<p>Let's visualize this process to help us see how the swapping will occur for this example:</p>
<ul>
<li>
<p><span>1<sup>st</sup> Iteration</span>:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="5"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Current Leftmost Character: <span>H</span></p>
</li>
<li>
<p>Current Rightmost Character: <span>h</span></p>
</li>
<li>
<p>Now, we can swap the characters by assigning <span>s[0]</span> to be <span>s[5]</span> and by assinging <span>s[5]</span> to be <span>s[0]</span> using the swapping process from before.</p>
</li>
<li>
<p>Here's the steps for the swapping process:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="5"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="5"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>Here's <span>s</span> after the 1<sup>st</sup> swap:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p><span>2<sup>nd</sup> Iteration</span>:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Current Leftmost Character: <span>a</span></p>
</li>
<li>
<p>Current Rightmost Character: <span>a</span></p>
</li>
<li>
<p>Now, we can swap the characters by assigning <span>s[1]</span> to be <span>s[4]</span> and by assinging <span>s[4]</span> to be <span>s[1]</span> using the swapping process from before.</p>
</li>
<li>
<p>Here's the steps for the swapping process:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>Here's <span>s</span> after the 2<sup>nd</sup> swap:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p>Note if you wanted to you could include a check to see if the characters are the same before swapping since the result after swapping will be the same.</p>
</li>
<li>
<p><span>3<sup>rd</sup> Iteration</span>:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>Current Leftmost Character: <span>n</span></p>
</li>
<li>
<p>Current Rightmost Character: <span>n</span></p>
</li>
<li>
<p>Now, we can swap the characters by assigning <span>s[2]</span> to be <span>s[3]</span> and by assinging <span>s[3]</span> to be <span>s[2]</span> using the swapping process from before.</p>
</li>
<li>
<p>Here's the steps for the swapping process:</p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>Here's <span>s</span> after the 3<sup>rd</sup> swap:</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.111em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.123em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.2em; padding-left: 0.088em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover space="2"><mjx-over style="padding-bottom: 0.184em; padding-left: 0.31em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mi><mjx-c c="H"></mjx-c></mjx-mi></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<ul>
<li>Every character has been swapped, so the reversal is complete.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Notice again we continued the loop while <span>i</span> &lt; <span>j</span>.</p>
</li>
<li>
<p>Using the model we described above we can come up with the following implementation:</p>
</li>
</ul>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Reverse String">
<pre vue-slot="code">
var reverseString = function(s) {
  let temp;
  let i = 0;
  let j = s.length - 1;

  while (i < j) {
    temp = s[i];
    s[i] = s[j];
    s[j] = temp;
    i++;
    j--;
  }
};

// Case 1: s has an odd length
s = ['h', 'e', 'l', 'l', 'o'];
reverseString(s);
console.log(s);

// Case 2: s has an even length
s = ['H', 'a', 'n', 'n', 'a', 'h'];
reverseString(s);
console.log(s);
</pre>
</code-fence>
]]></content:encoded>
    </item>
    <item>
      <title>Contains Duplicate</title>
      <link>https://codemonkeys.tech/contains-duplicate/</link>
      <guid>https://codemonkeys.tech/contains-duplicate/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Contains Duplicate</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the Solution &amp; Notes for the LeetCode problem Contains Duplicate! 🍌🐒</description>
      <pubDate>Fri, 06 Aug 2021 18:24:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="contains-duplicate"> Contains Duplicate</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/contains-duplicate/" target="_blank" rel="noopener noreferrer">Contains Duplicate <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>Given an <span>integer</span> array <span>nums</span>, return <span>true</span> if any value appears <span>at least twice</span>, and return <span>false</span> if every element is distinct.</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>nums</span> = [1, 2, 3, 1] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>true</span> since 1 appears twice.</p>
<p>Ex 2) Input: <span>nums</span> = [1, 2, 3, 4] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>false</span> since no value appears twice.</p>
<p>Ex 3) Input: <span>nums</span> = [1, 1, 1, 3, 3, 4, 3, 2, 4, 2] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>true</span> since 1, 3, and 2 appear more than once.</p>
<p>Ex 4) Input: <span>nums</span> = [] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>false</span> since there are no values.</p>
<h2 id="constraints"> Constraints</h2>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="."></mjx-c></mjx-mo><mjx-mi space="2"><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="g"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="5"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></p>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="9"></mjx-c></mjx-mn></mjx-script></mjx-msup><mjx-mo><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="9"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></p>
<h2 id="thought-process"> Thought Process</h2>
<ul>
<li>
<p>By looking at the examples, the 1<sup>st</sup> thought that comes to mind may be to simply take each value in <span>nums</span>, and compare it with every other value.</p>
<ul>
<li>
<p>Basically, we'll be comparing each pair of values in <span>nums</span> to see if a duplicate has occurred.</p>
</li>
<li>
<p>To do this we'll start at the <span>first</span> value in <span>nums</span>, and compare it with each value to the right until we reach the end of <span>nums</span>.</p>
</li>
<li>
<p>Then we'll take the <span>second</span> value in nums, and compare it with each value to the right until we reach the end of <span>nums</span>.</p>
</li>
<li>
<p>We repeat this process until we reach the end of <span>nums</span> in the worst case or until we find a duplicate value.</p>
</li>
<li>
<p>Here's a visualization for <span>nums</span> = [1, 2, 3] which represents a worst case scenario:</p>
<ul>
<li>
<p>Let's take our 1<sup>st</sup> value in <span>nums</span>, and compare it with each value to the right of it:</p>
<ul>
<li><span>1<sup>st</sup> Comparison:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2260"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="N"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li><span>2<sup>nd</sup> Comparison:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #cc99ff"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #cc99ff"><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2260"></mjx-c></mjx-mo><mjx-mstyle style="color: #cc99ff" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="N"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
</li>
<li>
<p>Now, let's take our 2<sup>nd</sup> value in <span>nums</span>, and compare it with each value to the right of it:</p>
<ul>
<li><span>3<sup>rd</sup> Comparison:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #cc99ff"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #cc99ff"><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2260"></mjx-c></mjx-mo><mjx-mstyle style="color: #cc99ff" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="N"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="f"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>The 3<sup>rd</sup> value in <span>nums</span> is also the last value, so there's no more comparisons to be made.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>To achieve this we'll need to loop over each value in <span>nums</span>, and for each iteration of this loop we need to compare our current value which will denote as <span>nums[i]</span> with each value to the right of it.</p>
</li>
<li>
<p>The process of comparing <span>nums[i]</span> with each value to the right of it means we'll need a nested for loop that loops from <span>nums[i + 1]</span> to the last value in <span>nums</span>.</p>
</li>
<li>
<p>A nested for loop <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> a time complexity of <mjx-container jax="CHTML"><mjx-math><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="O"></mjx-c></mjx-mi><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-msup><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: 0.363em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-script></mjx-msup><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container> which is not efficient and will result in a Time Limit Exceeded error on LeetCode.</p>
</li>
</ul>
</li>
<li>
<p>Before checking for duplicate values, we can realize that if we <span>sort nums</span> any duplicate values will be consecutive.</p>
<ul>
<li>
<p>Let's visualize this with an example for <span>nums</span> = [1, 2, 3, 1]:</p>
<ul>
<li>
<p>Sorting <span>nums</span> gives us:</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mo><mjx-c c="("></mjx-c></mjx-mo><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c=")"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p>Now, we can loop over <span>nums</span> and check for duplicates values.</p>
</li>
</ul>
</li>
<li>
<p>Looping over <span>nums</span> has a time complexity of <span>O(n)</span>, and the sorting algorithm can have a time complexity as good as <span>O(nlogn)</span> if something like heapsort is used.</p>
</li>
<li>
<p>So, the overall time complexity is <span>O(nlogn)</span> since it's the dominating factor.</p>
</li>
</ul>
</li>
<li>
<p>Solving this problem requires the ability to efficiently search for values, and a great way to do that is to use a <span>hash table</span>.</p>
<ul>
<li>
<p>A <span>hash table</span> is an object that maps keys to values.</p>
</li>
<li>
<p>The search and insert opertions in a hash table have a time complexity of <span>O(1)</span>.</p>
</li>
<li>
<p>Using a <span>hash table</span> will allow us to store each value in <span>nums</span> as a key, and we can map a value of let's say <span>true</span> to it if it's the first time we've seen the value.</p>
</li>
<li>
<p>Now, to create our <span>hash table</span> we can loop over <span>nums</span> then check to see if the key is present.</p>
</li>
<li>
<p>If the key is present, then we have found a duplicate, and we'll return true.</p>
</li>
<li>
<p>If the key isn't present, then we'll store the current value of <span>nums</span> as a key in our <span>hash table</span> with a value of <span>true</span>.</p>
</li>
<li>
<p>If no key appears twice, then <span>nums</span> has no duplicates, and we'll return false.</p>
</li>
<li>
<p>Here's a visualization of creating our <span>hash table</span> which we'll denote as <span>obj</span> for <span>nums</span> = [1, 2, 1]:</p>
<ul>
<li><span>1<sup>st</sup> Iteration:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="1"></mjx-c></mjx-mn></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>So, we'll store the value of <span>nums[0]</span> as a key in our <span>hash table</span> with a value of true.</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p><span>2<sup>nd</sup> Iteration:</span></p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="2"></mjx-c></mjx-mn></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>So, we'll store the value of <span>nums[1]</span> as a key in our <span>hash table</span> with a value of true.</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p><span>3<sup>rd</sup> Iteration:</span></p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="1"></mjx-c></mjx-mn></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mn space="2"><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>Since the same key appeared in our <span>hash table</span>, a duplicate has been found in <span>nums</span>, so we'll return false.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Contains Duplicate">
<pre vue-slot="code">
var containsDuplicate = function(nums) {
  const obj = {};
  for (let i = 0; i < nums.length; i++) {
    if (obj[nums[i]]) {
      return true;
    }
    obj[nums[i]] = true;
  }

  return false;
};

nums = [1, 2, 3, 1];
console.log(containsDuplicate(nums));
</pre>
</code-fence>
]]></content:encoded>
    </item>
    <item>
      <title>Single Number</title>
      <link>https://codemonkeys.tech/single-number/</link>
      <guid>https://codemonkeys.tech/single-number/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Single Number</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the Solution &amp; Notes for the LeetCode problem Single Number! 🍌🐒</description>
      <pubDate>Tue, 29 Jun 2021 17:23:42 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="single-number"> Single Number</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/single-number/" target="_blank" rel="noopener noreferrer">Single Number <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>Given a <span>non-empty</span> array of integers <span>nums</span>, every element appears <span>twice</span> excepet for one. Find that single one.</p>
<p>You must implement a solution with a <span>linear runtime</span> complexity and use only <span>constant extra space</span>.</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>nums</span> = [2, 2, 1] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>1</span> since 1 appears once.</p>
<p>Ex 2) Input: <span>nums</span> = [4, 1, 2, 1, 2] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>4</span> since 4 appears once.</p>
<p>Ex 3) Input: <span>nums</span> = [1] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>1</span> since 1 appears once.</p>
<h2 id="constraints"> Constraints</h2>
<ul>
<li>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="."></mjx-c></mjx-mo><mjx-mi space="2"><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="g"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo space="3"><mjx-c c="2217"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></p>
</li>
<li>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo space="3"><mjx-c c="2217"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-script></mjx-msup><mjx-mo><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo space="3"><mjx-c c="2217"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></p>
</li>
<li>
<p>Each element in the array appears <span>twice</span> except for one element which appears only once.</p>
</li>
</ul>
<h2 id="what-does-linear-runtime-mean"> What does Linear Runtime Mean?</h2>
<ul>
<li>
<p>A <span>linear runtime</span> means our solution must have a time complexity of <span>O(n)</span>.</p>
</li>
<li>
<p>So, it's ok to use a loop in our solution but not a nested loop.</p>
</li>
</ul>
<h2 id="what-does-using-constant-extra-space-mean"> What does Using Constant Extra Space Mean?</h2>
<ul>
<li>
<p>Our given space complexity is <span>O(n)</span> since we're given <span>nums</span> which is an array of <span>length n</span>.</p>
</li>
<li>
<p>Since we want to use <span>constant extra space</span>, our solution must have at most <span>O(n)</span> space complexity.</p>
</li>
</ul>
<h2 id="thought-process"> Thought Process</h2>
<ul>
<li>
<p>We need to iterate over <span>nums</span> since we need to find out which element appears only once.</p>
</li>
<li>
<p>The iteration can be done using a for loop.</p>
</li>
<li>
<p>Now, to keep track of how many times an element has appeared in <span>nums</span> we can use a <span>hash table</span>.</p>
</li>
<li>
<p>A <span>hash table</span> is an object that maps keys to values.</p>
</li>
<li>
<p>Here, the key will represent the element in <span>nums</span>, and the value can be set to <span>true</span> if it has appeared once.</p>
</li>
<li>
<p>If the key appears again we can remove it since we know every element other than the unique element appears <span>twice</span>.</p>
</li>
<li>
<p>After removing the keys that appear <span>twice</span>, we just need to return the key of our <span>hash table</span> that appeared once.</p>
</li>
<li>
<p>Here's a visualization of creating our <span>hash table</span> which we'll denote as <span>myObj</span> for <span>nums</span> = [2, 2, 1]:</p>
<ul>
<li><span>1<sup>st</sup> Iteration:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="2"></mjx-c></mjx-mn></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="O"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>So, we'll store the value of <span>nums[0]</span> as a key in our <span>hash table</span> with a value of true.</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="O"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p><span>2<sup>nd</sup> Iteration:</span></p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="2"></mjx-c></mjx-mn></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="O"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c=":"></mjx-c></mjx-mo><mjx-mi space="4"><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>So, we'll remove the 2 key from our <span>hash table</span> since it has now appeared twice.</p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="O"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
</li>
<li>
<p><span>3<sup>rd</sup> Iteration:</span></p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="1"></mjx-c></mjx-mn></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi><mjx-mi><mjx-c c="O"></mjx-c></mjx-mi><mjx-mi><mjx-c c="b"></mjx-c></mjx-mi><mjx-mi><mjx-c c="j"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="{"></mjx-c></mjx-mo><mjx-mo><mjx-c c="}"></mjx-c></mjx-mo><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="k"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>So, we'll store the value of <span>nums[2]</span> as a key in our <span>hash table</span> with a value of true.</p>
</li>
<li>
<p>Now, we have reached the end of the loop, so we'll return the value of the only key left in our <span>hash table</span> which in this case is 1.</p>
</li>
</ul>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Single Number">
<pre vue-slot="code">
var singleNumber = function(nums) {
  const myObj = {};
  for (let i = 0; i < nums.length; i++) {
    if (myObj[nums[i]]) {
      delete myObj[nums[i]];
    } else {
      myObj[nums[i]] = true;
    }
  }

  return Object.keys(myObj)[0];
};

nums = [2, 2, 1];
console.log(singleNumber(nums));

</pre>
</code-fence>
]]></content:encoded>
    </item>
    <item>
      <title>Remove Duplicates from Sorted Array</title>
      <link>https://codemonkeys.tech/remove-duplicates-from-sorted-array/</link>
      <guid>https://codemonkeys.tech/remove-duplicates-from-sorted-array/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Remove Duplicates from Sorted Array</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the Solution &amp; Notes for the LeetCode problem Remove Duplicates from Sorted Array! 🍌🐒</description>
      <pubDate>Sat, 03 Jul 2021 17:25:34 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="remove-duplicates-from-sorted-array"> Remove Duplicates from Sorted Array</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/remove-duplicates-from-sorted-array/" target="_blank" rel="noopener noreferrer">Remove Duplicates from Sorted Array <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>Given an <span>integer</span> array <span>nums</span> sorted in <span>non-decreasing order</span>, remove the duplicates <span>in-place</span> such that each unique element appears only <span>once</span>. The relative <span>order</span> of the elements should be kept the <span>same</span>.</p>
<p>Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the <span>first part</span> of the array <span>nums</span>. More formally, if there are <span>k</span> elements after removing the duplicates, then the first <span>k</span> elements of <span>nums</span> should hold the final result. It does not matter what you leave beyond the first <span>k</span> elements.</p>
<p>Return <span>k</span> after placing the final result in the first <span>k</span> slots of <span>nums</span>.</p>
<p>Do <span>not</span> allocate extra space for another array. You must do this by <span>modifying the input array in-place</span> with <span>O(1)</span> extra memory.</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>nums</span> = [1, 1, 2] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>2, nums = [1, 2, _]</span></p>
<p>Explanation: Your function should return <span>k = 2</span>, with the first two elements of <span>nums</span> being <span>1</span> and <span>2</span> respectively.<br>It does not matter what you leave beyond the returned k (hence they are underscores).</p>
<p>Ex 2) Input: <span>nums</span> = [0, 0, 1, 1, 1, 2, 2, 3, 3, 4] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>5, nums = [0, 1, 2, 3, 4, _, _, _, _, _]</span></p>
<p>Explanation: Your function should return <span>k = 5</span>, with the first five elements of <span>nums</span> being <span>0, 1, 2, 3,</span> and <span>4</span> respectively.<br>It does not matter what you leave beyond the returned k (hence they are underscores).</p>
<h2 id="constraints"> Constraints</h2>
<ul>
<li>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="."></mjx-c></mjx-mo><mjx-mi space="2"><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="g"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo space="3"><mjx-c c="2217"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></p>
</li>
<li>
<p><mjx-container jax="CHTML"><mjx-math><mjx-mo><mjx-c c="2212"></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #ebeb33" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn></mjx-math></mjx-container></p>
</li>
<li>
<p><span>nums</span> is sorted in <span>non-decreasing</span> order.</p>
</li>
</ul>
<h2 id="what-does-in-place-mean"> What does In-Place mean?</h2>
<ul>
<li>
<p>Let's start by defining <span>in-place</span> which is an algorithm that transforms input using no auxiliary data structure.</p>
</li>
<li>
<p>So, we <span>cannot</span> allocate extra space for another array, a hash table, or any other data structure.</p>
</li>
<li>
<p>Another way of saying this is we must use <span>O(1) extra memory</span>.</p>
</li>
</ul>
<h2 id="removing-or-moving-duplicates-maintaining-relative-order"> Removing (or Moving) Duplicates &amp; Maintaining Relative Order</h2>
<ul>
<li>
<p>In JavaScript we <span>can</span> change the length of an array by adding or removing elements, but in other languages like C for example we <span>cannot</span> change the length of an array after it's created.</p>
</li>
<li>
<p>So, to get around this we're told we can place the result in the first part of <span>nums</span>.</p>
</li>
<li>
<p>Recall the formal description from earlier: if there are <span>k</span> elements after removing the duplicates, then the first <span>k</span> elements of <span>nums</span> should hold the final result, and it doesn't matter what is left after the first <span>k</span> elements.</p>
</li>
<li>
<p>The examples from earlier should make this clearer:</p>
<ul>
<li>
<p>Ex 1) Input: <span>nums</span> = [1, 1, 2] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>2, nums = [1, 2, _ ]</span></p>
</li>
<li>
<p>Notice:</p>
<ul>
<li>
<p>The output maintains the relative order for <span>nums</span> by keeping the elements we care about in <span>non-decreasing</span> order.</p>
</li>
<li>
<p>Also, recall if we're moving the duplicates it doesn't matter what we leave after the <span>k<sup>th</sup></span> element, so those elements were denoted with underscores.</p>
</li>
</ul>
</li>
<li>
<p>Ex 2) Input: <span>nums</span> = [0, 0, 1, 1, 1, 2, 2, 3, 3, 4] <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>5, nums = [0, 1, 2, 3, 4, _, _, _, _, _]</span></p>
</li>
<li>
<p>Notice:</p>
<ul>
<li>
<p>The output maintains the relative order again for <span>nums</span> by keeping the elements we care about in <span>non-decreasing</span> order.</p>
</li>
<li>
<p>And again, recall if we're moving the duplicates it doesn't matter what we leave after the <span>k<sup>th</sup></span> element, so those elements were denoted with underscores.</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="how-to-modify-nums-in-place"> How to Modify nums In-Place?</h2>
<ul>
<li>
<p>We're told we can only modify <span>nums in-place</span>.</p>
</li>
<li>
<p>Let's start with <span>nums</span> = [1, 1, 1, 2, 2], and see if we can come up with some way to move around the elements to get our desired output.</p>
</li>
<li>
<p>Let's start by taking our 1<sup>st</sup> element in <span>nums</span> and compare it with the 2<sup>nd</sup> element, then we can compare the 2<sup>nd</sup> element with the 3<sup>rd</sup> and so on...</p>
</li>
<li>
<p><span>1<sup>st</sup> Iteration:</span></p>
</li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="0"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2261"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo space="4"><mjx-c c="2261"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="W"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-msup><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: 0.413em"><mjx-mo size="s"><mjx-c c="2032"></mjx-c></mjx-mo></mjx-script></mjx-msup><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="v"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li><span>2<sup>nd</sup> Iteration:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="3"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2261"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo space="4"><mjx-c c="2261"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="W"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-msup><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: 0.413em"><mjx-mo size="s"><mjx-c c="2032"></mjx-c></mjx-mo></mjx-script></mjx-msup><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="v"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li><span>3<sup>rd</sup> Iteration:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="1"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2260"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo space="4"><mjx-c c="2260"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="W"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="v"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-msup><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.413em"><mjx-TeXAtom size="s"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom></mjx-script></mjx-msup></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="p"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="r"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="y"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="i"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mi><mjx-c c="T"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="w"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="c"></mjx-c></mjx-mi><mjx-mi><mjx-c c="a"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #cc99ff"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mo><mjx-c c="="></mjx-c></mjx-mo></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li><span>4<sup>th</sup> Iteration:</span></li>
</ul>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #ebeb33"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="="></mjx-c></mjx-mo><mjx-mo space="4"><mjx-c c="["></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="0"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #cc99ff"><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #cc99ff"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mn size="s"><mjx-c c="2"></mjx-c></mjx-mn></mjx-over><mjx-base><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.184em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33eb61"><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mover><mjx-over style="padding-bottom: 0.2em; padding-left: 0.073em"><mjx-mstyle size="s" style="color: #33ebeb"><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn></mjx-mstyle></mjx-over><mjx-base><mjx-mstyle style="color: #33ebeb"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle></mjx-base></mjx-mover><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-math></mjx-container></p></p>
<p><p><mjx-container jax="CHTML" display="true"><mjx-math display="true"><mjx-mstyle style="color: #33eb61"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="3"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mo space="4"><mjx-c c="2261"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33eb61"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle><mjx-mo space="4"><mjx-c c="2261"></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="4"><mjx-mn><mjx-c c="2"></mjx-c></mjx-mn></mjx-mstyle><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mi><mjx-c c="W"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-msup><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-script style="vertical-align: 0.413em"><mjx-mo size="s"><mjx-c c="2032"></mjx-c></mjx-mo></mjx-script></mjx-msup><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="d"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-TeXAtom><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="o"></mjx-c></mjx-mi><mjx-mi><mjx-c c="v"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi></mjx-TeXAtom><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mstyle style="color: #33ebeb"><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="u"></mjx-c></mjx-mi><mjx-mi><mjx-c c="m"></mjx-c></mjx-mi><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="["></mjx-c></mjx-mo><mjx-mn><mjx-c c="4"></mjx-c></mjx-mn><mjx-mo><mjx-c c="]"></mjx-c></mjx-mo></mjx-mstyle></mjx-math></mjx-container></p></p>
<ul>
<li>
<p>After the 4<sup>th</sup> iteration, there's nothing left to compare <span>nums[4]</span> with, so that's the last iteration we need.</p>
</li>
<li>
<p>During our iterations we had to keep track of our current element in <span>nums</span> which we'll call <span>nums[i]</span> and the next element in <span>nums</span> which will be <span>nums[i + 1]</span>.</p>
</li>
<li>
<p>We also had to keep track of which element we needed to replace in <span>nums</span> if we ran into an element we hadn't seen before which we'll call <span>nums[j]</span>.</p>
</li>
<li>
<p>So, to implement this we'll loop over <span>nums</span> from the beginning to the length of <span>nums - 1</span> since when we get to the last element there's nothing else for us to compare it with.</p>
</li>
<li>
<p>On each iteration we'll compare the current element of <span>nums</span> which is <span>nums[i]</span> with the next element of <span>nums</span> which is <span>nums[i + 1]</span>.</p>
</li>
<li>
<p>If they're not equal then we'll set <span>nums[j]</span> <span>=</span> <span>nums[i + 1]</span> where <span>j</span> gets initialized to <span>1</span>, and we'll increment <span>j</span> every time <span>nums[i]</span> doesn't equal <span>nums[i + 1]</span>.</p>
</li>
<li>
<p>We also need to remember the case of <span>nums.length = 0</span> which means we have no elements in our array, so we'll just return 0.</p>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Remove Duplicates from Sorted Array">
<pre vue-slot="code">
var removeDuplicates = function(nums) {
  const numsLength = nums.length;

  if (numsLength === 0) {
    return 0;
  }

  let j = 1;
  for (let i = 0; i < numsLength - 1; i++) {
    if (nums[i] !== nums[i + 1]) {
      nums[j] = nums[i + 1];
      j++;
    }
  }

  return j;
};

nums = [1, 1, 1, 2, 2];
console.log('k =', removeDuplicates(nums), 'nums =', nums);

</pre>
</code-fence>
]]></content:encoded>
    </item>
    <item>
      <title>Valid Anagram</title>
      <link>https://codemonkeys.tech/valid-anagram/</link>
      <guid>https://codemonkeys.tech/valid-anagram/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Valid Anagram</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Check out the Solution &amp; Notes for the LeetCode problem Valid Anagram! 🍌🐒</description>
      <pubDate>Fri, 02 Jul 2021 18:15:23 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="valid-anagram"> Valid Anagram</h1>
</template><h2 id="links"> Links</h2>
<p><a href="https://leetcode.com/problems/valid-anagram/" target="_blank" rel="noopener noreferrer">Valid Anagram <div>Problem<span>&nbsp;💡</span></div></a></p>
<p><a href="https://github.com/codemonkeysio/LeetCode" target="_blank" rel="noopener noreferrer">Get the code & notes on <div>GitHub<span>&nbsp;💻</span></div></a></p>
<h2 id="problem-description"> Problem Description</h2>
<p>Given two strings <span>s</span> and <span>t</span>, return <span>true</span>
if <span>t</span> is an <span>anagram</span> of <span>s</span>, and <span>false</span> otherwise.</p>
<h2 id="examples"> Examples</h2>
<p>Ex 1) Input: <span>s</span> = &quot;anagram&quot;, <span>t</span> = &quot;nagaram&quot; <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>true</span></p>
<p>Ex 2) Input: <span>s</span> = &quot;rat&quot;, <span>t</span> = &quot;car&quot; <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> Output: <span>false</span></p>
<h2 id="constraints"> Constraints</h2>
<ul>
<li><mjx-container jax="CHTML"><mjx-math><mjx-mn><mjx-c c="1"></mjx-c></mjx-mn><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mstyle style="color: #33eb61" space="4"><mjx-mi><mjx-c c="s"></mjx-c></mjx-mi><mjx-mo><mjx-c c="."></mjx-c></mjx-mo><mjx-mi space="2"><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="g"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo><mjx-c c=","></mjx-c></mjx-mo><mjx-mstyle style="color: #33ebeb" space="2"><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mo><mjx-c c="."></mjx-c></mjx-mo><mjx-mi space="2"><mjx-c c="l"></mjx-c></mjx-mi><mjx-mi><mjx-c c="e"></mjx-c></mjx-mi><mjx-mi><mjx-c c="n"></mjx-c></mjx-mi><mjx-mi><mjx-c c="g"></mjx-c></mjx-mi><mjx-mi><mjx-c c="t"></mjx-c></mjx-mi><mjx-mi><mjx-c c="h"></mjx-c></mjx-mi></mjx-mstyle><mjx-mo space="4"><mjx-c c="2264"></mjx-c></mjx-mo><mjx-mn space="4"><mjx-c c="5"></mjx-c></mjx-mn><mjx-mo space="3"><mjx-c c="2217"></mjx-c></mjx-mo><mjx-msup><mjx-mn><mjx-c c="1"></mjx-c><mjx-c c="0"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.393em"><mjx-mn size="s"><mjx-c c="4"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math></mjx-container></li>
<li><span>s</span> and <span>t</span> consist of lowercase English letters</li>
</ul>
<h2 id="what-is-an-anagram"> What is an Anagram?</h2>
<ul>
<li>A word or a phrase that is formed by <span>rearranging</span> the letters of a different word or phrase typically using all of the original letters exactly <span>once</span>.</li>
</ul>
<h2 id="assumptions"> Assumptions</h2>
<ul>
<li>To clarify the provided constraints we're also assuming <span>s</span> and <span>t</span> contain no spaces, and we're only able to use each letter <span>once</span>.</li>
</ul>
<h2 id="how-to-check-if-t-is-an-anagram-of-s"> How to Check if t is an Anagram of s?</h2>
<ul>
<li>
<p>Since we're assuming we can only use each letter in <span>s</span> and <span>t</span> once, then for <span>t</span> to be an anagram of <span>s</span> they must be the same length.</p>
</li>
<li>
<p>We can first check that <span>s</span> and <span>t</span> are the same length, and if they aren't we can return false.</p>
</li>
<li>
<p>Now, if <span>s</span> and <span>t</span> are the same length, they must also contain the same letters.</p>
</li>
</ul>
<h3 id="how-to-check-if-s-and-t-contain-the-same-letters"> How to Check if s and t contain the same letters?</h3>
<ul>
<li>
<p>We're given <span>s</span> and <span>t</span> as strings, but we care about being able to examine each character in the strings. So, what we can do is create an array of characters for <span>s</span> and <span>t</span>.</p>
<ul>
<li>
<p>Ex 1) <span>s</span> = &quot;anagram&quot; <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> <span>sArray</span> = [&quot;a&quot;, &quot;n&quot;, &quot;a&quot;, &quot;g&quot;, &quot;r&quot;, &quot;a&quot;, &quot;m&quot;]<br><span>t</span> = &quot;nagaram&quot; <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> <span>tArray</span> = [&quot;n&quot;, &quot;a&quot;, &quot;g&quot;, &quot;a&quot;, &quot;r&quot;, &quot;a&quot;, &quot;m&quot;]</p>
</li>
<li>
<p>Ex 2) <span>s</span> = &quot;rat&quot; <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> <span>sArray</span> = [&quot;r&quot;, &quot;a&quot;, &quot;t&quot;]<br><span>t</span> = &quot;car&quot; <mjx-container jax="CHTML"><mjx-math><mjx-mstyle><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle><mjx-mo space="4"><mjx-c c="27F9"></mjx-c></mjx-mo><mjx-mstyle space="4"><mjx-mspace style="width: 0.278em"></mjx-mspace></mjx-mstyle></mjx-math></mjx-container> <span>tArray</span> = [&quot;c&quot;, &quot;a&quot;, &quot;r&quot;]</p>
</li>
</ul>
</li>
<li>
<p>We can use the <span>split()</span> method, and pass it a pattern of <span>&quot;&quot;</span>.</p>
</li>
<li>
<p>This tells <span>split()</span> to split our strings into substrings where a <span>&quot;&quot;</span> pattern occurs which is between each character in our strings.</p>
</li>
<li>
<p><span>split()</span> will then return an array of these substrings.</p>
</li>
<li>
<p>Now, we need a way to compare the letters of <span>sArray</span> with the letters of <span>tArray</span>.</p>
</li>
<li>
<p>We could take the first value of <span>sArray</span> and compare it with each value of <span>tArray</span>. Then break when the letters are the same, and keep track of which index the match occurred at. This will allow us to not use the value at the matched index again on the next comparison.</p>
</li>
<li>
<p>A simplier solution though is to realize that we can sort our arrays, and if <span>t</span> is an anagram of <span>s</span>, then our arrays will have all the same letters in the same order.</p>
<ul>
<li>
<p>Ex 1) <span>sArray.sort()</span> = [&quot;a&quot;, &quot;a&quot;, &quot;a&quot;, &quot;g&quot;, &quot;m&quot;, &quot;n&quot;, &quot;r&quot;]<br><span>tArray.sort()</span> = [&quot;a&quot;, &quot;a&quot;, &quot;a&quot;, &quot;g&quot;, &quot;m&quot;, &quot;n&quot;, &quot;r&quot;]</p>
</li>
<li>
<p>Ex 2) <span>sArray.sort()</span> = [&quot;a&quot;, &quot;r&quot;, &quot;t&quot;]<br><span>tArray.sort()</span> = [&quot;a&quot;, &quot;c&quot;, &quot;r&quot;]</p>
</li>
</ul>
</li>
<li>
<p>Then we can check if the letters in the arrays are equal by comparing each value at index <span>i</span> of <span>sArray</span> with each value at index <span>i</span> of <span>tArray</span>.</p>
</li>
<li>
<p>To do this we can loop over the length of one of the arrays, and if the values of our arrays at index <span>i</span> are <span>not</span> equal, then we can break the loop by returning false.</p>
</li>
<li>
<p>If the arrays are <span>equal</span>, then we'll loop over the entire length of our array and return true.</p>
</li>
</ul>
<h2 id="implementation"> Implementation</h2>
<code-fence lang="js" heading="Valid Anagram">
<pre vue-slot="code">
var isAnagram = function(s, t) {
  if (s.length === t.length) {
    let sArray = s.split('');
    let tArray = t.split('');

    sArray.sort();
    tArray.sort();

    for (let i = 0; i < s.length; i++) {
      if (sArray[i] !== tArray[i]) {
        return false;
      }
    }

    return true;

  } else {
    return false;
  }
};

let s = 'rat';
let t = 'car';

console.log(isAnagram(s, t));

</pre>
</code-fence>
]]></content:encoded>
    </item>
    <item>
      <title>Installing Fast Node Manager (fnm)</title>
      <link>https://codemonkeys.tech/installing-fnm/</link>
      <guid>https://codemonkeys.tech/installing-fnm/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Installing Fast Node Manager (fnm)</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to switch between Node versions extremely fast, then check out Installing Fast Node Manager (fnm)! 🍌🐒</description>
      <pubDate>Wed, 08 Dec 2021 21:27:15 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="installing-fast-node-manager-fnm"> Installing Fast Node Manager (fnm)</h1>
</template><h2 id="why-use-fnm"> Why use fnm?</h2>
<p><a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">Fast Node Manager (fnm)<i>Content not supported</i></a> is a fast and simple Node version manager built in <a href="https://www.rust-lang.org/" target="_blank" rel="noopener noreferrer">Rust<i>Content not supported</i></a>.</p>
<p>For those of you who haven't read the post <a href="/installing-nvm/">Installing Node Version Manager (nvm)</a>, a Node version manager allows you to <span>easily install and switch</span> between numerous versions of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>. This is useful when a project you’re working on requires a different version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> than what you currently have installed.</p>
<p>Here are some features of <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>:</p>
<ul>
<li>Cross-platform, i.e., supports Linux, macOS, and Windows</li>
<li>Single file, easy installation, and instant startup</li>
<li>Significantly faster than <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">Node Version Manager (nvm)<i>Content not supported</i></a></li>
<li>Works with <code>.node-version</code> and <code>.nvmrc</code> files</li>
</ul>
<p>Since <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> is much faster than <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>, it's my <span>preferred</span> way to manage my Node versions.</p>
<h2 id="installation"> Installation</h2>
<p>We'll be going over how to install <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> on Linux, macOS, and Windows. If you run into any issues with installation then check out the <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> repository for any updates.</p>
<div><p>Other Installation Methods</p>
<p>If you're interested in using <a href="https://doc.rust-lang.org/cargo/" target="_blank" rel="noopener noreferrer">Cargo<i>Content not supported</i></a> or downloading a release binary, then check out the <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> repository for installation instructions.</p>
</div>
<h3 id="linux"> Linux</h3>
<p>First make sure you have <code>curl</code> installed:</p>
<code-group>
<code-block title="Arch">
<div><pre><code>pacman -Sy <span>curl</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="Ubuntu">
<div><pre><code><span>apt-get</span> <span>install</span> <span>curl</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Next you can install <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> using either one of the following commands for <code>bash</code>, <code>zsh</code>, and <code>fish</code> shells.</p>
<p>Here we're setting the custom directory <code>$HOME/.local/bin</code> as the location to install <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> using <code>--install-dir</code>.</p>
<p>If you want to install <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> in a different location, then change <code>$HOME/.local/bin</code> to your preferred directory.</p>
<p>You can also remove <code>--install-dir</code> when installing to use the default directory <code>$HOME/.fnm</code>.</p>
<code-group>
<code-block title="Custom Directory">
<div><pre><code><span>curl</span> -fsSL https://fnm.vercel.app/install <span>|</span> <span>bash</span> -s -- --install-dir <span>$HOME</span>/.local/bin
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="Default Directory">
<div><pre><code><span>curl</span> -fsSL https://fnm.vercel.app/install <span>|</span> <span>bash</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Run the following command if you <span>don't</span> have <code>.local/bin</code> in your path and you're using the custom directory <code>$HOME/.local/bin</code>.</p>
<p>If you're using a different custom directory and you <span>don't</span> have it in your path, then replace <code>$HOME/.local/bin</code> with you're preferred directory.</p>
<code-group>
<code-block title="Setting PATH">
<div><pre><code><span>export</span> <span><span>PATH</span></span><span>=</span>/home/<span>$USER</span>/.local/bin/fnm:<span>$PATH</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Run the following command to upgrade <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>.</p>
<p>If you're using a different custom directory, then replace <code>$HOME/.local/bin</code> with you're preferred directory.</p>
<code-group>
<code-block title="Custom Directory">
<div><pre><code><span>curl</span> -fsSL https://fnm.vercel.app/install <span>|</span> <span>bash</span> -s -- --install-dir <span>$HOME</span>/.local/bin --skip-shell
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="Default Directory">
<div><pre><code><span>curl</span> -fsSL https://fnm.vercel.app/install <span>|</span> <span>bash</span> -s -- --install-dir <span>"./.fnm"</span> --skip-shell
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="macos"> macOS</h3>
<p>The <span>preferred</span> way to install on macOS is to use <a href="https://brew.sh/" target="_blank" rel="noopener noreferrer">Homebrew<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="Installing fnm">
<div><pre><code>brew <span>install</span> fnm
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Here's how to upgrade using <a href="https://brew.sh/" target="_blank" rel="noopener noreferrer">Homebrew<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="Upgrading fnm">
<div><pre><code>brew upgrade fnm
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="windows"> Windows</h3>
<p>You can manually install on Windows using either <a href="https://scoop.sh/" target="_blank" rel="noopener noreferrer">Scoop<i>Content not supported</i></a> or <a href="https://chocolatey.org/" target="_blank" rel="noopener noreferrer">Chocolatey<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="Scoop">
<div><pre><code>scoop <span>install</span> fnm
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="Chocolatey">
<div><pre><code>choco <span>install</span> fnm
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h2 id="shell-setup"> Shell Setup</h2>
<p>Before you can use <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>, you have to first set up your shell. We'll be going over how to set up <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> for <code>bash</code>, <code>zsh</code>, <code>fish</code>, and <code>powershell</code>.</p>
<div><p>Windows Command Prompt and Cmder</p>
<p>If you're interested in using Windows Command Prompt or Cmder then check out the <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> repository for instructions.</p>
</div>
<h3 id="bash"> Bash</h3>
<p>Add the following to your <code>.bashrc</code>:</p>
<code-group>
<code-block title="Bash">
<div><pre><code><span>eval</span> <span>"<span><span>$(</span>fnm <span>env</span><span>)</span></span>"</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="zsh"> Zsh</h3>
<p>Add the following to your <code>.zshrc</code>:</p>
<code-group>
<code-block title="Zsh">
<div><pre><code><span>eval</span> <span>"<span><span>$(</span>fnm <span>env</span><span>)</span></span>"</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="fish-shell"> Fish Shell</h3>
<p>Create <code>~/.config/fish/conf.d/fnm.fish</code> and add this line:</p>
<code-group>
<code-block title="Fish Shell">
<div><pre><code>fnm <span>env</span> <span>|</span> <span>source</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="powershell"> PowerShell</h3>
<p>Add this line to the end of your profile file:</p>
<code-group>
<code-block title="PowerShell">
<div><pre><code>fnm <span>env</span> --use-on-cd <span>|</span> Out-String <span>|</span> Invoke-Expression
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>On Windows, the profile is located at <code>~\Documents\PowerShell\Microsoft.PowerShell_profile.ps1</code> or <code>$PROFILE</code></p>
<p>On macOS and Linux, the profile is located at <code>~/.config/powershell/Microsoft.PowerShell_profile.ps1</code></p>
<h2 id="usage"> Usage</h2>
<p>Here are some useful commands to get started with <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>. You can find more commands <a href="https://github.com/Schniz/fnm/blob/master/docs/commands.md" target="_blank" rel="noopener noreferrer">here<i>Content not supported</i></a> or you can run <code>fnm --help</code> to see a list of subcommands and <code>fnm &lt;SUBCOMMAND&gt; --help</code> to see information for a specific subcommand.</p>
<code-group>
<code-block title="List All Remote Versions">
<div><pre><code>fnm ls-remote
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Install a Version">
<div><pre><code>fnm <span>install</span> <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="List All Installed Versions">
<div><pre><code>fnm <span>ls</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Choose a Version to Use">
<div><pre><code>fnm use <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Check Active Version">
<div><pre><code>fnm current
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Alias a Version">
<div><pre><code>fnm <span>alias</span> <span>16.11</span>.1 nickname
fnm use nickname
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Default a Version">
<div><pre><code>fnm default <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h2 id="completions"> Completions</h2>
<p>Here's how to set up <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> completions for <code>bash</code> and <code>zsh</code>:</p>
<h3 id="bash-2"> Bash</h3>
<code-group>
<code-block title="fnm Completions">
<div><pre><code><span>mkdir</span> -p ~/.config/bash/completions

<span>touch</span> ~/.config/bash/completions/_fnm

fnm completions --shell<span>=</span>bash <span>></span> ~/.config/bash/completions/_fnm
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>Add the following to your <code>.bashrc</code>:</p>
<code-group>
<code-block title="Set Up .bashrc">
<div><pre><code><span>fpath</span><span>+=</span>~/.config/bash/completions/_fnm
compinit
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<h3 id="zsh-2"> Zsh</h3>
<code-group>
<code-block title="fnm Completions">
<div><pre><code><span>mkdir</span> -p ~/.config/zsh/completions

<span>touch</span> ~/.config/zsh/completions/_fnm

fnm completions --shell<span>=</span>zsh <span>></span> ~/.config/zsh/completions/_fnm
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>Add the following to your <code>.zshrc</code>:</p>
<code-group>
<code-block title="Set Up .zshrc">
<div><pre><code><span>fpath</span><span>+=</span>~/.config/zsh/completions/_fnm
compinit
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
]]></content:encoded>
    </item>
    <item>
      <title>Installing Node Version Manager (nvm)</title>
      <link>https://codemonkeys.tech/installing-nvm/</link>
      <guid>https://codemonkeys.tech/installing-nvm/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Installing Node Version Manager (nvm)</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to be able to easily install and switch between Node versions, then check out Installing Node Version Manager (nvm)! 🍌🐒</description>
      <pubDate>Tue, 07 Dec 2021 22:01:15 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="installing-node-version-manager-nvm"> Installing Node Version Manager (nvm)</h1>
</template><h2 id="why-use-a-node-version-manager"> Why use a Node Version Manager?</h2>
<p>A Node version manager allows you to <span>easily install and switch</span> between numerous versions of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>. This is useful when a project you’re working on requires a different version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> than what you currently have installed.</p>
<h2 id="installation"> Installation</h2>
<p>We'll be going over how to install <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> on Linux and macOS.</p>
<div><p>Windows</p>
<p>Windows is not supported, but you can get it to work by setting up <a href="https://docs.microsoft.com/en-us/windows/wsl/" target="_blank" rel="noopener noreferrer">Windows Subsystem for Linux (WSL)<i>Content not supported</i></a>, <a href="https://gitforwindows.org/" target="_blank" rel="noopener noreferrer">GitBash<i>Content not supported</i></a>, or <a href="https://cygwin.com/" target="_blank" rel="noopener noreferrer">Cygwin<i>Content not supported</i></a>. Other alternatives exist that are not supported or developed by <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> like <a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noopener noreferrer">nvm-windows<i>Content not supported</i></a>. Check out the <a href="https://github.com/nvm-sh/nvm#important-notes" target="_blank" rel="noopener noreferrer">nvm Important Notes<i>Content not supported</i></a> for more alternatives and details.</p>
</div>
<p>Before installing make sure your using a POSIX-compliant shell like <code>sh</code>, <code>dash</code>, <code>ksh</code>, <code>zsh</code>, or <code>bash</code>.</p>
<div><p>Fish Shell</p>
<p>If you want to use <a href="https://fishshell.com/" target="_blank" rel="noopener noreferrer">fish<i>Content not supported</i></a>, then check out the <a href="https://github.com/nvm-sh/nvm#important-notes" target="_blank" rel="noopener noreferrer">nvm Important Notes<i>Content not supported</i></a> repository for alternatives.</p>
</div>
<p>If you run into any issues with installation, then be sure to check out the <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> repository for any updates and troubleshooting tips.</p>
<h3 id="linux-dependencies"> Linux Dependencies</h3>
<p>You can install <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> using either <code>curl</code> or <code>wget</code>.</p>
<p>Here's how to install <code>curl</code> for Linux:</p>
<code-group>
<code-block title="Arch">
<div><pre><code>pacman -Sy <span>curl</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="Ubuntu">
<div><pre><code><span>apt-get</span> <span>install</span> <span>curl</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Here's how to install <code>wget</code> for Linux:</p>
<code-group>
<code-block title="Arch">
<div><pre><code>pacman -Sy <span>wget</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="Ubuntu">
<div><pre><code><span>apt-get</span> <span>install</span> <span>wget</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="macos-dependencies"> macOS Dependencies</h3>
<p>macOS should already have <code>curl</code> installed, but you can use <a href="https://brew.sh/" target="_blank" rel="noopener noreferrer">Homebrew<i>Content not supported</i></a> to upgrade to the latest version:</p>
<code-group>
<code-block title="macOS">
<div><pre><code>brew <span>install</span> <span>curl</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you want to use <code>wget</code> on macOS, then you can use <a href="https://brew.sh/" target="_blank" rel="noopener noreferrer">Homebrew<i>Content not supported</i></a> to install it:</p>
<code-group>
<code-block title="macOS">
<div><pre><code>brew <span>install</span> <span>wget</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you're using OS X 10.9 or newer, you'll need to install <a href="https://developer.apple.com/xcode/whats-new/" target="_blank" rel="noopener noreferrer">Xcode<i>Content not supported</i></a> or just the <code>Command Line Tools</code>.</p>
<p>Here's a good post explaining how to install <a href="https://developer.apple.com/xcode/whats-new/" target="_blank" rel="noopener noreferrer">Xcode<i>Content not supported</i></a>:</p>
<ul>
<li><span><a href="https://www.freecodecamp.org/news/how-to-download-and-install-xcode/" target="_blank" rel="noopener noreferrer">How to Download Xcode and Install it on Your Mac – and Update it for iOS Development<i>Content not supported</i></a></span></li>
</ul>
<p>If you don't want to install <a href="https://developer.apple.com/xcode/whats-new/" target="_blank" rel="noopener noreferrer">Xcode<i>Content not supported</i></a>, then you can install only the <code>Command Line Tools</code> by following along with this post:</p>
<ul>
<li><span><a href="http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/" target="_blank" rel="noopener noreferrer">How to Install Command Line Tools in OS X Mavericks &amp; Yosemite (Without Xcode)<i>Content not supported</i></a></span></li>
</ul>
<h3 id="system-version"> System Version</h3>
<p>If you have a <span>system version</span> of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>, i.e., you downloaded and installed <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> without using <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>, then version mismatches may occur.</p>
<p>This can occur since versions installed by <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> will only be available to the user account it was installed on, and any other user accounts will use the <span>system version</span>.</p>
<p>If version mismatches are occurring or any other issues, then you can uninstall <code>node</code> and <code>npm</code> associated with the <span>system version</span> and just use versions installed by <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>.</p>
<p>Be sure to uninstall any globally installed <code>npm</code> packages associated with the <span>system version</span> as well.</p>
<p>Also, if you're using a <code>~/.npmrc</code> file it may not be compatible see <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm Compatibility Issues<i>Content not supported</i></a> in which case you should remove it.</p>
<p>When using <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>, you don't need to use <code>sudo npm install -g &lt;package&gt;</code> instead use <code>npm install -g &lt;package&gt;</code> when installing global packages.</p>
<p>Finally, if you're using a different node version manager like <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>, then you may run into issues with your installed versions from <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>. If this is the case, then uninstall the node version manager you will not be using to resolve the issues.</p>
<div><p>Preferred Node Manager</p>
<p>My preferred way to manage my node versions is with <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>. Check out <a href="/installing-fnm/">Installing Fast Node Manager (fnm)</a> to learn more about it.</p>
</div>
<h3 id="install-and-update-script"> Install and Update Script</h3>
<p>After installing the necessary dependencies, you can install or update <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> by using <code>curl</code> or <code>wget</code> on Linux or macOS:</p>
<code-group>
<code-block title="curl">
<div><pre><code><span>curl</span> -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh <span>|</span> <span>bash</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="wget">
<div><pre><code><span>wget</span> -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh <span>|</span> <span>bash</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>The above commands will download and run a script to install or update <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>.</p>
<p>The script clones the <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> repository to <code>~/.nvm</code>.</p>
<div><p>Additional Notes</p>
<p>If you're interested, check out the <a href="https://github.com/nvm-sh/nvm#additional-notes" target="_blank" rel="noopener noreferrer">nvm Additional Notes<i>Content not supported</i></a> for information on more parameters and how to customize the install source, directory, profile, and version for the install script.</p>
</div>
<p>After running the command above, you'll be prompted to close and reopen your terminal to start using <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>, or you can run the following commands to start using it in the current shell session:</p>
<code-group>
<code-block title="nvm Installation Commands">
<div><pre><code><span>export</span> <span>NVM_DIR</span><span>=</span><span>"<span>$HOME</span>/.config/nvm"</span> <span>&amp;&amp;</span> 
<span>[</span> -s <span>"<span>$NVM_DIR</span>/nvm.sh"</span> <span>]</span> <span>&amp;&amp;</span> <span>\</span>. <span>"<span>$NVM_DIR</span>/nvm.sh"</span> <span>&amp;&amp;</span> <span># This loads nvm</span>
<span>[</span> -s <span>"<span>$NVM_DIR</span>/bash_completion"</span> <span>]</span> <span>&amp;&amp;</span> <span>\</span>. <span>"<span>$NVM_DIR</span>/bash_completion"</span>  <span># This loads nvm bash_completion</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<p>The third line provides autocompletion for <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>. Here's some examples of the <a href="https://github.com/nvm-sh/nvm#usage-1" target="_blank" rel="noopener noreferrer">autocompletion usage<i>Content not supported</i></a>.</p>
<h3 id="verify-installation"> Verify Installation</h3>
<p>To verify the installation you can run the following command:</p>
<code-group>
<code-block title="Verify Installation">
<div><pre><code><span>command</span> -v nvm
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If the installation was successful, then the command should output <code>nvm</code>.</p>
<p>If you get no output after running the above command, then see the troubleshooting sections below.</p>
<h3 id="troubleshooting"> Troubleshooting</h3>
<p>Try closing the current terminal and opening a new terminal. Then try verifying the installation again.</p>
<p>Here are some examples of commands you can run depending on your shell:</p>
<code-group>
<code-block title="bash">
<div><pre><code><span>source</span> ~/.bashrc
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="zsh">
<div><pre><code><span>source</span> ~/.zshrc
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="ksh">
<div><pre><code><span>.</span> ~/.profile
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the command for your shell, try verifying the installation again.</p>
<p>If you're still experiencing issues verifying your installtion for Linux, then check out <a href="https://github.com/nvm-sh/nvm#troubleshooting-on-linux" target="_blank" rel="noopener noreferrer">Troubleshooting on Linux<i>Content not supported</i></a>.</p>
<p>For macOS check out <a href="https://github.com/nvm-sh/nvm#troubleshooting-on-macos" target="_blank" rel="noopener noreferrer">Troubleshooting on macOS<i>Content not supported</i></a> and <a href="https://github.com/nvm-sh/nvm#macos-troubleshooting" target="_blank" rel="noopener noreferrer">macOS Troubleshooting<i>Content not supported</i></a> which contain more specific information related to shell issues and to issues with Macs using the M1 chip.</p>
<p>For more general issues check out the <a href="https://github.com/nvm-sh/nvm#problems" target="_blank" rel="noopener noreferrer">Problems<i>Content not supported</i></a> section.</p>
<div><p>Other Installation Methods</p>
<p>Instead of using the script above, you can also perform a <a href="https://github.com/nvm-sh/nvm#git-install" target="_blank" rel="noopener noreferrer">git install<i>Content not supported</i></a> or a <a href="https://github.com/nvm-sh/nvm#manual-install" target="_blank" rel="noopener noreferrer">manual install<i>Content not supported</i></a> as well as a <a href="https://github.com/nvm-sh/nvm#manual-upgrade" target="_blank" rel="noopener noreferrer">manaul upgrade<i>Content not supported</i></a>. The minimum required <a href="https://git-scm.com/" target="_blank" rel="noopener noreferrer">git<i>Content not supported</i></a> version for the installation methods is v1.7.10.</p>
</div>
<h2 id="usage"> Usage</h2>
<p>Here are some useful commands to get started with <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>. You can run <code>nvm --help</code> to see a list of commands, their flags, and descriptions.</p>
<h3 id="check-nvm-version"> Check nvm Version</h3>
<p>The following command will display the version of <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="Check nvm Version">
<div><pre><code>nvm --version
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="list-remote-versions"> List Remote Versions</h3>
<p>The following commands will list the remote versions of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>.</p>
<p>List the all remote versions by using <code>ls-remote</code>:</p>
<code-group>
<code-block title="List All Remote Versions">
<div><pre><code>nvm ls-remote
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p><a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> has a release <a href="https://github.com/nodejs/Release#release-schedule" target="_blank" rel="noopener noreferrer">schedule<i>Content not supported</i></a> for long-term support (LTS).</p>
<p>List the LTS remote versions by using <code>--lts</code>:</p>
<code-group>
<code-block title="List All Remote LTS Versions">
<div><pre><code>nvm ls-remote --lts
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>List all of the LTS remote versions for a specific line by using, e.g., <code>--lts=boron</code>:</p>
<code-group>
<code-block title="List All Remote LTS Boron Versions">
<div><pre><code>nvm ls-remote --lts<span>=</span>boron
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>List all of the LTS remote versions for a given version number by providing, e.g., 16 to <code>ls-remote</code>:</p>
<code-group>
<code-block title="List All Remote Versions Matching 16">
<div><pre><code>nvm ls-remote <span>16</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="install-versions"> Install Versions</h3>
<p>The following commands are examples of how to install different versions of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>.</p>
<p>If you try to install a version and the installation fails, then run <code>nvm cache clear</code> to delete the cached versions.</p>
<p>Install the latest version by using the special default alias <code>node</code>:</p>
<code-group>
<code-block title="Install Latest Version">
<div><pre><code>nvm <span>install</span> node
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Install the latest LTS version by using <code>--lts</code>:</p>
<code-group>
<code-block title="Install Latest LTS Version">
<div><pre><code>nvm <span>install</span> --lts
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Install the latest LTS version for a specific line by using, e.g., <code>--lts=boron</code>:</p>
<code-group>
<code-block title="Install Latest LTS Boron Version">
<div><pre><code>nvm <span>install</span> --lts<span>=</span>boron
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Install a specific version by providing a version number:</p>
<code-group>
<code-block title="Install a Version">
<div><pre><code>nvm <span>install</span> <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="list-installed-versions"> List Installed Versions</h3>
<p>The following command will list all of the installed versions of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="List All Installed Versions">
<div><pre><code>nvm <span>ls</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="use-a-version"> Use a Version</h3>
<p>The following commands will set which version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> to use.</p>
<p>Use the latest version by using the special default alias <code>node</code>:</p>
<code-group>
<code-block title="Use Latest Version">
<div><pre><code>nvm use node
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Use the latest LTS version by using <code>--lts</code>:</p>
<code-group>
<code-block title="Use Latest LTS Version">
<div><pre><code>nvm use --lts
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Use the latest LTS version for a specific line by using, e.g., <code>--lts=boron</code>:</p>
<code-group>
<code-block title="Use Latest LTS Boron Version">
<div><pre><code>nvm use --lts<span>=</span>boron
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Use a specific version by providing a version number:</p>
<code-group>
<code-block title="Use a Version">
<div><pre><code>nvm use <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you have a <span>system version</span> installed, then you can use the special default alias <code>system</code> to use it:</p>
<code-group>
<code-block title="Use System Version">
<div><pre><code>nvm use system
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="check-active-version"> Check Active Version</h3>
<p>Check the currently active <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> version by using <code>current</code>:</p>
<code-group>
<code-block title="Check Active Version">
<div><pre><code>nvm current
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="set-aliases"> Set Aliases</h3>
<p>Set an alias for a specific <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> version by provding a name and a version.</p>
<p>Here, version 16.11.1 will get an alias of nickname:</p>
<code-group>
<code-block title="Alias a Version">
<div><pre><code>nvm <span>alias</span> nickname <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>The <span>default version</span> is the active version when opening new shells. The first installed version will get set as the <span>default version</span>. To change the <span>default version</span> run the command below.</p>
<p>Here, we're setting the <span>default version</span> to be 17.1.0:</p>
<code-group>
<code-block title="Alias the Default Version">
<div><pre><code>nvm <span>alias</span> default <span>17.1</span>.0
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="get-path-to-version"> Get Path to Version</h3>
<p>The following commands will get the path of where a <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> version was installed.</p>
<p>Get the path of where a version was installed by specifying a version number:</p>
<code-group>
<code-block title="Path to Version">
<div><pre><code>nvm <span>which</span> <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Get the path to where a version is installed by specifying an alias:</p>
<code-group>
<code-block title="Path to Version Using an Alias">
<div><pre><code>nvm <span>which</span> nickname
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="uninstall-versions"> Uninstall Versions</h3>
<p>The following commands are examples of how to uninstall different versions of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>.</p>
<p>Uninstall the latest version by using the special default alias <code>node</code>:</p>
<code-group>
<code-block title="Uninstall Latest Version">
<div><pre><code>nvm uninstall node
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Uninstall the latest LTS version by using <code>--lts</code>:</p>
<code-group>
<code-block title="Uninstall Latest LTS Version">
<div><pre><code>nvm uninstall --lts
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Uninstall the latest LTS version for a specific line by using, e.g., <code>--lts=boron</code>:</p>
<code-group>
<code-block title="Uninstall Latest LTS Boron Version">
<div><pre><code>nvm uninstall --lts<span>=</span>boron
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Uninstall a specific version by providing a version number:</p>
<code-group>
<code-block title="Uninstall a Version">
<div><pre><code>nvm uninstall <span>16.11</span>.1
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h2 id="uninstall-nvm"> Uninstall nvm</h2>
<p>To uninstall <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> run the following:</p>
<code-group>
<code-block title="Uninstall nvm">
<div><pre><code><span>rm</span> -rf <span>"<span>$NVM_DIR</span>"</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Then remove these lines from your <code>~/.bashrc</code>, <code>~/.zshrc</code>, <code>~/.profile</code>, etc.</p>
<code-group>
<code-block title="Remove these Lines">
<div><pre><code><span>export</span> <span>NVM_DIR</span><span>=</span><span>"<span>$HOME</span>/.config/nvm"</span>
<span>[</span> -s <span>"<span>$NVM_DIR</span>/nvm.sh"</span> <span>]</span> <span>&amp;&amp;</span> <span>\</span>. <span>"<span>$NVM_DIR</span>/nvm.sh"</span> <span># This loads nvm</span>
<span>[</span> -s <span>"<span>$NVM_DIR</span>/bash_completion"</span> <span>]</span> <span>&amp;&amp;</span> <span>\</span>. <span>"<span>$NVM_DIR</span>/bash_completion"</span>  <span># This loads nvm bash_completion</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
]]></content:encoded>
    </item>
    <item>
      <title>Installing Yarn 1</title>
      <link>https://codemonkeys.tech/installing-yarn-1/</link>
      <guid>https://codemonkeys.tech/installing-yarn-1/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Installing Yarn 1</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to install and use Yarn 1, then check out this post! 🍌🐒</description>
      <pubDate>Tue, 28 Dec 2021 22:56:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="installing-yarn-1"> Installing Yarn 1</h1>
</template><h2 id="what-is-a-package-manager"> What is a Package Manager?</h2>
<p>Before discussing <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> in more detail, let's first define what a <span>package manager</span> is and what it handles for us.</p>
<p>A <span>package manager</span> is a tool that allows developers to manage a project's dependencies.</p>
<p>Dependencies also known as packages are programs that a project relys on to function properly.</p>
<p>Using dependencies makes development easier since you can use other developer's solutions for implementing features in your project.</p>
<p>A <span>package manager</span> handles the following for your packages:</p>
<ul>
<li>Installing</li>
<li>Updating and upgrading</li>
<li>Uninstalling</li>
<li>Configuring</li>
</ul>
<h2 id="what-is-yarn"> What is Yarn?</h2>
<p><a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> is a <span>package manager</span> designed with three main goals in mind:</p>
<ul>
<li>Speed</li>
<li>Security</li>
<li>Reliability</li>
</ul>
<p>Like other <span>package managers</span>, <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> allows you to use and share code with other developers which again makes development easier. The code is shared using a <code>package.json</code> file which describes the dependencies used in a project.</p>
<p><a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> is an alternative to <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> which is the default node package manager for <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>. It was originally developed to address the performance and security issues with <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a>.</p>
<p>This post will cover the installation and some commands for <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>.</p>
<div><p>Yarn 1 Maintenance Mode</p>
<p><a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> is officially in maintenance mode, so no further updates will be released unless they are needed to patch vulnerabilities. If you're starting a new project, it's recommended to use the latest stable version which at the time of this writing is <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn 3<i>Content not supported</i></a>.</p>
</div>
<p>If you're interested in learning more about the release history of <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> and <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a>, then check out the section below.</p>
<h2 id="timeline-of-yarn-and-npm-development"> Timeline of Yarn and npm Development</h2>
<p>When <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> was released in 2016 it achieved its goals of being a faster, more secure, and more reliable alternative to <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a>. The improved reliability was accomplished by generating a <code>yarn.lock</code> file which handles keeping track of the exact versions of packages used in a project.</p>
<p>In 2017, <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> addressed its speed and reliability issues with the release of <a href="https://www.npmjs.com/package/npm5" target="_blank" rel="noopener noreferrer">npm 5<i>Content not supported</i></a>. The reliability issue was addressed with the introduction of the <code>package-lock.json</code> file which provided similar functionality to the <code>yarn.lock</code> file.</p>
<p>In 2018, <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> addressed its security issues with the release of <a href="https://www.npmjs.com/package/npm/v/6.0.0" target="_blank" rel="noopener noreferrer">npm 6<i>Content not supported</i></a> by checking vulnerabilities before installing dependencies as well as introducing more improvements to speed and reliability.</p>
<p><a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn 2<i>Content not supported</i></a> and <a href="https://www.npmjs.com/package/npm/v/7.0.0" target="_blank" rel="noopener noreferrer">npm 7<i>Content not supported</i></a> were both released in 2020 with improved performance and some new features as well.</p>
<p>In 2021, <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn 3<i>Content not supported</i></a> and <a href="https://www.npmjs.com/package/npm/v/7.0.0" target="_blank" rel="noopener noreferrer">npm 8<i>Content not supported</i></a> were released which again introduced improved performance and some new features.</p>
<p>Today, the performance and features of <a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer">Yarn<i>Content not supported</i></a> and <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> are very similar, so which one to use mainly depends on a developer's preference.</p>
<h2 id="installation"> Installation</h2>
<p>There are multiple ways to install <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>. Currently, the recommended way to install it is with <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> the default node package manager that comes with <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>. When installing <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> you have the option to install a <span>system version</span> which you can do by downloading and installing a version directly from <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>, or you can install multiple node versions with a <span>node version manager</span>.</p>
<div><p>Using a Node Version Manager</p>
<p>If you're a developer that needs to use multiple versions of <code>node</code> when working on different projects, then I recommend installing either <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> or <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>. My <span>preferred</span> way to manage my node versions is with <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>. If you're interested in installing a <span>node version manager</span>, then check out these posts <a href="/installing-nvm/">Installing Node Version Manager (nvm)</a> and <a href="/installing-fnm/">Installing Fast Node Manager (fnm)</a>.</p>
</div>
<p>After installing a <span>system version</span> or a version with a <span>node version manager</span>, you can run the following command to install and upgrade <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="Installation Using npm">
<div><pre><code><span>npm</span> <span>install</span> --global <span>yarn</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>This will install <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> globally. We'll see how to install a specific <span>local version</span> of <code>yarn</code> in the root of a project directory when looking at the usage of <code>yarn</code>.</p>
<div><p>Resolving Permissions Error</p>
<p>If you're using a <span>system version</span>, you may get a permissions error when attempting to install with <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a>. To resolve this check out the <a href="https://classic.yarnpkg.com/en/docs/install" target="_blank" rel="noopener noreferrer">installation<i>Content not supported</i></a> documentation for <span>platform-specific</span> methods for Linux, macOS, and Windows. Alternatively, you can uninstall your <span>system version</span> and use a <span>node version manager</span> instead.</p>
</div>
<h3 id="platform-installation-notes"> Platform Installation Notes</h3>
<p>When using a <span>platform-specific</span> method a version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> will also be installed. To avoid the <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> installation some <span>platform-specific</span> methods have the option of ignoring it by passing certain commands. See the <a href="https://classic.yarnpkg.com/en/docs/install" target="_blank" rel="noopener noreferrer">installation<i>Content not supported</i></a> documentation for more details on ignoring the <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> installation, configuration requirements, and possible issues.</p>
<p>If the option to ignore the installation of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> is not available for your preferred <span>platform-specific</span> method, then you can uninstall your <span>system version</span> and just use the <span>platform-specific</span> method to install both <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> and <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>.</p>
<p>If you prefer to use a <span>platform-specific</span> method with a <span>node version manager</span>, then you should only use a method that can ignore the installation of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> since it can cause conflicts.</p>
<h2 id="usage"> Usage</h2>
<p>Now we'll be discussing some useful and common commands to get you started with <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>.</p>
<h3 id="help-commands"> Help Commands</h3>
<p>Here's how to access the help documentation for the <code>yarn</code> command which is always useful and recommended to do for any installed tool.</p>
<p>Run the following command to see a list of commands, flags, and descriptions for <code>yarn</code>:</p>
<code-group>
<code-block title="Display Help Information">
<div><pre><code><span>yarn</span> --help
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To see help information for a specific subcommand run the following:</p>
<code-group>
<code-block title="Information for Subcommand">
<div><pre><code><span>yarn</span> <span>[</span>subcommand<span>]</span> --help
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="check-yarn-version"> Check Yarn Version</h3>
<p>To verify your installation was successful and to check your version of <code>yarn</code> run the following command:</p>
<code-group>
<code-block title="Check Yarn Version">
<div><pre><code><span>yarn</span> --version
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="setting-a-local-version"> Setting a Local Version</h3>
<p>To install and set a <span>local version</span> of <code>yarn</code> for a specific project you can use the global <code>yarn</code> command we installed earlier. This ensures everyone working on a project is using the exact same version of <code>yarn</code> which is useful to avoid any undesired behavior like producing a different <code>yarn.lock</code> file.</p>
<p>This is accomplished by using <a href="https://classic.yarnpkg.com/lang/en/docs/cli/policies/" target="_blank" rel="noopener noreferrer">yarn policies<i>Content not supported</i></a> which allows you to check in your <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> release within your repository. After running the command below in your project's root directory, a single-file release from the GitHub repository will be downloaded and stored in your project in a <code>.yarn/releases</code> directory. Then your <code>yarn-path</code> will be updated in a <code>.yarnrc</code> file.</p>
<p>Now any <code>yarn</code> command run in your project will be using the <span>local version</span> that you set. Be sure to push these changes to your project's remote branch, so everyone using the project will be downloading and using the same version of <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> as you.</p>
<p>If you're using an existing project, then you don't need to set the <span>local version</span> as long as the project has the desired version of <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> in the <code>.yarn/releases</code> directory, and the <code>yarn-path</code> is configured properly in the <code>.yarnrc</code> file.</p>
<p>If you don't have a project directory, then run the following:</p>
<code-group>
<code-block title="Create Project Directory">
<div><pre><code><span>mkdir</span> ~/<span>&lt;</span>path-to-project-directory<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Next, navigate to your project:</p>
<code-group>
<code-block title="Navigate to Project Directory">
<div><pre><code><span>cd</span> ~/<span>&lt;</span>path-to-project-directory<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Now, set the version of <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> for your project:</p>
<code-group>
<code-block title="Set Local Version">
<div><pre><code><span>yarn</span> policies set-version <span>[</span>version<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>There are multiple ways to specify which version you want to use:</p>
<ul>
<li><code>yarn policies set-version</code> downloads the latest stable release</li>
<li><code>yarn policies set-version --rc</code> downloads the latest rc release</li>
<li><code>yarn policies set-version 1.22.4</code> downloads a specific version</li>
</ul>
<p>Running <code>yarn policies set-version [version]</code> is also the recommended way to upgrade your version of <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>.</p>
<p>Now run <code>yarn --version</code> in your project directory, and it should output the <span>local version</span> you just set. If you navigate out of your project directory and run <code>yarn --version</code>, then you should see the global version that you installed.</p>
<p>The global version of <code>yarn</code> will first check if it's in a directory with a <code>.yarnrc</code> file. If the directory has a <code>.yarnrc</code> file, then the configured <code>yarn-path</code> value will be used to switch the <code>yarn</code> version from the global version to the project specific version.</p>
<div><p>Resolving Installation Directory Issue</p>
<p>If you set the <span>local version</span> in your project's root directory and the <code>.yarn</code> directory and <code>.yarnrc</code> file aren't generated there, then delete the files that were generated and run the <code>yarn init</code> command in your project's root directory before setting the <span>local version</span>. The <code>yarn init</code> command is described in the Creating a New Project section.</p>
</div>
<h3 id="updating-the-gitignore-file"> Updating the .gitignore File</h3>
<p>After setting your <span>local version</span> of <code>yarn</code>, you should now have <code>.yarn</code> directory in the root of your project.</p>
<p>Some of the files <code>yarn</code> adds to your <code>.yarn</code> directory should be checked into version control, e.g., git and others should be ignored.</p>
<p>To specify which directories and files should be ignored when pushing to your repositiory you can create a <code>.gitignore</code> file.</p>
<p>After creating the <code>.gitignore</code> file, you can add the recommended basic configuration for <code>yarn</code>:</p>
<code-group>
<code-block title=".gitignore File for Yarn">
<div><pre><code>.pnp.*
.yarn/*
<span>!</span>.yarn/patches
<span>!</span>.yarn/plugins
<span>!</span>.yarn/releases
<span>!</span>.yarn/sdks
<span>!</span>.yarn/versions
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<p>This will ignore the entire <code>.yarn</code> directory except for the directories specified after the <code>!</code>.</p>
<p>The <code>yarn.lock</code> and <code>.yarnrc</code> files should always be checked into version control.</p>
<h3 id="adding-a-gitattributes-file"> Adding a .gitattributes File</h3>
<p>If you're using a <span>local version</span> of <code>yarn</code>, then it's recommended to add a <code>.gitattributes</code> file to your project which will prevent <code>git</code> from showing large diffs when you add or update releases and plugins:</p>
<code-group>
<code-block title=".gitattributes File for Yarn">
<div><pre><code>.yarn/releases/** binary
.yarn/plugins/** binary
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<p>This is accomplished by identifying the release and plugin directories as binary content.</p>
<h3 id="creating-a-new-project"> Creating a New Project</h3>
<p>To create a new project first create and navigate to the project directory. See the commands above for creating and navigating to a project directory.</p>
<p>Then run the following command:</p>
<code-group>
<code-block title="Create a New Project">
<div><pre><code><span>yarn</span> init
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the above command, you'll be asked to answer several questions. You can enter custom values for each question or press enter to accept the defaults. Here's an example of running the command in a directory named <code>project-directory</code>:</p>
<code-group>
<code-block title="Project Questions">
<div><pre><code>question name <span>(</span>project-directory<span>)</span>: my-new-project
question version <span>(</span><span>1.0</span>.0<span>)</span>: <span>1.2</span>.4
question description: Learning Yarn
question entry point <span>(</span>index.js<span>)</span>:
question repository url: https://github.com/github-username/my-new-project
question author: Your Name
question license <span>(</span>MIT<span>)</span>:
question private:
success Saved package.json
Done <span>in</span> <span>34</span>.11s.
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>After answering all of the questions, a <code>package.json</code> file containing the answers will be created. The <code>package.json</code> file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">semantic versioning (semver)<i>Content not supported</i></a>.</p>
<p>Now, let's describe each property in a little more detail:</p>
<ul>
<li><code>name</code> is the name given to your project
<ul>
<li>Must be less than or equal to 214 characters including the <code>@scope/</code> for <a href="https://docs.npmjs.com/cli/v8/using-npm/scope" target="_blank" rel="noopener noreferrer">scoped packages<i>Content not supported</i></a></li>
<li>Cannot start with a dot or an underscore</li>
<li>Must contain only lowercase letters and URL-safe characters</li>
<li>If the project is published to <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a>, it gets a URL based on the given value which is the reason for the requirements given above</li>
<li>The default value is the same name as the directory you're in when running the <code>yarn init</code> command</li>
</ul>
</li>
<li><code>version</code> indicates the current version of your project
<ul>
<li>The versioning follows <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">semver<i>Content not supported</i></a> notation</li>
<li>The default value is 1.0.0</li>
</ul>
</li>
<li><code>description</code> is used to describe and provide more information about your project
<ul>
<li>Especially useful to include if you plan on publishing your project to <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a></li>
<li>If no value is given, it will not be set</li>
</ul>
</li>
<li><code>entry point</code> is a JavaScript file that starts the execution of your project
<ul>
<li>This property is called <code>main</code> in the <code>package.json</code> file</li>
<li>The default value is index.js</li>
</ul>
</li>
<li><code>repository url</code> describes the location of the project repository containing the code
<ul>
<li>This property is called repository in the <code>package.json</code> file</li>
<li>You can explicitly set the URL and a version control type in the <code>package.json</code> file by adding, e.g., <code>&quot;repository&quot;: { &quot;type&quot;: &quot;git&quot;, &quot;url&quot;: &quot;https://github.com/github-username/my-new-project&quot; }</code></li>
<li>If no value is given, it will not be set</li>
</ul>
</li>
<li><code>author</code> describes the creator or owner of the project
<ul>
<li>Used to describe one person</li>
<li>You can explicitly set the author name, email, and website in the <code>package.json</code> file by adding, e.g., <code>&quot;author&quot;: { &quot;name&quot;: &quot;Your Name&quot;, &quot;email&quot;: &quot;youremail@example.com&quot;, &quot;url&quot;: &quot;https://your-website.com&quot; }</code></li>
<li>If no value is given, it will not be set</li>
</ul>
</li>
<li><code>license</code> indicates the type of license being used by the project
<ul>
<li>Allows users to know how they're permitted to use the project</li>
<li>Check out <a href="https://choosealicense.com/" target="_blank" rel="noopener noreferrer">Choose a License<i>Content not supported</i></a> if you need help determining how you should license your project</li>
<li>The default value is MIT</li>
</ul>
</li>
<li><code>private</code> indicates whether or not the project can be published to <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a>
<ul>
<li>If set to true, it will prevent the project from being published</li>
<li>If no value is given, it's assumed the value is false, and it will not be explicitly set in the <code>package.json</code> file</li>
</ul>
</li>
</ul>
<p>If you're interested in learning more about the <code>package.json</code> file, then check out <a href="https://nodejs.dev/learn/the-package-json-guide" target="_blank" rel="noopener noreferrer">The package.json guide<i>Content not supported</i></a> and the <a href="https://classic.yarnpkg.com/en/docs/package-json" target="_blank" rel="noopener noreferrer">Yarn 1 package.json<i>Content not supported</i></a> documentation. Also, check out the <a href="https://classic.yarnpkg.com/en/docs/dependency-versions/" target="_blank" rel="noopener noreferrer">Versions of dependencies<i>Content not supported</i></a> documentation for more information about how <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">semver<i>Content not supported</i></a> is used.</p>
<p>Here's the contents of the <code>package.json</code> file from the example above:</p>
<code-group>
<code-block title="package.json">
<div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"my-new-project"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.2.4"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learning Yarn"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>"https://github.com/github-username/my-new-project"</span><span>,</span>
  <span>"author"</span><span>:</span> <span>"Your Name"</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"MIT"</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br></div></div></code-block>
</code-group>
<p>To update the <code>package.json</code> file you can open and edit it directly, or you can run the <code>yarn init</code> command again.</p>
<p>Check out the <a href="https://classic.yarnpkg.com/en/docs/cli/init" target="_blank" rel="noopener noreferrer">yarn init<i>Content not supported</i></a> documentation for more information about the command.</p>
<h3 id="adding-packages"> Adding Packages</h3>
<p>When adding a package the <code>package.json</code> file gets updated by adding the package as a dependency to a <code>dependencies</code> object where each key is a package name and the value represents a range of allowed versions following <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">semver<i>Content not supported</i></a> notation.</p>
<p>A <code>yarn.lock</code> file will also be created if it doesn't exist or updated if it already exists. A <code>yarn.lock</code> file is used to keep track of the exact versions of packages added to a project. This allows consistent installs across machines by allowing developers to have the exact same versions of packages when installing all of a project's dependencies.</p>
<p>Here's how to handle the <code>yarn.lock</code> file in your project:</p>
<ul>
<li>The <code>yarn.lock</code> file should be in the root of your project directory</li>
<li>You shouldn't directly edit the <code>yarn.lock</code> file it gets auto-generated and automatically updated</li>
<li>When installing only the top-level <code>yarn.lock</code> file is used and any <code>yarn.lock</code> files that exist in the dependencies will be ignored</li>
<li>The <code>yarn.lock</code> file should also be checked into version control since it's used to install the exact same versions of packages across machines</li>
</ul>
<p>To add the <span>latest version</span> of a package run the following command:</p>
<code-group>
<code-block title="Add Latest Version">
<div><pre><code><span>yarn</span> <span>add</span> <span>&lt;</span>package-name<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To add a <span>specific version</span> of a package run the following command:</p>
<code-group>
<code-block title="Add Specific Version">
<div><pre><code><span>yarn</span> <span>add</span> <span>&lt;</span>package-name<span>></span>@1.2.3
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To add the <span>latest version</span> of a package within a <span>specified version range</span> run the following command:</p>
<code-group>
<code-block title="Add a Package in a Specified Version Range">
<div><pre><code><span>yarn</span> <span>add</span> <span>&lt;</span>package-name<span>></span>@<span>"^1.2.3"</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>The <span>latest version</span> within the given version range is determined by the range specifier and the version number.</p>
<p>In the example above the range specifier is the caret symbol, i.e., <code>^</code>. You can use any desired range specifier, and the added package will be the <span>latest version</span> within the given version range.</p>
<p>You can also add a package with a <span>specific tag</span> by running the following command:</p>
<code-group>
<code-block title="Add Specific Tag">
<div><pre><code><span>yarn</span> <span>add</span> <span>&lt;</span>package-name<span>></span>@tag
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Tags are a way to mark published versions of a package with a label. Check out the <a href="https://classic.yarnpkg.com/en/docs/cli/tag" target="_blank" rel="noopener noreferrer">yarn tag<i>Content not supported</i></a> documentation for more information about them.</p>
<p>To add a package to your development dependencies, i.e., <code>devDependencies</code> you can add either the <code>--dev</code> or <code>-D</code> flag to the end of the command.</p>
<p>Development dependencies are dependencies that you need for the development workflow, e.g., <a href="https://babeljs.io/" target="_blank" rel="noopener noreferrer">Babel<i>Content not supported</i></a>, but not while running the project.</p>
<p>Here's an example of adding the <span>latest version</span> of a package to your <code>devDependencies</code>:</p>
<code-group>
<code-block title="Add to Development Dependencies">
<div><pre><code><span>yarn</span> <span>add</span> <span>&lt;</span>package-name<span>></span> --dev
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>See the <a href="https://classic.yarnpkg.com/en/docs/dependency-types" target="_blank" rel="noopener noreferrer">Types of dependencies<i>Content not supported</i></a> documentation for more information about them.</p>
<p>To add a package globally to your operating system you can use the <code>global</code> subcommand before <code>add</code>:</p>
<code-group>
<code-block title="Add Global Package">
<div><pre><code><span>yarn</span> global <span>add</span> <span>&lt;</span>package-name<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div><p>When to Use Global</p>
<p>In general you should be adding packages locally because anyone else using your project will then get the same packages. If you install a package globally it will be available globally on your operating system, but it won't be available to anyone else using your project. You should only install a package globally if it's for developer tooling that isn't used for only a specific project, e.g., <a href="https://nodemon.io/" target="_blank" rel="noopener noreferrer">nodemon<i>Content not supported</i></a>. See the <a href="https://classic.yarnpkg.com/en/docs/cli/global" target="_blank" rel="noopener noreferrer">yarn global<i>Content not supported</i></a> documentation for more details.</p>
</div>
<p>Check out the <a href="https://classic.yarnpkg.com/en/docs/cli/add" target="_blank" rel="noopener noreferrer">yarn add<i>Content not supported</i></a> documentation for more information about adding packages.</p>
<h3 id="listing-added-packages"> Listing Added Packages</h3>
<p>To list all of your added packages in your project run the following command:</p>
<code-group>
<code-block title="List All Added Packages">
<div><pre><code><span>yarn</span> list
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>This will list all of the packages you added as well as their dependencies for the current working directory.</p>
<p>To list only the packages you explicitly added you can use the <code>--depth</code> flag as follows:</p>
<code-group>
<code-block title="List All Explicity Added Packages">
<div><pre><code><span>yarn</span> list --depth<span>=</span><span>0</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>The above will restrict the depth of the displayed dependencies to be the first level. Notice that the levels are zero-indexed.</p>
<p>To learn more about listing added packages check out the <a href="https://classic.yarnpkg.com/en/docs/cli/list" target="_blank" rel="noopener noreferrer">yarn list<i>Content not supported</i></a> documentation.</p>
<h3 id="upgrading-packages"> Upgrading Packages</h3>
<p>The <code>upgrade</code> subcommand will update the packages to their <span>latest version</span> based on the version ranges defined in the <code>package.json</code> file. See the <a href="https://classic.yarnpkg.com/en/docs/dependency-versions/" target="_blank" rel="noopener noreferrer">Versions of dependencies<i>Content not supported</i></a> documentation to get a better understanding of how version ranges are used.</p>
<p>After running the <code>upgrade</code> subcommand, the <code>yarn.lock</code> file will be updated with the <span>latest versions</span> specified by the version ranges. The versions in the <code>package.json</code> file will remain the same though since the upgraded packages will still be within the same version ranges.</p>
<p>To view the upgraded versions of your packages in a readable format you can use the <code>yarn list</code> command described in the previous section.</p>
<p>We'll see how to upgrade packages to versions outside of the <span>specified version ranges</span> which will update both the <code>yarn.lock</code> file and the <code>package.json</code> file.</p>
<p>The following command upgrades all packages within their <span>specified version ranges</span>:</p>
<code-group>
<code-block title="Upgrade All Packages Within Version Ranges">
<div><pre><code><span>yarn</span> upgrade
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>You can also upgrade a specific package within its <span>specified version range</span>:</p>
<code-group>
<code-block title="Upgrade Specific Package Within Version Range">
<div><pre><code><span>yarn</span> upgrade <span>[</span>package-name<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To upgrade all packages to their <span>latest versions</span> you can add the <code>--latest</code> flag:</p>
<code-group>
<code-block title="Upgrade All Packages to Latest Versions">
<div><pre><code><span>yarn</span> upgrade --latest
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>You can also upgrade a specific package to its <span>latest version</span> using the <code>--latest</code> flag:</p>
<code-group>
<code-block title="Upgrade Specific Package to Latest Versions">
<div><pre><code><span>yarn</span> upgrade <span>[</span>package-name<span>]</span> --latest
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>When using the <code>--latest</code> flag, the version range in the <code>package.json</code> file will be ignored. This can potentially result in the packages being upgraded across major versions which can lead to potential incompatible API changes, so be sure to check the packages for any breaking changes.</p>
<p>Since the range versions in the <code>package.json</code> file are ignored, both the <code>yarn.lock</code> and <code>package.json</code> files can be updated.</p>
<p>Also, the range specifiers in the <code>package.json</code> file will remain the same if it is still compatible with the latest version. If the range specifier isn't compatible with the new version a caret range specifier, i.e., <code>^</code> will be used instead.</p>
<p>So, e.g., a tilde range specifier, i.e., <code>~</code> will still be used for any packages that we're using it previously.</p>
<p>You can also explicitly set the range specifier by passing a flag after the <code>--latest</code> flag, e.g., <code>--caret</code>.</p>
<p>You can also upgrade a package to a <span>specific version</span> with the following command:</p>
<code-group>
<code-block title="Upgrade a Package to a Specific Version">
<div><pre><code><span>yarn</span> upgrade <span>&lt;</span>package-name<span>></span>@1.2.3
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To upgrade a package to the <span>latest version</span> within a <span>specified version range</span> run the following:</p>
<code-group>
<code-block title="Upgrade a Package in a Specified Version Range">
<div><pre><code><span>yarn</span> upgrade <span>&lt;</span>package-name<span>></span><span>"@^1.2.3"</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>The <span>latest version</span> within the given version range is again determined by the range specifier and the version number.</p>
<p>In the example above the range specifier is the caret symbol, i.e., <code>^</code>. You can again use any desired range specifier, and the package will be upgraded to the <span>latest version</span> within the given version range.</p>
<p>You can also upgrade a package to a <span>specific tag</span> using the following command:</p>
<code-group>
<code-block title="Upgrade a Package Using a Tag">
<div><pre><code><span>yarn</span> upgrade <span>&lt;</span>package-name<span>></span>@tag
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Tags are again a way to mark published versions of a package with a label. Check out the <a href="https://classic.yarnpkg.com/en/docs/cli/tag" target="_blank" rel="noopener noreferrer">yarn tag<i>Content not supported</i></a> documentation for more information about them.</p>
<p>You can specify a preferred range specifier when upgrading a package with a tag by passing, e.g., <code>--tilde</code> flag at the end of the command.</p>
<div><p>Downgrading Packages</p>
<p>Using specific versions and tags when upgrading packages also allows you to downgrade your package by specifying a version that is older than your currently installed version.</p>
</div>
<p>To learn more about upgrading packages check out the <a href="https://classic.yarnpkg.com/en/docs/cli/upgrade" target="_blank" rel="noopener noreferrer">yarn upgrade<i>Content not supported</i></a> documentation.</p>
<h3 id="removing-packages"> Removing Packages</h3>
<p>To remove a package run the following command:</p>
<code-group>
<code-block title="Remove a Package">
<div><pre><code><span>yarn</span> remove <span>&lt;</span>package-name<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the command above, the <code>yarn.lock</code> and <code>package.json</code> files will both always be updated. This ensures all developers will still be using the exact same versions of the packages.</p>
<p>Also, when removing a package it will be removed from all types of dependencies, e.g., <code>dependencies</code>, <code>devDependencies</code>, etc.</p>
<p>See the <a href="https://classic.yarnpkg.com/en/docs/dependency-types" target="_blank" rel="noopener noreferrer">Types of dependencies<i>Content not supported</i></a> documentation for more information about dependencies and the <a href="https://classic.yarnpkg.com/en/docs/cli/remove" target="_blank" rel="noopener noreferrer">yarn remove<i>Content not supported</i></a> documentation for more information about the command.</p>
<h3 id="installing-all-project-packages"> Installing All Project Packages</h3>
<p>The following command should be run when checking out code for a new project and when another developer adds or removes a package.</p>
<p>Run the following command to install all of a project's packages specified in the <code>package.json</code> file:</p>
<code-group>
<code-block title="Install All Project Packages">
<div><pre><code><span>yarn</span> <span>install</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>You can also just run the following:</p>
<code-group>
<code-block title="Install All Project Packages Shorthand">
<div><pre><code><span>yarn</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running either one of the commands above, a <code>node_modules</code> directory will be created in the current directory which contains all of the code for the installed packages.</p>
<p>Here's how the <code>yarn.lock</code> file is used:</p>
<ul>
<li>If the <code>yarn.lock</code> file is present and if it contains all of the packages specified in the <code>package.json</code> file, then the exact versions specified in the <code>yarn.lock</code> file will be installed.</li>
<li>If there is no <code>yarn.lock</code> file or there is one that doesn't contain all of the packages in the <code>package.json</code> file, then the newest versions within the version ranges specified in the <code>package.json</code> file will be installed. This will then update the <code>yarn.lock</code> file.</li>
</ul>
<p>To ensure the <code>yarn.lock</code> file is not updated when installing all of a project's dependencies you can run the following:</p>
<code-group>
<code-block title="Prevent Lockfile Update on Install">
<div><pre><code><span>yarn</span> --frozen-lockfile
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>For more information about installing all the packages in a project check out the <a href="https://classic.yarnpkg.com/en/docs/cli/install" target="_blank" rel="noopener noreferrer">yarn install<i>Content not supported</i></a> documentation.</p>
<h3 id="running-scripts"> Running Scripts</h3>
<p>To run a script you need to first add a <code>scripts</code> object to your <code>package.json</code> file. Then you can add each script as a key-value pair where the key is the name of the script you want to run, and the value is a command that gets run in your shell.</p>
<code-group>
<code-block title="Scripts Object in package.json">
<div><pre><code><span>"scripts"</span><span>:</span> <span>{</span>
  <span>"test"</span><span>:</span> <span>"test-script"</span><span>,</span>
  <span>"build"</span><span>:</span> <span>"build-script"</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>Here, we have defined two scripts in our <code>scripts</code> object with the names of <code>test</code> and <code>build</code> and with the commands of <code>test-script</code> and <code>build-script</code>, respectively.</p>
<p>To run a script you can run the following command:</p>
<code-group>
<code-block title="Run a Script">
<div><pre><code><span>yarn</span> run <span>[</span>script-name<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>You can also just run the following:</p>
<code-group>
<code-block title="Run a Script Shorthand">
<div><pre><code><span>yarn</span> <span>[</span>script-name<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div><p>Potential Shorthand Issue</p>
<p>Built-in CLI commands will have preference over your scripts if they share the same name. To avoid running a built-in CLI command you can always include the <code>run</code> subcommand when running your scripts.</p>
</div>
<p>It's also possible to list all of the scripts available to run in your project by running the following:</p>
<code-group>
<code-block title="List All Available Scripts">
<div><pre><code><span>yarn</span> run
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>See the <a href="https://classic.yarnpkg.com/en/docs/cli/run" target="_blank" rel="noopener noreferrer">yarn run<i>Content not supported</i></a> documentation to lean more about the command and the <a href="https://classic.yarnpkg.com/en/docs/cli/test" target="_blank" rel="noopener noreferrer">yarn test<i>Content not supported</i></a> documentation for more information about testing.</p>
]]></content:encoded>
    </item>
    <item>
      <title>Configuring Settings</title>
      <link>https://codemonkeys.tech/raspberry-pi-configuring-settings/</link>
      <guid>https://codemonkeys.tech/raspberry-pi-configuring-settings/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Configuring Settings</source>
      <description>Hey fellow Code Monkeys!!! 🐵 If you're interested in learning how to configure the settings for your Raspberry Pi, then check out the Configuring Settings post! 🍌🐒</description>
      <pubDate>Tue, 20 Dec 2022 15:02:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="configuring-settings"> Configuring Settings</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>In this tutorial we're going to learn how to configure various settings for a <a href="https://www.raspberrypi.com/" target="_blank" rel="noopener noreferrer">Raspberry Pi<i>Content not supported</i></a> using standard <a href="https://www.debian.org/" target="_blank" rel="noopener noreferrer">Debian<i>Content not supported</i></a> commands. Since we'll be using standard Debian commands, the commands will be compatible with most other hardware platforms running Debian.</p>
<p>Instead of using the standard Debian commands to configure the settings, you can preconfigure the settings with the <a href="https://github.com/raspberrypi/rpi-imager" target="_blank" rel="noopener noreferrer">Raspberry Pi Imager<i>Content not supported</i></a> by using the advanced options when installing the <a href="https://www.raspberrypi.com/software/operating-systems/" target="_blank" rel="noopener noreferrer">Raspberry Pi OS<i>Content not supported</i></a>. You also have the option to use the <a href="https://www.raspberrypi.com/documentation/computers/configuration.html" target="_blank" rel="noopener noreferrer">raspi-config<i>Content not supported</i></a> tool to configure the settings.</p>
<p>If you preconfigure the settings using the Raspberry Pi Imager, you can always update them later by using either the raspi-config tool or the standard Debian commands discussed in this post.</p>
<div><p>Raspberry Pi Imager Boot Issues</p>
<p>If you're having issues booting your Raspberry Pi after preconfiguring the settings using the Raspberry Pi Imager, then don't preconfigure the settings. Instead you can use the raspi-config tool or the standard Debian commands to configure the settings after booting into the Raspberry Pi.</p>
</div>
<p>We'll be configuring the following settings:</p>
<ul>
<li>Username</li>
<li>Password</li>
<li>Secure Shell (SSH)</li>
<li>WiFi</li>
<li>Time Zone</li>
<li>Keyboard Layout</li>
</ul>
<p>We'll be using the <code>nano</code> text editor to edit the configuration files.</p>
<p>Here's how to save and exit <code>nano</code>:</p>
<ul>
<li>Save: press <code>Ctrl+o</code>, confirm the filename, and press the <code>Enter</code> key</li>
<li>Exit: press <code>Ctrl+x</code></li>
</ul>
<h2 id="assumptions"> Assumptions</h2>
<p>We're making the following assumptions:</p>
<ul>
<li>You're using a <span><a href="https://www.raspberrypi.com/products/raspberry-pi-4-model-b/" target="_blank" rel="noopener noreferrer">Raspberry Pi 4<i>Content not supported</i></a></span> running Raspberry Pi OS Lite (64-bit)</li>
<li>You're using an official <span><a href="https://www.raspberrypi.com/products/type-c-power-supply/" target="_blank" rel="noopener noreferrer">Raspberry Pi Power Supply<i>Content not supported</i></a></span></li>
<li>The Raspberry Pi is connected to a display either a computer monitor or television</li>
<li>You have a USB keyboard plugged into the Raspberry Pi</li>
</ul>
<h2 id="username"> Username</h2>
<p>There are multiple ways to update your username. We'll be updating the username by logging in as the <code>root</code> user. Instead of using the <code>root</code> user, it's also possible to create another user and log into it to update the username.</p>
<div><p>Don't Use pi for your Username</p>
<p>For security reasons it's recommended to not use <code>pi</code> as your username since it has been used in the past as the default username. Potential hackers have a list of commonly used usernames which may include the <code>pi</code> username.</p>
</div>
<h3 id="enable-root-user"> Enable root User</h3>
<p>To update the username using the <code>root</code> user, you first need to enable it which you can do by running the following command:</p>
<code-group>
<code-block title="Enable root User">
<div><pre><code><span>sudo</span> <span>passwd</span> root
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to choose a secure password for the <code>root</code> user. You can use a password mananger like <a href="https://keepass.info/" target="_blank" rel="noopener noreferrer">KeePass<i>Content not supported</i></a> or <a href="https://bitwarden.com/" target="_blank" rel="noopener noreferrer">Bitwarden<i>Content not supported</i></a> to generate and store your passwords.</p>
<div><p>Disabling the root User</p>
<p>You can also disable the <code>root</code> user if you want after updating the username which we'll demonstrate below. For security reasons it's recommended to disable the <code>root</code> user after updating the username.</p>
</div>
<h3 id="logout"> Logout</h3>
<p>After enabling the <code>root</code> user, you need to log out of the current user which you can do with the following command:</p>
<code-group>
<code-block title="Logout">
<div><pre><code><span>logout</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="update-username"> Update Username</h3>
<p>Now, you'll need to log in using the <code>root</code> user by entering <code>root</code> for the username and the password you just created for the <code>root</code> user.</p>
<p>After logging in as the <code>root</code> user, you're now ready to update the username by running the following command:</p>
<code-group>
<code-block title="Update Username">
<div><pre><code><span>usermod</span> -l <span>&lt;</span>new_username<span>></span> <span>&lt;</span>old_username<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;new_username&gt;</code> with the updated username</li>
<li><code>&lt;old_username&gt;</code> with the username you want to update</li>
</ul>
<h3 id="update-home-directory"> Update home Directory</h3>
<p>The username has been updated, but the user's <code>home</code> directory will still be using the previous username. To update the <code>home</code> directory to reflect the updated username you need to run the following command:</p>
<code-group>
<code-block title="Update home Directory">
<div><pre><code><span>usermod</span> -m -d /home/<span>&lt;</span>new_username<span>></span> <span>&lt;</span>new_username<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;new_username&gt;</code> with the updated username</li>
</ul>
<p>You can now log out of the <code>root</code> user by running the <code>logout</code> command we used earlier, and log in using the updated username and the user's password.</p>
<h3 id="disable-root-user"> Disable root User</h3>
<p>You can now disable the <code>root</code> user if you want, but you'll first want to make sure the updated user still has <code>sudo</code> privileges. You can check this by running the following command:</p>
<code-group>
<code-block title="Check sudo Privileges">
<div><pre><code><span>groups</span> <span>&lt;</span>new_username<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;new_username&gt;</code> with the updated username</li>
</ul>
<p>If the user still has <code>sudo</code> privileges, you should see the <code>sudo</code> group in the output.</p>
<p>After confirming the updated user still has <code>sudo</code> privileges, you can disable the <code>root</code> user by running the following command:</p>
<code-group>
<code-block title="Disable root User">
<div><pre><code><span>sudo</span> <span>passwd</span> -l root
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h2 id="password"> Password</h2>
<p>To update the password for your user you can run the following command:</p>
<code-group>
<code-block title="Update Password">
<div><pre><code><span>passwd</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>You will need to enter the current password for the user. Then you will be asked to enter the updated password and to re-enter the updated password.</p>
<p>Be sure to choose a secure password for your user. You can again use a password mananger like <a href="https://keepass.info/" target="_blank" rel="noopener noreferrer">KeePass<i>Content not supported</i></a> or <a href="https://bitwarden.com/" target="_blank" rel="noopener noreferrer">Bitwarden<i>Content not supported</i></a> to generate and store your passwords.</p>
<div><p>Don't Use raspberry for your Password</p>
<p>It's recommended to not use <code>raspberry</code> as your password since it has been used in the past as the default password plus it isn't a secure password anyway.</p>
</div>
<h2 id="hostname"> Hostname</h2>
<p>Every Raspberry Pi using Raspberry Pi OS Lite (64-bit) uses the default hostname <code>raspberrypi</code> which isn't very helpful when you're using multiple Raspberry Pi devices that you're trying to distinguish between on your network.</p>
<div><p>hostname Restrictions</p>
<p>The hostname may contain lowercase letters 'a' through 'z', uppercase letters 'A' through 'Z', numbers '0' through '9', and hyphens '-' as long as the first and last characters aren't hyphens. No other symbols, punctuation characters, or white space are allowed in the hostname.</p>
</div>
<h3 id="hosts-file"> hosts File</h3>
<p>To update the hostname you can open the <code>/etc/hosts</code> file by running the following command:</p>
<code-group>
<code-block title="Open hosts File">
<div><pre><code><span>sudo</span> <span>nano</span> /etc/hosts
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Your <code>hosts</code> file should look something like this:</p>
<code-group>
<code-block title="hosts File">
<div><div><br><br><br><br><br><div>&nbsp;</div><br></div><pre><code>127.0.0.1       localhost
::1             localhost ip6-localhost ip6-loopback
ff02::1         ip6-allnodes
ff02::2         ip6-allrouters

127.0.1.1       &lt;old_hostname&gt;
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;old_hostname&gt;</code> with the updated hostname</li>
</ul>
<p>Then save and exit the file.</p>
<h3 id="hostname-file"> hostname File</h3>
<p>Next you need to open the <code>/etc/hostname</code> file by running the following command:</p>
<code-group>
<code-block title="Open hostname File">
<div><pre><code><span>sudo</span> <span>nano</span> /etc/hostname
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Your <code>hostname</code> file should look something like this:</p>
<code-group>
<code-block title="hostname File">
<div><pre><code>&lt;old_hostname&gt;
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;old_hostname&gt;</code> with the updated hostname</li>
</ul>
<p>Then save and exit the file.</p>
<p>For the changes to take effect you need to reboot your Raspberry Pi which you can do by running the following command:</p>
<code-group>
<code-block title="Reboot">
<div><pre><code>sudo reboot
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After rebooting the command prompt should now display, <code>&lt;username&gt;@&lt;new_hostname&gt;</code>.</p>
<p>Where:</p>
<ul>
<li><code>&lt;username&gt;</code> is the username of the current user</li>
<li><code>&lt;new_hostname&gt;</code> is the updated hostname</li>
</ul>
<h2 id="enable-and-start-ssh"> Enable and Start SSH</h2>
<p>Secure Shell (SSH) is a network communication protocol that enables you to connect securely to a remote computer or a server by using a text-based interface. When a secure SSH connection is established, a shell session is started, and you'll be able to manipulate the server by typing commands from your local computer.</p>
<p>If you want to remotely connect to your Raspberry Pi, i.e., be able to access it from your local computer, then you'll need to enable and start the SSH service on the Raspberry Pi.</p>
<h3 id="enable-ssh"> Enable SSH</h3>
<p>To enable SSH run the following command:</p>
<code-group>
<code-block title="Enable SSH">
<div><pre><code>sudo systemctl enable ssh
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="start-ssh"> Start SSH</h3>
<p>To start the SSH service run the following command:</p>
<code-group>
<code-block title="Start SSH">
<div><pre><code>sudo systemctl start ssh
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>You should now be able to SSH into the Raspberry Pi from your local computer.</p>
<h2 id="configure-wifi"> Configure WiFi</h2>
<p>To configure WiFi you need to edit the <code>wpa_supplicant.conf</code> file.</p>
<h3 id="wpa-supplicant-conf"> wpa_supplicant.conf</h3>
<p>The <code>wpa_supplicant.conf</code> file should be located in the <code>/etc/wpa_supplicant</code> directory.</p>
<p>To open the <code>wpa_supplicant.conf</code> file you can run the following command:</p>
<code-group>
<code-block title="Open wpa_supplicant.conf">
<div><pre><code>sudo nano /etc/wpa_supplicant/wpa_supplicant.conf
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After editing the file, it should look like this:</p>
<code-group>
<code-block title="wpa_supplicant.conf File">
<div><div><br><br><div>&nbsp;</div><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br></div><pre><code>ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=&lt;country_code&gt;

network={
     ssid=&quot;&lt;ssid&gt;&quot;
     psk=&quot;&lt;password&gt;&quot;
     scan_ssid=1
}
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;country_code&gt;</code> with your own <span><a href="https://www.iban.com/country-codes" target="_blank" rel="noopener noreferrer">country code<i>Content not supported</i></a></span></li>
<li><code>&lt;ssid&gt;</code> with your WiFi SSID, i.e., the name of your WiFi</li>
<li><code>&lt;password&gt;</code> with your WiFi password</li>
</ul>
<p>Then save and exit the file.</p>
<p>For the changes to take effect you need to reboot your Raspberry Pi which you can do by running the following command:</p>
<code-group>
<code-block title="Reboot">
<div><pre><code>sudo reboot
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="unblock-wifi"> Unblock WiFi</h3>
<p>If you get the following message after rebooting:</p>
<code-group>
<code-block title="Wi-Fi Currently Blocked Message">
<div><pre><code>Wi-Fi is currently blocked by rfkill.
Use raspi-config to set the country before use.
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<p>Then you can run the following command to unblock the WiFi;</p>
<code-group>
<code-block title="Unblock WiFi Using raspi-config">
<div><pre><code>sudo raspi-config nonint do_wifi_country &lt;country_code&gt;
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;country_code&gt;</code> with your own <span><a href="https://www.iban.com/country-codes" target="_blank" rel="noopener noreferrer">country code<i>Content not supported</i></a></span></li>
</ul>
<p>Instead of using <code>raspi-config</code> to unblock the WiFi which isn't a standard Debian command, you can also try installing and running <code>urfkill</code>.</p>
<p>Run the following command to install <code>urfkill</code>:</p>
<code-group>
<code-block title="Install urfkill">
<div><pre><code>sudo apt install urfkill
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To unblock the WiFi using <code>urfkill</code> run the following command:</p>
<code-group>
<code-block title="Unblock WiFi Using urfkill">
<div><pre><code>sudo unblock wifi
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h3 id="test-connection"> Test Connection</h3>
<p>To test the WiFi connection you can check the IP address by running the following command:</p>
<code-group>
<code-block title="Check IP Address">
<div><pre><code>hostname -I
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h2 id="locale-settings"> Locale Settings</h2>
<p>We're now going to go over how to update the time zone and keyboard layout locale settings.</p>
<h3 id="time-zone"> Time Zone</h3>
<p>You can check the current time zone by running the following command:</p>
<code-group>
<code-block title="Check Time Zone">
<div><pre><code>ls -l /etc/localtime
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>To update the time zone you can run the following command:</p>
<code-group>
<code-block title="Update Time Zone">
<div><pre><code>sudo timedatectl set-timezone &lt;area&gt;/&lt;location&gt;
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;area&gt;</code> with your own area</li>
<li><code>&lt;location&gt;</code> with your own location</li>
</ul>
<p>If you're unsure what your area and location are, then take a look at the <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" target="_blank" rel="noopener noreferrer">list of tz database time zones<i>Content not supported</i></a>.</p>
<h3 id="keyboard-layout"> Keyboard Layout</h3>
<p>To update the keyboard layout you can edit the <code>keyboard</code> file which is located in the <code>/etc/default</code> directory.</p>
<p>To open the <code>keyboard</code> file you can run the following command:</p>
<code-group>
<code-block title="Open keyboard">
<div><pre><code>sudo nano /etc/default/keyboard
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After editing the file, it should look like this:</p>
<code-group>
<code-block title="keyboard File">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br></div><pre><code># KEYBOARD CONFIGURATION FILE

# Consult the keyboard(5) manual page.

XKBMODEL=&quot;pc105&quot;
XKBLAYOUT=&quot;&lt;layout&gt;&quot;
XKBVARIANT=&quot;&quot;
XKBOPTIONS=&quot;&quot;

BACKSPACE=&quot;guess&quot;
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>Be sure to replace:</p>
<ul>
<li><code>&lt;layout&gt;</code> with your preferred keyboard layout, e.g., <code>us</code></li>
</ul>
<p>Then save and exit the file.</p>
<p>The value for the keyboard layout is typically the two character <a href="https://www.iban.com/country-codes" target="_blank" rel="noopener noreferrer">country code<i>Content not supported</i></a>.</p>
<p>After updating the time zone and keyboard layout locale settings, you need to reboot your Raspberry Pi to see the changes take effect which you can do by running the following command:</p>
<code-group>
<code-block title="Reboot">
<div><pre><code>sudo reboot
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<h2 id="conclusion"> Conclusion</h2>
<p>After following only with this tutorial, you should now know how to configure various settings for your Raspberry Pi using standard Debian commands.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 1 - Introduction</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-1/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-1/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 1 - Introduction</source>
      <description>Hey fellow Code Monkeys!!! 🐵 If you're interested in learning Vuepress, then check out VuePress Tutorial 1 - Introduction! 🍌🐒</description>
      <pubDate>Fri, 24 Sep 2021 16:26:30 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-1-introduction"> VuePress Tutorial 1 - Introduction</h1>
</template><h2 id="what-we-ll-be-developing"> What We'll be Developing</h2>
<p>Welcome to our <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> series!</p>
<p>In this series we'll be developing the <a href="/">Code Monkeys Blog</a> starting from the basics.</p>
<p>So, have a look around if you haven't already.</p>
<p>Now grab a 🍌 and let's get to it!</p>
<h2 id="why-create-a-blog"> Why Create a Blog?</h2>
<ul>
<li>
<p>Benefits of creating a blog:</p>
<ul>
<li>Learn how to Create a Website</li>
<li>Improve your Web Development Skills &amp; Writing Ability</li>
<li>Document your Thoughts &amp; Ideas</li>
<li>Help Others Learn &amp; Meet New People</li>
<li>Build your Online Brand</li>
<li>Source of Independent Income</li>
<li>Show it to Employers</li>
</ul>
</li>
</ul>
<h2 id="what-we-ll-be-covering"> What We'll be Covering</h2>
<ul>
<li>
<p>Numerous <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> topics including:</p>
<ul>
<li>Installation</li>
<li>Directory Structure</li>
<li>Configuration</li>
<li>Asset Handling</li>
<li>Markdown Extensions</li>
<li>Using <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> in Markdown</li>
<li>Deploying (Specifically to <a href="https://pages.github.com/" target="_blank" rel="noopener noreferrer">GitHub Pages<i>Content not supported</i></a>)</li>
<li>Frontmatter</li>
<li>Various Plugins:
<ul>
<li><span><a href="https://vuepress-plugin-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-blog<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress-community.netlify.app/plugins/mathjax/" target="_blank" rel="noopener noreferrer">vuepress-plugin-mathjax<i>Content not supported</i></a></span></li>
<li><span><a href="https://github.com/znicholasbrown/vuepress-plugin-code-copy" target="_blank" rel="noopener noreferrer">vuepress-plugin-code-copy<i>Content not supported</i></a></span></li>
<li>And More!</li>
</ul>
</li>
</ul>
</li>
<li>
<p>More general Web Dev topics &amp; tools including:</p>
<ul>
<li>Favicons</li>
<li>Scalable Vector Graphics (SVGs)</li>
<li>Images (Compression, Lazy Loading, etc.)</li>
<li>Embedding Videos</li>
<li>Responsive Design (<a href="https://github.com/twbs/rfs" target="_blank" rel="noopener noreferrer">RFS<i>Content not supported</i></a>, Videos, etc.)</li>
<li>Color Schemes</li>
<li>Gradients</li>
<li>Embeddable Interactive Code Editors (<a href="https://codefence.io/" target="_blank" rel="noopener noreferrer">codefence<i>Content not supported</i></a>)</li>
<li>OAuth Apps (Specifically for <a href="https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app" target="_blank" rel="noopener noreferrer">GitHub<i>Content not supported</i></a>)</li>
<li>And More!</li>
</ul>
</li>
</ul>
<h2 id="nice-to-know"> Nice to Know</h2>
<p>Since <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> uses HTML, CSS, JavaScript, <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a>, and Markdown, it's good to have a solid grasp of them before starting.</p>
<p>However, in these posts and the accompanying videos I'll try to explain everything in sufficient detail, and anything that may need more explanation I'll provide links to helpful resources.</p>
<h2 id="how-to-use-these-tutorials"> How to Use these Tutorials</h2>
<ul>
<li>
<p>If you want to recreate the <a href="/">Code Monkeys Blog</a> or create a very similar blog then you can simply follow these tutorials in order.</p>
</li>
<li>
<p>Each tutorial will give you some general information about a <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> topic and provide helpful resources.</p>
</li>
<li>
<p>Then we'll apply what we've learned to the blog as an example.</p>
</li>
<li>
<p>This way you don't have to necessarily follow the tutorials in a linear order.</p>
</li>
<li>
<p>You'll be able to just learn a <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> topic if you don't want to recreate the entire blog or create a very similar blog.</p>
</li>
</ul>
<h2 id="updates"> Updates</h2>
<p>Note that the <a href="/">Code Monkeys Blog</a> is not a finished product.</p>
<p>This means new features will be added, and the current code will be optimized and refactored as needed.</p>
<p>So, when something gets updated a new post will be made discussing the changes and/or an old post may be updated.</p>
<p>Also, this blog is currently using <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress v1<i>Content not supported</i></a>.</p>
<p><a href="https://v2.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress v2<i>Content not supported</i></a> is still in beta at the time of this writing.</p>
<p>Once <a href="https://v2.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress v2<i>Content not supported</i></a> is out of beta and the plugins being used are updated, the plan is to migrate over.</p>
<h2 id="resources"> Resources</h2>
<ul>
<li>
<p>Each tutorial with code will have a corresponding branch which can be found here <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a>.</p>
</li>
<li>
<p>The code for the current version of the blog can be found here <a href="https://github.com/codemonkeysio/code-monkeys-blog" target="_blank" rel="noopener noreferrer">code-monkeys-blog<i>Content not supported</i></a>.</p>
</li>
</ul>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 10 - Homepage Styling Part 2</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-10/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-10/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 10 - Homepage Styling Part 2</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to continue the homepage styling for your VuePress site, then check out VuePress Tutorial 10 - Homepage Styling Part 2! 🍌🐒</description>
      <pubDate>Fri, 02 Sep 2022 21:56:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-10-homepage-styling-part-2"> VuePress Tutorial 10 - Homepage Styling Part 2</h1>
</template><h2 id="homepage-styling-recap"> Homepage Styling Recap</h2>
<p>In the previous tutorial we began the process of styling the homepage. By the end of the tutorial we overrode the global styling variables for the <code>$accentColor</code>, <code>$textColor</code>, and <code>$borderColor</code> in the <code>palette.styl</code> file. The colors of these variables then get applied instead of the colors originally set by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>. These variables can also be used to style other elements of the blog as well.</p>
<p>We also added our own global styling variables to the <code>palette.styl</code> file which included the <code>$backgroundColor</code> and the <code>$darkBorderColor</code>. These variables were then used in the <code>index.styl</code> file.</p>
<p>In the <code>index.styl</code> file we used some of the global styling variables along with overriding and adding our own global styling to style the <code>background-color</code> of the blog, the <code>main</code> tag with a class of <code>home</code>, the <code>header</code> tag with a class of <code>hero</code>, and the <code>div</code> tag with a class of <code>features</code>.</p>
<p>After overriding and adding these styles to the blog, the main card on the homepage was being covered by the navbar, so in this tutorial we'll be fixing this issue. Then we'll be adding some hover effects to the main card logo and to the box shadow around the main card. Finally, we'll be adding a radial gradient background to the main card.</p>
<h2 id="homepage-styling-updates"> Homepage Styling Updates</h2>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-10</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-10" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h3 id="fixing-the-main-card-placement"> Fixing the Main Card Placement</h3>
<p>We'll start by fixing the issue of the main card being covered by the navbar. To fix this issue we just need to update the <code>padding</code> in the <code>home</code> class:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
      <span>.hero</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
        <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
        <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
        <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
        <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
      <span>.features</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span>.feature</span>
          <span><span>text-align</span><span>:</span> center</span>
          <span>h2</span>
            <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>padding: 8rem 0 0</code> adds a padding of <code>8rem</code> to the top and a padding of <code>0</code> to the left, right, and bottom of the main card. This pushes the main card down, so it is no longer being covered by the navbar.</li>
</ul>
<div><p>Why not Start with this Padding?</p>
<p>In the previous tutorial we used <code>padding: 0</code> to style the <code>home</code> class since that code was based off of a more complicated way of styling the <code>Footer</code> component which has now been simplified. We'll be going over this simplified <code>Footer</code> component styling in the next tutorial.</p>
</div>
<p>Now that we've fixed the placement of the main card, let's add the hover effects to the main card logo and to the box shadow around the main card.</p>
<h3 id="adding-hover-effects"> Adding Hover Effects</h3>
<p>To implement the hover effects we'll be adding a <span>CSS pseudo-class</span> of <code>hover</code> to the <code>header</code> tag with a class of <code>hero</code> which we'll use along with the <code>transition</code> property to smoothly apply the hover effects to the main card logo and to the box shadow around the main card.</p>
<p>First, let's add the <code>hover</code> pseudo-class:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
      <span>.hero</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
        <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
        <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
        <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
        <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
      <span>.hero:hover</span>
        <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
        <span>img</span>
          <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
      <span>.features</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span>.feature</span>
          <span><span>text-align</span><span>:</span> center</span>
          <span>h2</span>
            <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>.hero:hover</code> applies the <code>hover</code> pseudo-class to the <code>.hero</code> selector which will apply the styles defined inside of it when the user hovers their pointer over the <code>header</code> tag with a class of <code>hero</code>.</li>
<li><code>box-shadow: 0.125rem 0.5rem 1rem 0.125rem #0b0c0f</code> changes the box shadow style defined in the <code>hero</code> class.</li>
<li><code>transform: scale(1.1)</code> applies the <code>scale()</code> method to the <code>transform</code> property to increase the size of the <code>img</code> tag to be <code>1.1</code> times the original width and height.</li>
</ul>
<p>If you have questions about the CSS discussed above, then check out these resources:</p>
<ul>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">Pseudo-classes<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover" target="_blank" rel="noopener noreferrer">:hover<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/css/css3_2dtransforms.asp" target="_blank" rel="noopener noreferrer">CSS 2D Transforms<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/cssref/css3_pr_box-shadow.asp" target="_blank" rel="noopener noreferrer">CSS box-shadow Property<i>Content not supported</i></a></span></li>
</ul>
<p>When you hover your pointer over the main card, you should see the logo increase in width and height and the box shadow around the main card should now be more prevalent.</p>
<p>The hover effects are working, but they aren't that smooth. To make them smoother we're going to use the <code>transition</code> property.</p>
<p>The <code>transition</code> property allows you to change CSS property values smoothly over a specified duration. To create a transition you need to specify two values:</p>
<ul>
<li>The CSS property you want to add the transition to</li>
<li>The duration of the transition</li>
</ul>
<p>Here's what the <code>index.styl</code> file looks like after adding our <code>transition</code> properties:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
      <span>.hero</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
        <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
        <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
        <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
        <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
        <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
        <span>img</span>
          <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
      <span>.hero:hover</span>
        <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
        <span>img</span>
          <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
      <span>.features</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span>.feature</span>
          <span><span>text-align</span><span>:</span> center</span>
          <span>h2</span>
            <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>transition: box-shadow 0.2s</code> adds the transition effect to the <code>box-shadow</code> property with a specified duration of <code>0.2s</code>.</li>
<li><code>transition: transform 0.2s</code> adds the transition effect to the <code>transform</code> property used by the <code>img</code> tag with a specified duration of <code>0.2s</code>.</li>
</ul>
<p>When you hover your pointer over the main card, the hover effects should look much smoother.</p>
<p>If you want to learn more about the <code>transition</code> property, then check out <a href="https://www.w3schools.com/css/css3_transitions.asp" target="_blank" rel="noopener noreferrer">CSS Transitions<i>Content not supported</i></a>.</p>
<p>Now that we have added our hover effects, let's add the radial gradient background to the main card.</p>
<h3 id="adding-gradient-background"> Adding Gradient Background</h3>
<p>CSS gradients allow you to display smooth transitions between two or more specified colors.
You can control numerous aspects of the transitions between the colors including the direction, shape, number of colors, etc.</p>
<p>We'll be adding a circular radial gradient background to the center of the <code>header</code> tag with a class of <code>hero</code>:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
      <span>.hero</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
        <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
        <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
        <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
        <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
        <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
        <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
        <span>img</span>
          <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
      <span>.hero:hover</span>
        <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
        <span>img</span>
          <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
      <span>.features</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span>.feature</span>
          <span><span>text-align</span><span>:</span> center</span>
          <span>h2</span>
            <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>background-image: radial-gradient(circle at center center, #2c303a, $backgroundColor)</code> adds a radial gradient with a circular shape to the center of the element starting with a color of <code>#2c303a</code> which transitions to the <code>$backgroundColor</code> variable that is defined in the <code>palette.styl</code> file.</li>
</ul>
<p>If you want to learn more about CSS gradients, then check out these resources:</p>
<ul>
<li><span><a href="https://www.w3schools.com/css/css3_gradients.asp" target="_blank" rel="noopener noreferrer">CSS Gradients<i>Content not supported</i></a></span></li>
<li><span><a href="https://css-tricks.com/a-complete-guide-to-css-gradients/#top-of-site" target="_blank" rel="noopener noreferrer">A Complete Guide to CSS Gradients<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient" target="_blank" rel="noopener noreferrer">radial-gradient()<i>Content not supported</i></a></span></li>
<li><span><a href="https://dev.to/obinnaogbonnajoseph/a-practical-guide-on-radial-gradient-css-2383" target="_blank" rel="noopener noreferrer">A Practical Guide on Radial Gradient - CSS<i>Content not supported</i></a></span></li>
</ul>
<p>You can also check out <a href="https://www.gradientmagic.com/" target="_blank" rel="noopener noreferrer">Gradient Magic<i>Content not supported</i></a> which is a gallery of CSS gradients that you can freely use in your own projects.</p>
<p>The background of the main card should now be a radial gradient that starts at the center of the card with a color of <code>#2c303a</code> that circularly transitions to the <code>$backgroundColor</code>.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll add styling to make the <code>Footer</code> component stick to the bottom of the page, and we'll add a highlight effect to the SVG icons.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 12 - Highlight SVGs on Hover</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-12/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-12/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 12 - Highlight SVGs on Hover</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to add a highlight effect when hovering over SVGs, then check out VuePress Tutorial 12 - Highlight SVGs on Hover! 🍌🐒</description>
      <pubDate>Thu, 08 Sep 2022 18:18:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-12-highlight-svgs-on-hover"> VuePress Tutorial 12 - Highlight SVGs on Hover</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>We're now ready to add a highlight effect when hovering over the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> icons. The method we'll be using doesn't require a lot of styling, but it does require us to edit the <code>fill</code> attribute of the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> icons.</p>
<p>We'll demonstrate how to edit the <code>fill</code> attribute by manually editing the files as well as using a Command-line Interface (CLI) command provided by <a href="https://github.com/ntnyq/vuepress-plugin-svg-icons/tree/vuepress-v1" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> which will automate the process and optimize the files.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-12</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-12" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<p>Now let's begin by manually editing one of the icon files.</p>
<h2 id="manual-editing"> Manual Editing</h2>
<p>When we downloaded the icons from <a href="https://www.iconfont.cn/collections/index" target="_blank" rel="noopener noreferrer">iconfont<i>Content not supported</i></a> we downloaded them with a <code>fill</code> attribute which will override the color we set for the hover effect.</p>
<p>To fix this issue we can manually remove the <code>fill</code> attribute from each icon file.</p>
<h3 id="icon-example"> Icon Example</h3>
<p>We'll use the <code>GitHub.svg</code> file as an example:</p>
<code-group>
<code-block title="GitHub.svg with fill Attribute">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br></div><pre><code><span>&lt;?xml version="1.0" standalone="no"?></span>
<span><span>&lt;!</span><span>DOCTYPE</span> <span>svg</span> <span>PUBLIC</span> <span>"-//W3C//DTD SVG 1.1//EN"</span>
 <span>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</span>
<span>></span></span>
<span><span><span>&lt;</span>svg</span>
  <span>t</span><span><span>=</span><span>"</span>1625711611350<span>"</span></span>
  <span>class</span><span><span>=</span><span>"</span>icon<span>"</span></span>
  <span>viewBox</span><span><span>=</span><span>"</span>0 0 1024 1024<span>"</span></span>
  <span>version</span><span><span>=</span><span>"</span>1.1<span>"</span></span>
  <span>xmlns</span><span><span>=</span><span>"</span>http://www.w3.org/2000/svg<span>"</span></span>
  <span>p-id</span><span><span>=</span><span>"</span>2770<span>"</span></span>
  <span><span>xmlns:</span>xlink</span><span><span>=</span><span>"</span>http://www.w3.org/1999/xlink<span>"</span></span>
  <span>width</span><span><span>=</span><span>"</span>200<span>"</span></span>
  <span>height</span><span><span>=</span><span>"</span>200<span>"</span></span>
<span>></span></span>
  <span><span><span>&lt;</span>defs</span><span>></span></span>
    <span><span><span>&lt;</span>style</span> <span>type</span><span><span>=</span><span>"</span>text/css<span>"</span></span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
  <span><span><span>&lt;/</span>defs</span><span>></span></span>
  <span><span><span>&lt;</span>path</span>
    <span>d</span><span><span>=</span><span>"</span>M64.6 512c0 195.6 125.4 361.9 300.1 422.9 23.5 5.9
       19.9-10.8 19.9-22.2v-77.6c-135.8
       15.9-141.3-74-150.5-89-18.5-31.5-61.9-39.5-49-54.5
       31-15.9 62.5 4 98.9 58 26.4 39.1 77.9 32.5 104.1 26 5.7-23.5
       17.9-44.5 34.7-60.9-140.7-25.2-199.4-111.1-199.4-213.3 0-49.5
       16.4-95.1 48.4-131.8-20.4-60.6 1.9-112.4 4.9-120.1 58.2-5.2
       118.5 41.6 123.3 45.3 33.1-8.9 70.8-13.7 112.9-13.7 42.4 0
       80.3 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.4-43.9 2.9 7.7
       24.7 58.3 5.5 118.1 32.5 36.8 49 82.8 49 132.4 0 102.3-59
       188.3-200.2 213.2 23.5 23.3 38.1 55.5 38.1 91.1v112.7c0.8
       9 0 17.9 15.1 17.9C832.7 877 960.4 709.4 960.4
       512.1c0-247.5-200.6-447.9-447.9-447.9C265
       64.1 64.6 264.5 64.6 512z<span>"</span></span>
    <span>fill</span><span><span>=</span><span>"</span>#e6e6e6<span>"</span></span>
    <span>p-id</span><span><span>=</span><span>"</span>2771<span>"</span></span>
  <span>></span></span><span><span><span>&lt;/</span>path</span><span>></span></span>
<span><span><span>&lt;/</span>svg</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br></div></div></code-block>
</code-group>
<p>After removing <code>fill=&quot;e6e6e6&quot;</code>, the file will look like this:</p>
<code-group>
<code-block title="GitHub.svg without fill Attribute">
<div><pre><code><span>&lt;?xml version="1.0" standalone="no"?></span>
<span><span>&lt;!</span><span>DOCTYPE</span> <span>svg</span> <span>PUBLIC</span> <span>"-//W3C//DTD SVG 1.1//EN"</span>
 <span>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</span>
<span>></span></span>
<span><span><span>&lt;</span>svg</span>
  <span>t</span><span><span>=</span><span>"</span>1625711611350<span>"</span></span>
  <span>class</span><span><span>=</span><span>"</span>icon<span>"</span></span>
  <span>viewBox</span><span><span>=</span><span>"</span>0 0 1024 1024<span>"</span></span>
  <span>version</span><span><span>=</span><span>"</span>1.1<span>"</span></span>
  <span>xmlns</span><span><span>=</span><span>"</span>http://www.w3.org/2000/svg<span>"</span></span>
  <span>p-id</span><span><span>=</span><span>"</span>2770<span>"</span></span>
  <span><span>xmlns:</span>xlink</span><span><span>=</span><span>"</span>http://www.w3.org/1999/xlink<span>"</span></span>
  <span>width</span><span><span>=</span><span>"</span>200<span>"</span></span>
  <span>height</span><span><span>=</span><span>"</span>200<span>"</span></span>
<span>></span></span>
  <span><span><span>&lt;</span>defs</span><span>></span></span>
    <span><span><span>&lt;</span>style</span> <span>type</span><span><span>=</span><span>"</span>text/css<span>"</span></span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
  <span><span><span>&lt;/</span>defs</span><span>></span></span>
  <span><span><span>&lt;</span>path</span>
    <span>d</span><span><span>=</span><span>"</span>M64.6 512c0 195.6 125.4 361.9 300.1 422.9 23.5 5.9
       19.9-10.8 19.9-22.2v-77.6c-135.8
       15.9-141.3-74-150.5-89-18.5-31.5-61.9-39.5-49-54.5
       31-15.9 62.5 4 98.9 58 26.4 39.1 77.9 32.5 104.1 26 5.7-23.5
       17.9-44.5 34.7-60.9-140.7-25.2-199.4-111.1-199.4-213.3 0-49.5
       16.4-95.1 48.4-131.8-20.4-60.6 1.9-112.4 4.9-120.1 58.2-5.2
       118.5 41.6 123.3 45.3 33.1-8.9 70.8-13.7 112.9-13.7 42.4 0
       80.3 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.4-43.9 2.9 7.7
       24.7 58.3 5.5 118.1 32.5 36.8 49 82.8 49 132.4 0 102.3-59
       188.3-200.2 213.2 23.5 23.3 38.1 55.5 38.1 91.1v112.7c0.8
       9 0 17.9 15.1 17.9C832.7 877 960.4 709.4 960.4
       512.1c0-247.5-200.6-447.9-447.9-447.9C265
       64.1 64.6 264.5 64.6 512z<span>"</span></span>
    <span>p-id</span><span><span>=</span><span>"</span>2771<span>"</span></span>
  <span>></span></span><span><span><span>&lt;/</span>path</span><span>></span></span>
<span><span><span>&lt;/</span>svg</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br></div></div></code-block>
</code-group>
<div><p>SVG File Formatting</p>
<p>The files above have been formatted to make them easier to read for this post, but the contents in your file may all be on one line. If this is the case, just scroll until you find the <code>fill</code> attribute or search for <code>fill</code> in the file to be able to easily find and remove it.</p>
</div>
<h3 id="icon-styles"> Icon Styles</h3>
<p>Now that we have removed the <code>fill</code> attribute from the file, we can add the styling to highlight the icon when hovering over it.</p>
<p>Here's what the <code>Footer.vue</code> file looks like after adding the hover effect:</p>
<code-group>
<code-block title="Footer.vue">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>footer</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>icons<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://github.com/codemonkeysio<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>GitHub<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://www.youtube.com/@codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>YouTube<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://gab.com/codemonkeys<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Gab<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://t.me/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Telegram<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://twitter.com/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Twitter<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://codemonkeys.tech/rss.xml<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>RSS<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://keybase.io/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Keybase<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>made-by<span>"</span></span><span>></span></span>Made by &amp; for Code Monkeys 🐵<span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>footer</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'Footer'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.footer
  <span>display</span><span>:</span> flex
  <span>flex-direction</span><span>:</span> column
  <span>align-items</span><span>:</span> center
  <span>padding</span><span>:</span> 2.5rem 2.5rem 2rem
  .icons
    <span>display</span><span>:</span> flex
    <span>margin-bottom</span><span>:</span> 1.75rem
    <span>font-size</span><span>:</span> 2rem
    <span>svg</span><span>:</span>hover
      <span>fill</span><span>:</span> $accentColor
  .icons > <span>a</span><span>:</span><span>not</span><span>(</span><span>:</span>last-child<span>)</span>
    <span>margin-right</span><span>:</span> 4.6875rem
  .made-by
    <span>margin</span><span>:</span> 0
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br><span>70</span><br><span>71</span><br><span>72</span><br><span>73</span><br><span>74</span><br><span>75</span><br><span>76</span><br><span>77</span><br><span>78</span><br><span>79</span><br><span>80</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>svg:hover</code> applies the <code>hover</code> pseudo-class to the <code>svg</code> selector which will apply the styles defined inside of it when the user hovers their pointer over the <code>svg</code> tag.</li>
<li><code>fill: $accentColor</code> changes the fill of the <code>svg</code> tag to be the accent color.</li>
</ul>
<p>Notice the icon fill is now set to be the accent color even if you're not hovering over the icon.</p>
<p>This is because we haven't set a <code>fill</code> attribute value for when the user isn't hovering over the icon, so it falls back to the value set in <code>svg:hover</code>.</p>
<p>To fix this issue we'll add the following styling to the <code>Footer.vue</code> file:</p>
<code-group>
<code-block title="Footer.vue">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>footer</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>icons<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://github.com/codemonkeysio<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>GitHub<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://www.youtube.com/@codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>YouTube<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://gab.com/codemonkeys<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Gab<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://t.me/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Telegram<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://twitter.com/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Twitter<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://codemonkeys.tech/rss.xml<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>RSS<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://keybase.io/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Keybase<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>made-by<span>"</span></span><span>></span></span>Made by &amp; for Code Monkeys 🐵<span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>footer</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'Footer'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.footer
  <span>display</span><span>:</span> flex
  <span>flex-direction</span><span>:</span> column
  <span>align-items</span><span>:</span> center
  <span>padding</span><span>:</span> 2.5rem 2.5rem 2rem
  .icons
    <span>display</span><span>:</span> flex
    <span>margin-bottom</span><span>:</span> 1.75rem
    <span>font-size</span><span>:</span> 2rem
    svg
      <span>fill</span><span>:</span> $textColor
    <span>svg</span><span>:</span>hover
      <span>fill</span><span>:</span> $accentColor
  .icons > <span>a</span><span>:</span><span>not</span><span>(</span><span>:</span>last-child<span>)</span>
    <span>margin-right</span><span>:</span> 4.6875rem
  .made-by
    <span>margin</span><span>:</span> 0
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br><span>70</span><br><span>71</span><br><span>72</span><br><span>73</span><br><span>74</span><br><span>75</span><br><span>76</span><br><span>77</span><br><span>78</span><br><span>79</span><br><span>80</span><br><span>81</span><br><span>82</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>svg</code> is the selector used to target the icon.</li>
<li><code>fill: $textColor</code> sets the fill of the <code>svg</code> to be the text color when the user isn't hovering over the icon.</li>
</ul>
<p>The fill should now be the same as the text color when you're not hovering over the icon, and it should get set to be the accent color when you hover over the icon.</p>
<p>To set the hover effect for the other icons, you will need to remove the <code>fill</code> attribute from the other icon files.</p>
<p>If you have questions about the CSS discussed above, then check out these resources:</p>
<ul>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">Pseudo-classes<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover" target="_blank" rel="noopener noreferrer">:hover<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank" rel="noopener noreferrer">SVG Attribute reference<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill" target="_blank" rel="noopener noreferrer">fill<i>Content not supported</i></a></span></li>
</ul>
<p>You can also check out this <a href="https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/" target="_blank" rel="noopener noreferrer">CSS-Tricks post<i>Content not supported</i></a> if you're interested in learning about other ways to change the fill on hover.</p>
<p>Instead of manually editing each file, we can use the CLI command provided by <a href="https://github.com/ntnyq/vuepress-plugin-svg-icons/tree/vuepress-v1" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> to automate the process.</p>
<h2 id="automated-editing"> Automated Editing</h2>
<p>The CLI command provided by <a href="https://github.com/ntnyq/vuepress-plugin-svg-icons/tree/vuepress-v1" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> optimizes <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> files by removing a lot of redundant and useless information including the <code>fill</code> attribute. The plugin does this by integrating <a href="https://github.com/svg/svgo" target="_blank" rel="noopener noreferrer">SVGO<i>Content not supported</i></a> which stands for Scalable Vector Graphic Optimizer and is a <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> based tool for optimizing <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> files.</p>
<h3 id="cli-command"> CLI Command</h3>
<p>Here's the CLI command you need to run <code>vuepress svgo [docsDir]</code> where <code>[docsDir]</code> is the docs directory for your project which in our case is <code>docs</code>.</p>
<p>You can add the CLI command to the <code>scripts</code> object in the <code>package.json</code> file:</p>
<code-group>
<code-block title="package.json">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"code-monkeys-blog-tutorials"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.0.0"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>{</span>
    <span>"type"</span><span>:</span> <span>"git"</span><span>,</span>
    <span>"url"</span><span>:</span> <span>"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git"</span>
  <span>}</span><span>,</span>
  <span>"author"</span><span>:</span> <span>{</span>
    <span>"name"</span><span>:</span> <span>"J the Code Monkey"</span><span>,</span>
    <span>"email"</span><span>:</span> <span>"support@codemonkeys.tech"</span><span>,</span>
    <span>"url"</span><span>:</span> <span>"https://www.codemonkeys.tech/"</span>
  <span>}</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"GPL-3.0-or-later"</span><span>,</span>
  <span>"scripts"</span><span>:</span> <span>{</span>
    <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
    <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span><span>,</span>
    <span>"svgo"</span><span>:</span> <span>"vuepress svgo docs"</span>
  <span>}</span><span>,</span>
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"@goy/vuepress-plugin-svg-icons"</span><span>:</span> <span>"^4.2.3"</span><span>,</span>
    <span>"vuepress"</span><span>:</span> <span>"1.8.2"</span>
  <span>}</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br></div></div></code-block>
</code-group>
<p>Then you can run the script using:</p>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> svgo
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> run svgo
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the script, the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> files will be optimized which includes removing the <code>fill</code> attribute from the files.</p>
<p>The hover effect should now be applied to each icon assuming you added the styling from the section above.</p>
<p>If you have any questions or want to learn more about the plugin, then check out the <a href="https://github.com/ntnyq/vuepress-plugin-svg-icons/tree/vuepress-v1/docs/guide" target="_blank" rel="noopener noreferrer">guide<i>Content not supported</i></a>.</p>
<p>You can also check out <a href="https://github.com/svg/svgo" target="_blank" rel="noopener noreferrer">SVGO<i>Content not supported</i></a> if you want to learn more about the optimization tool including CLI usage, configuration, API usage, etc.</p>
<h3 id="optimized-icon-example"> Optimized Icon Example</h3>
<p>Here's the contents of the optimized <code>GitHub.svg</code> file:</p>
<code-group>
<code-block title="Optimized GitHub.svg">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>svg</span>
  <span>viewBox</span><span><span>=</span><span>"</span>0 0 1024 1024<span>"</span></span>
  <span>xmlns</span><span><span>=</span><span>"</span>http://www.w3.org/2000/svg<span>"</span></span>
<span>></span></span>
  <span><span><span>&lt;</span>defs</span><span>></span></span>
    <span><span><span>&lt;</span>style</span><span>/></span></span>
  <span><span><span>&lt;/</span>defs</span><span>></span></span>
  <span><span><span>&lt;</span>path</span>
    <span>d</span><span><span>=</span><span>"</span>M64.6 512c0 195.6 125.4 361.9 300.1 422.9 23.5 5.9
    19.9-10.8 19.9-22.2v-77.6c-135.8
    15.9-141.3-74-150.5-89-18.5-31.5-61.9-39.5-49-54.5
    31-15.9 62.5 4 98.9 58 26.4 39.1 77.9 32.5 104.1 26 5.7-23.5
    17.9-44.5 34.7-60.9-140.7-25.2-199.4-111.1-199.4-213.3 0-49.5
    16.4-95.1 48.4-131.8-20.4-60.6 1.9-112.4 4.9-120.1 58.2-5.2
    118.5 41.6 123.3 45.3 33.1-8.9 70.8-13.7 112.9-13.7 42.4 0
    80.3 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.4-43.9 2.9 7.7
    24.7 58.3 5.5 118.1 32.5 36.8 49 82.8 49 132.4 0 102.3-59
    188.3-200.2 213.2 23.5 23.3 38.1 55.5 38.1 91.1v112.7c.8
    9 0 17.9 15.1 17.9C832.7 877 960.4 709.4 960.4
    512.1c0-247.5-200.6-447.9-447.9-447.9C265
    64.1 64.6 264.5 64.6 512z<span>"</span></span>
  <span>/></span></span>
<span><span><span>&lt;/</span>svg</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br></div></div></code-block>
</code-group>
<div><p>SVG File Formatting</p>
<p>Just like the previous examples the file is formatted to make it easier to read for this post, but the contents in your file may all be on one line.</p>
</div>
<p>If you compare the optimized file with the original file above, you'll notice a lot of unnecessary information was removed including the <code>fill</code> attribute without affecting the rendering of the icons.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be styling the navbar by updating the background color, height, border, etc.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 11 - Sticky Footer</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-11/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-11/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 11 - Sticky Footer</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to make your footer stick to the bottom of the page, then check out VuePress Tutorial 11 - Sticky Footer! 🍌🐒</description>
      <pubDate>Mon, 05 Sep 2022 20:04:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-11-sticky-footer"> VuePress Tutorial 11 - Sticky Footer</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>We're going to continue styling the blog by making the <code>Footer</code> component we created in <a href="/vuepress-tutorial-8">VuePress Tutorial 8 - Custom Footer</a> into a sticky footer. We were going to be adding a highlight effect when hovering over the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> icons in this tutorial as well, but the process is a little more involved than I remembered. So, we're going to be adding the highlight effect when hovering in the next tutorial.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-11</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-11" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<p>Now let's get started by discussing what a sticky footer is.</p>
<h2 id="what-is-a-sticky-footer"> What is a Sticky Footer?</h2>
<p>A sticky footer adheres or <span>sticks</span> to the bottom of the browser window assuming there isn't enough content on the page to push the footer lower like on this blog post for example. If the content on the page is short like on the <a href="/">homepage</a>, then the footer will still stick to the bottom of the page instead of appearing directly below the content above it.</p>
<p>There are multiple ways to add a sticky footer to your site, but we're only going to discuss how to use the CSS <code>calc()</code> function. If you're interested in learning about the other ways of adding a sticky footer, then check out <a href="https://css-tricks.com/couple-takes-sticky-footer/" target="_blank" rel="noopener noreferrer">Sticky Footer, Five Ways<i>Content not supported</i></a>.</p>
<h2 id="sticky-footer-styling"> Sticky Footer Styling</h2>
<p>Here's what the <code>index.styl</code> file looks like after adding the sticky footer styling:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br></div></div></code-block>
</code-group>
<p>Here we added <code>min-height: calc(100vh - 10.3125rem)</code> to a <code>div</code> tag with a class of <code>theme-container</code>.</p>
<p>If you inspect the browser and go to the <code>Elements</code> tab, you can see where the <code>div</code> tag with a class of <code>theme-container</code> is in the HTML of the blog.</p>
<code-group>
<code-block title="HTML Showing the theme-container Class">
<div><div><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>The <code>div</code> tag with a class of <code>theme-container</code> contains all of the content of the blog except for the <code>footer</code> tag.</p>
<p>So, here we're using <code>min-height: calc(100vh - 10.3125rem)</code> to set the minimum height of the content inside of the <code>div</code> tag with a class of <code>theme-container</code> to be <code>100vh</code> minus <code>10.3125rem</code> which is the height of the <code>Footer</code> component including the top and bottom padding.</p>
<p>The unit of <code>vh</code> is relative to 1% of the height of the viewport which is the browser window size, so <code>100vh</code> is 100% of the height of the viewport.</p>
<p>So, when we subtract <code>10.3125rem</code> from <code>100vh</code>, we're subtracting the height of the <code>Footer</code> component from 100% of the viewport height.</p>
<p>This means the minimum height of the content inside of the <code>div</code> tag with a class of <code>theme-container</code> will be the entire homepage height minus the height of the <code>Footer</code> component.</p>
<p>After setting this style, notice how the <code>Footer</code> component is now pushed to the bottom of the page. This is how we get the <code>Footer</code> component to stick to the bottom of the page.</p>
<p>Also, since we added this style to the <code>index.styl</code> file, this style will be applied globally to the blog which is fine since the <code>Footer</code> component will be used on every page in the blog.</p>
<div><p>Using a Fixed Footer Size</p>
<p>We're using a fixed size for the height of the <code>Footer</code> component which means if we change the height later on we'll have to update this value. In a future tutorial we'll be changing the height, so we'll have to update this value. If you prefer to not update this value whenever you update the height of the <code>Footer</code> component, then it may be worth looking into implementing the <code>flexbox</code> or <code>grid</code> methods for adding a sticky footer which you can find in the <a href="https://css-tricks.com/couple-takes-sticky-footer/" target="_blank" rel="noopener noreferrer">Sticky Footer, Five Ways<i>Content not supported</i></a> post.</p>
</div>
<p>If you have questions about the CSS discussed above, then check out these resources:</p>
<ul>
<li><span><a href="https://www.w3schools.com/cssref/pr_dim_min-height.asp" target="_blank" rel="noopener noreferrer">CSS min-height Property<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" target="_blank" rel="noopener noreferrer">calc()<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units" target="_blank" rel="noopener noreferrer">CSS values and units<i>Content not supported</i></a></span></li>
</ul>
<h2 id="next-steps"> Next Steps</h2>
<p>As mentioned in the beginning of this post, in the next tutorial we're going to be adding a highlight effect when hovering over the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">SVG<i>Content not supported</i></a> icons.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 13 - Navbar Styling</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-13/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-13/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 13 - Navbar Styling</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to style the navbar for your VuePress site, then check out VuePress Tutorial 13 - Navbar Styling! 🍌🐒</description>
      <pubDate>Sun, 11 Sep 2022 17:11:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-13-navbar-styling"> VuePress Tutorial 13 - Navbar Styling</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>Currently, the navbar is not looking too good, so in this tutorial we're going to begin fixing that by adding some styling. We're going to be targeting these CSS classes provided by the <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>: <code>navbar</code>, <code>site-name</code>, <code>links</code>, <code>search-box</code>, <code>nav-links</code>, <code>nav-item</code>, and <code>dropdown-title</code>.</p>
<p>To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the <code>Elements</code> tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the <code>index.styl</code> file which will globally apply the styles. Finally, we'll be describing the styling in detail.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-13</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-13" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="navbar-class"> Navbar Class</h2>
<p>Alright, now we're ready to begin styling the navbar.</p>
<h3 id="html-location"> HTML Location</h3>
<p>We're going to start by locating where the <code>navbar</code> class is in the HTML:</p>
<code-group>
<code-block title="Locating the navbar Class">
<div><div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>navbar</code> class is attached to a <code>header</code> tag and is a child of the <code>div</code> tag with a class of <code>theme-container</code>.</p>
<h3 id="styling"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>navbar</code> class inside of the <code>theme-container</code> class and apply the following styles:</p>
<code-group>
<code-block title="Adding the navbar Class">
<div><div><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>display: flex</code> defines a flex container for all of the direct children of the <code>header</code> tag with a class of <code>navbar</code>.</li>
<li><code>align-items: center</code> vertically centers the flex items, i.e., the direct children of the <code>header</code> tag with a class of <code>navbar</code>.</li>
<li><code>height: 4.5rem</code> sets the height of the navbar to be <code>4.5rem</code>.</li>
<li><code>background-color: $backgroundColor</code> sets the background color of the navbar to be <code>$backgroundColor</code> which is a global styling variable we set in the <code>palette.styl</code> file.</li>
<li><code>border-bottom-width: 0.125rem</code> sets the border bottom width of the navbar to be <code>0.125rem</code>.</li>
</ul>
<h2 id="site-name-class"> Site Name Class</h2>
<p>After locating and styling the <code>navbar</code> class, we're ready to move on to the <code>site-name</code> class.</p>
<h3 id="html-location-2"> HTML Location</h3>
<p>Here's the location of the <code>site-name</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the site-name Class">
<div><div><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>Code Monkeys<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>logo<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>site-name can-hide<span>"</span></span><span>></span></span>Code Monkeys<span><span><span>&lt;/</span>span</span><span>></span></span>
          <span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span>style</span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>site-name</code> class is attached to a <code>span</code> tag and is a child of the <code>a</code> tag with a class of <code>home-link</code> which is a child of the <code>header</code> tag with a class of <code>navbar</code>.</p>
<h3 id="styling-2"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>site-name</code> class inside of the <code>navbar</code> class and apply the following style:</p>
<code-group>
<code-block title="Adding the site-name Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>font-size: 1.5rem</code> sets the font size of the site name in the navbar, i.e., Code Monkeys to be <code>1.5rem</code>.</li>
</ul>
<h2 id="links-class"> Links Class</h2>
<p>We're now ready to style the <code>links</code> class.</p>
<h3 id="html-location-3"> HTML Location</h3>
<p>Here's the location of the <code>links</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the links Class">
<div><div><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span>style</span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>links</code> class is attached to a <code>div</code> tag and is a child of the <code>header</code> tag with a class of <code>navbar</code>.</p>
<h3 id="styling-3"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>links</code> class inside of the <code>navbar</code> class and apply the following styles:</p>
<code-group>
<code-block title="Adding the links Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>background-color: transparent</code> sets the background color behind the search box and of the links on the right side of the navbar to be <code>transparent</code>. This has the effect of showing the background color set in the <code>navbar</code> class since it's no longer being covered by the background color set in the <code>links</code> class.</li>
<li><code>height: 3rem</code> sets the height of the <code>div</code> tag which contains the search box and the links on the right side of the navbar to be <code>3rem</code>.</li>
<li><code>align-items: center</code> vertically centers the flex items, i.e., the direct children of the <code>div</code> tag with a class of <code>links</code> which was given a style of <code>display: flex</code> by the <span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a></span>.</li>
</ul>
<h2 id="search-box-class"> Search Box Class</h2>
<p>We've finished styling the <code>links</code> class, so let's begin the styling of the <code>search-box</code> class.</p>
<h3 id="html-location-4"> HTML Location</h3>
<p>Here's the location of the <code>search-box</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the search-box Class">
<div><div><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span>style</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>search-box</code> class is attached to a <code>div</code> tag and is a child of the <code>div</code> tag with a class of <code>links</code>.</p>
<h3 id="styling-4"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>search-box</code> class inside of the <code>links</code> class and apply the following styles:</p>
<code-group>
<code-block title="Adding the search-box Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
          <span>.search-box</span>
            <span><span>margin-right</span><span>:</span> <span>1.5</span><span>rem</span></span>
            <span>input</span>
              <span><span>font-size</span><span>:</span> <span>1.125</span><span>rem</span></span>
              <span><span>background-color</span><span>:</span> <span>transparent</span></span>
              <span><span>border-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
              <span><span>color</span><span>:</span> $textColor</span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>margin-right: 1.5rem</code> adds a margin of <code>1.5rem</code> to the right of the search box.</li>
<li><code>font-size: 1.125rem</code> sets the font size of the text in the <code>input</code> tag to be <code>1.125rem</code>.</li>
<li><code>background-color: transparent</code> sets the background color of the <code>input</code> tag to be <code>transparent</code>. This has the effect of showing the background color set in the <code>navbar</code> class since it's no longer being covered by the background color set in the <code>input</code> tag.</li>
<li><code>border-width: 0.125rem</code> sets the width of the border around the <code>input</code> tag to be <code>0.125rem</code>.</li>
<li><code>color: $textColor</code> sets the color of the text in the <code>input</code> tag to be <code>$textColor</code> which is a global styling variable we set in the <code>palette.styl</code> file.</li>
</ul>
<div><p>Viewing the font-size and color Styles</p>
<p>To see the <code>font-size</code> and <code>color</code> styles in action try typing some text in the search box. Once you click in the search box, notice the border gets its color set to the <code>$accentColor</code> which is a global styling variable we set in the <code>palette.styl</code> file. This effect is provided by the <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> and uses the <code>focus</code> pseudo-class.</p>
</div>
<h2 id="nav-links-class"> Nav Links Class</h2>
<p>Now that we have styled the <code>search-box</code> class and its child <code>input</code> tag, we're ready to move on to the styling of the <code>nav-links</code> class.</p>
<h3 id="html-location-5"> HTML Location</h3>
<p>Here's the location of the <code>nav-links</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the nav-links Class">
<div><div><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span>style</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>nav-links</code> class is attached to a <code>nav</code> tag and is a child of the <code>div</code> tag with a class of <code>links</code>.</p>
<h3 id="styling-5"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>nav-links</code> class inside of the <code>links</code> class and apply the following style:</p>
<code-group>
<code-block title="Adding the nav-links Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
          <span>.search-box</span>
            <span><span>margin-right</span><span>:</span> <span>1.5</span><span>rem</span></span>
            <span>input</span>
              <span><span>font-size</span><span>:</span> <span>1.125</span><span>rem</span></span>
              <span><span>background-color</span><span>:</span> <span>transparent</span></span>
              <span><span>border-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
              <span><span>color</span><span>:</span> $textColor</span>
          <span>.nav-links</span>
            <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>font-size: 1.25rem</code> sets the font size of the nav links on the right side of the navbar to be <code>1.25rem</code>.</li>
</ul>
<h2 id="nav-item-class"> Nav Item Class</h2>
<p>We're now ready to style the <code>nav-item</code> class.</p>
<h3 id="html-location-6"> HTML Location</h3>
<p>Here's the location of the <code>nav-item</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the nav-item Class">
<div><div><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span>style</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span>&lt;!----></span>
            <span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that there are four <code>nav-item</code> classes. Each one is attached to a <code>div</code> tag and is a child of the <code>nav</code> tag with a class of <code>nav-links</code>.</p>
<h3 id="styling-6"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>nav-item</code> class inside of the <code>nav-links</code> class and apply the following styles:</p>
<code-group>
<code-block title="Adding the nav-item Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
          <span>.search-box</span>
            <span><span>margin-right</span><span>:</span> <span>1.5</span><span>rem</span></span>
            <span>input</span>
              <span><span>font-size</span><span>:</span> <span>1.125</span><span>rem</span></span>
              <span><span>background-color</span><span>:</span> <span>transparent</span></span>
              <span><span>border-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
              <span><span>color</span><span>:</span> $textColor</span>
          <span>.nav-links</span>
            <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
            <span>.nav-item:first-child</span>
              <span><span>margin-left</span><span>:</span> <span>0</span></span>
            <span>.nav-item</span>
              <span><span>margin-left</span><span>:</span> <span>1.75</span><span>rem</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>.nav-item:first-child</code> applies the <code>first-child</code> pseudo-class to the <code>.nav-item</code> selector. The <code>first-child</code> pseudo-class applies the styles defined inside of it to the first element among a group of sibling elements which in our case is the first <code>div</code> tag with a class of <code>nav-item</code> in the group of sibling <code>div</code> tags that have the class of <code>nav-item</code>.</li>
<li><code>margin-left: 0</code> adds a margin of <code>0</code> to the left of the first <code>div</code> tag with a class of <code>nav-item</code> within the group of sibling <code>div</code> tags that have a class of <code>nav-item</code>.</li>
<li><code>margin-left: 1.75rem</code> adds a margin of <code>1.75rem</code> to the left of all of the <code>div</code> tags that have a class of <code>nav-item</code> except for the first one since that is being styled by the <code>first-child</code> pseudo-class.</li>
</ul>
<h2 id="dropdown-title-class"> Dropdown Title Class</h2>
<p>After finishing the styling for the <code>nav-item</code> class, we're now ready to move on to the styling of the <code>dropdown-title</code> class.</p>
<h3 id="html-location-7"> HTML Location</h3>
<p>Here's the location of the <code>dropdown-title</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the dropdown-title Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span>style</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>dropdown-wrapper<span>"</span></span><span>></span></span>
                  <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>dropdown-title<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>button</span><span>></span></span>
                  <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>mobile-dropdown-title<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>button</span><span>></span></span>
                  <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>nav-dropdown<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>display</span><span>:</span> none<span>;</span></span><span>"</span></span></span><span>></span></span>...<span><span><span>&lt;/</span>ul</span><span>></span></span>
                <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span>&lt;!----></span>
            <span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>dropdown-title</code> class is attached to a <code>button</code> tag and is a child of the <code>div</code> tag with a class of <code>dropdown-wrapper</code> which is a child tag of the <code>div</code> tag with a class of <code>nav-item</code>.</p>
<h3 id="styling-7"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>dropdown-title</code> class inside of the <code>nav-item</code> class and apply the following style:</p>
<code-group>
<code-block title="Adding the nav-item Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
          <span>.search-box</span>
            <span><span>margin-right</span><span>:</span> <span>1.5</span><span>rem</span></span>
            <span>input</span>
              <span><span>font-size</span><span>:</span> <span>1.125</span><span>rem</span></span>
              <span><span>background-color</span><span>:</span> <span>transparent</span></span>
              <span><span>border-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
              <span><span>color</span><span>:</span> $textColor</span>
          <span>.nav-links</span>
            <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
            <span>.nav-item:first-child</span>
              <span><span>margin-left</span><span>:</span> <span>0</span></span>
            <span>.nav-item</span>
              <span><span>margin-left</span><span>:</span> <span>1.75</span><span>rem</span></span>
              <span>.dropdown-title</span>
                <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>font-size: 1.25rem</code> sets the font size of the dropdown title, i.e., Posts to be <code>1.25rem</code>.</li>
</ul>
<p>If you have questions about the CSS discussed above, then check out these resources:</p>
<ul>
<li><span><a href="https://www.w3schools.com/css/default.asp" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noopener noreferrer">Basic Concepts of Flexbox<i>Content not supported</i></a></span></li>
<li><span><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener noreferrer">A Complete Guide to Flexbox<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer">Pseudo-classes<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus" target="_blank" rel="noopener noreferrer">:focus<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child" target="_blank" rel="noopener noreferrer">:first-child<i>Content not supported</i></a></span></li>
</ul>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be styling the dropdown menu in the navbar by updating the background color, border, padding, etc.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 14 - Dropdown Menu Styling</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-14/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-14/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 14 - Dropdown Menu Styling</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to style the dropdown menu for your VuePress site, then check out VuePress Tutorial 14 - Dropdown Menu Styling! 🍌🐒</description>
      <pubDate>Thu, 15 Sep 2022 22:17:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-14-dropdown-menu-styling"> VuePress Tutorial 14 - Dropdown Menu Styling</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>If you hover over Posts in the navbar, the dropdown menu will appear. You'll notice the dropdown menu needs some styling to make it match the rest of the blog. To implement the styling we'll be targeting these CSS classes <code>nav-dropdown</code> and <code>dropdown-item</code> which are provided by the <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the <code>Elements</code> tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the <code>index.styl</code> file which will globally apply the styles. Finally, we'll be describing the styling in detail.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-14</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-14" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="force-dropdown-menu-to-hover"> Force Dropdown Menu to Hover</h2>
<p>Before we start styling the dropdown menu, we're going to force an element state of hover on the <code>div</code> tag with a class of <code>dropdown-wrapper</code>. This will ensure we can see the changes we're making to the dropdown menu even when we move the cursor away from the <code>dropdown-wrapper</code> class.</p>
<p>To do this we need to select the <code>dropdown-wrapper</code> class in the <code>Elements</code> tab.</p>
<p>Here's the location of the <code>dropdown-wrapper</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the dropdown-wrapper Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 2337px<span>;</span></span><span>"</span></span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>dropdown-wrapper<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span>&lt;!----></span>
            <span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br></div></div></code-block>
</code-group>
<p>After selecting the <code>dropdown-wrapper</code> class in the <code>Elements</code> tab, we need to go to the <code>Styles</code> tab, click on the <code>:hov</code> tab, then force the element state of hover by checking the <code>:hover</code> checkbox.</p>
<p>The dropdown menu should now be shown even when the cursor is moved away from the <code>dropdown-wrapper</code> class.</p>
<h2 id="nav-dropdown"> Nav Dropdown</h2>
<p>We're now ready to begin styling the dropdown menu.</p>
<h3 id="html-location"> HTML Location</h3>
<p>We're going to begin the styling by locating where the <code>nav-dropdown</code> class is in the HTML:</p>
<code-group>
<code-block title="Locating the nav-dropdown Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 2337px<span>;</span></span><span>"</span></span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>dropdown-wrapper<span>"</span></span><span>></span></span>
                  <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>dropdown-title<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>button</span><span>></span></span>
                  <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>mobile-dropdown-title<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>button</span><span>></span></span>
                  <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>nav-dropdown<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>display</span><span>:</span> none<span>;</span></span><span>"</span></span></span><span>></span></span>...<span><span><span>&lt;/</span>ul</span><span>></span></span>
                <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span>&lt;!----></span>
            <span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that the <code>nav-dropdown</code> class is attached to a <code>ul</code> tag and is a child of the <code>div</code> tag with a class of <code>dropdown-wrapper</code> which is a child tag of the <code>div</code> tag with a class of <code>nav-item</code>.</p>
<h3 id="styling"> Styling</h3>
<p>This means in the <code>index.styl</code> file we can nest the <code>nav-dropdown</code> class inside of the <code>nav-item</code> class and apply the following styles:</p>
<code-group>
<code-block title="Adding the nav-dropdown Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
          <span>.search-box</span>
            <span><span>margin-right</span><span>:</span> <span>1.5</span><span>rem</span></span>
            <span>input</span>
              <span><span>font-size</span><span>:</span> <span>1.125</span><span>rem</span></span>
              <span><span>background-color</span><span>:</span> <span>transparent</span></span>
              <span><span>border-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
              <span><span>color</span><span>:</span> $textColor</span>
          <span>.nav-links</span>
            <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
            <span>.nav-item:first-child</span>
              <span><span>margin-left</span><span>:</span> <span>0</span></span>
            <span>.nav-item</span>
              <span><span>margin-left</span><span>:</span> <span>1.75</span><span>rem</span></span>
              <span>.dropdown-title</span>
                <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
              <span>.nav-dropdown</span>
                <span><span>text-align</span><span>:</span> center</span>
                <span><span>background-color</span><span>:</span> $backgroundColor</span>
                <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
                <span><span>padding</span><span>:</span> <span>0.8</span><span>rem</span> <span>0</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>text-align: center</code> horizontally aligns the text in the dropdown menu.</li>
<li><code>background-color: $backgroundColor</code> sets the background color of the dropdown menu to be <code>$backgroundColor</code> which is a global styling variable we set in the <code>palette.styl</code> file.</li>
<li><code>border: 0.125rem solid $borderColor</code> adds a border around the dropdown menu with a thickness of <code>0.125rem</code>, a style of <code>solid</code>, and a color of <code>$borderColor</code> which was defined in the <code>palette.styl</code> file.</li>
<li><code>padding: 0.8rem 0</code> adds a padding of <code>0.8rem</code> to the top and bottom and <code>0</code> to the left and right of the dropdown menu.</li>
</ul>
<h2 id="dropdown-item"> Dropdown Item</h2>
<p>We're now ready to style the <code>dropdown-item</code> class.</p>
<h3 id="html-location-2"> HTML Location</h3>
<p>Here's the location of the <code>dropdown-item</code> class in the HTML:</p>
<code-group>
<code-block title="Locating the dropdown-item Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
 <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 2337px<span>;</span></span><span>"</span></span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>dropdown-wrapper<span>"</span></span><span>></span></span>
                  <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>dropdown-title<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>button</span><span>></span></span>
                  <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>mobile-dropdown-title<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>button</span><span>></span></span>
                  <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>nav-dropdown<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>display</span><span>:</span> none<span>;</span></span><span>"</span></span></span><span>></span></span>
                    <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-item<span>"</span></span><span>></span></span>
                      ::marker
                      <span>&lt;!----></span>
                      <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> All Posts <span><span><span>&lt;/</span>a</span><span>></span></span>
                    <span><span><span>&lt;/</span>li</span><span>></span></span>
                    <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-item<span>"</span></span><span>></span></span>
                      ::marker
                      <span><span><span>&lt;</span>h4</span><span>></span></span> By Topic <span><span><span>&lt;/</span>h4</span><span>></span></span>
                      <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>dropdown-subitem-wrapper<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>ul</span><span>></span></span>
                    <span><span><span>&lt;/</span>li</span><span>></span></span>
                  <span><span><span>&lt;/</span>ul</span><span>></span></span>
                <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
              <span>&lt;!----></span>
            <span><span><span>&lt;/</span>nav</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br></div></div></code-block>
</code-group>
<p>From the HTML above we can see that there are two <code>dropdown-item</code> classes. Each one is attached to an <code>li</code> tag and is a child of the <code>ul</code> tag with a class of <code>nav-dropdown</code>.</p>
<p>Also, notice the <code>h4</code> tag which is a child of the <code>li</code> tag with a class of <code>dropdown-item</code>. We'll be styling this <code>h4</code> tag as well.</p>
<h3 id="styling-2"> Styling</h3>
<p>In the <code>index.styl</code> file we can nest the <code>dropdown-item</code> class inside of the <code>nav-dropdown</code> class as well as nest the <code>h4</code> tag inside of the <code>dropdown-item</code> class and apply the following styles:</p>
<code-group>
<code-block title="Adding the dropdown-item Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.theme-container</span>
      <span><span>min-height</span><span>:</span> <span><span>calc</span><span>(</span><span>100</span><span>vh</span> <span>-</span> <span>10.3125</span><span>rem</span><span>)</span></span></span>
      <span>.navbar</span>
         <span><span>display</span><span>:</span> flex</span>
         <span><span>align-items</span><span>:</span> center</span>
         <span><span>height</span><span>:</span> <span>4.5</span><span>rem</span></span>
         <span><span>background-color</span><span>:</span> $backgroundColor</span>
         <span><span>border-bottom-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
        <span>.site-name</span>
          <span><span>font-size</span><span>:</span> <span>1.5</span><span>rem</span></span>
        <span>.links</span>
          <span><span>background-color</span><span>:</span> <span>transparent</span></span>
          <span><span>height</span><span>:</span> <span>3</span><span>rem</span></span>
          <span><span>align-items</span><span>:</span> center</span>
          <span>.search-box</span>
            <span><span>margin-right</span><span>:</span> <span>1.5</span><span>rem</span></span>
            <span>input</span>
              <span><span>font-size</span><span>:</span> <span>1.125</span><span>rem</span></span>
              <span><span>background-color</span><span>:</span> <span>transparent</span></span>
              <span><span>border-width</span><span>:</span> <span>0.125</span><span>rem</span></span>
              <span><span>color</span><span>:</span> $textColor</span>
          <span>.nav-links</span>
            <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
            <span>.nav-item:first-child</span>
              <span><span>margin-left</span><span>:</span> <span>0</span></span>
            <span>.nav-item</span>
              <span><span>margin-left</span><span>:</span> <span>1.75</span><span>rem</span></span>
              <span>.dropdown-title</span>
                <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
              <span>.nav-dropdown</span>
                <span><span>text-align</span><span>:</span> center</span>
                <span><span>background-color</span><span>:</span> $backgroundColor</span>
                <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
                <span><span>padding</span><span>:</span> <span>0.8</span><span>rem</span> <span>0</span></span>
                <span>.dropdown-item</span>
                  <span><span>padding-bottom</span><span>:</span> <span>0.4</span><span>rem</span></span>
                  <span>h4</span>
                    <span><span>border-top</span><span>:</span> <span>0.0625</span><span>rem</span> solid $borderColor</span>
                    <span><span>cursor</span><span>:</span> text</span>
                    <span><span>margin</span><span>:</span> <span>0.45</span><span>rem</span> <span>0.375</span><span>rem</span> <span>0</span></span>
      <span>.home</span>
        <span><span>padding</span><span>:</span> <span>8</span><span>rem</span> <span>0</span> <span>0</span></span>
        <span>.hero</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
          <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
          <span><span>transition</span><span>:</span> box-shadow <span>0.2</span><span>s</span></span>
          <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
          <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
          <span><span>background-image</span><span>:</span> <span><span>radial-gradient</span><span>(</span>circle at center center<span>,</span> <span>#2c303a</span><span>,</span> $backgroundColor<span>)</span></span></span>
          <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
          <span>img</span>
            <span><span>transition</span><span>:</span> transform <span>0.2</span><span>s</span></span>
        <span>.hero:hover</span>
          <span><span>box-shadow</span><span>:</span> <span>0.125</span><span>rem</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0.125</span><span>rem</span> <span>#0b0c0f</span></span>
          <span>img</span>
            <span><span>transform</span><span>:</span> <span><span>scale</span><span>(</span><span>1.1</span><span>)</span></span></span>
        <span>.features</span>
          <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
          <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
          <span>.feature</span>
            <span><span>text-align</span><span>:</span> center</span>
            <span>h2</span>
              <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br><span>70</span><br><span>71</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>padding-bottom: 0.4rem</code> adds a padding of <code>0.4rem</code> to the bottom of each of the dropdown items.</li>
<li><code>border-top: 0.0625rem solid $borderColor</code> adds a border to the top of the <code>h4</code> tag, i.e., the By Topics text with a thickness of <code>0.0625rem</code>, a style of <code>solid</code>, and a color of <code>$borderColor</code> which was defined in the <code>palette.styl</code> file.</li>
<li><code>cursor: text</code> sets the cursor when pointing over the <code>h4</code> tag, i.e., the By Topics text to be the text cursor which indicates the text can be selected and is typically in the shape of an I-beam.</li>
<li><code>margin: 0.45rem 0.375rem 0</code> adds a margin of <code>0.45rem</code> to the top, <code>0.375rem</code> to the left and right, and <code>0</code> to the bottom of the <code>h4</code> tag, i.e., the By Topics text.</li>
</ul>
<p>If you have questions about the CSS discussed above, then check out these resources:</p>
<ul>
<li><span><a href="https://www.w3schools.com/css/default.asp" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" target="_blank" rel="noopener noreferrer">cursor<i>Content not supported</i></a></span></li>
</ul>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be installing and beginning the process of configuring the <a href="https://vuepress-plugin-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-blog<i>Content not supported</i></a>.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 15 - Blog Plugin</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-15/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-15/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 15 - Blog Plugin</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to install and configure the blog plugin for your VuePress site, then check out VuePress Tutorial 15 - Blog Plugin! 🍌🐒</description>
      <pubDate>Wed, 21 Sep 2022 12:26:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-15-blog-plugin"> VuePress Tutorial 15 - Blog Plugin</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>It's now time to install and begin the process of configuring <a href="https://vuepress-plugin-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-blog<i>Content not supported</i></a>. We're going to start by describing the main features provided by the plugin. Then we'll go over the installation and usage. After going over the installation and usage, we'll describe the concepts and implementation of <span>document classification</span>, <span>permalinks</span>, and <span>directory classification</span>.</p>
<p>If you're interested you can check out the blog plugin code <a href="https://github.com/vuepress/vuepress-plugin-blog" target="_blank" rel="noopener noreferrer">here<i>Content not supported</i></a>. You can also check out the <a href="https://vuepress-theme-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/theme-blog<i>Content not supported</i></a> if you're interested in learning more about it. We won't be discussing the blog theme in detail since we're using the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-15</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-15" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="features"> Features</h2>
<p>The blog plugin provides the following main features:</p>
<ul>
<li><span><a href="https://vuepress-plugin-blog.billyyyyy3320.com/guide/getting-started.html#document-classifier" target="_blank" rel="noopener noreferrer">Classification<i>Content not supported</i></a></span> which means you can quickly classify posts by using their characteristics.</li>
<li><span><a href="https://vuepress-plugin-blog.billyyyyy3320.com/guide/getting-started.html#pagination" target="_blank" rel="noopener noreferrer">Pagination<i>Content not supported</i></a></span> which allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.</li>
<li><span><a href="https://vuepress-plugin-blog.billyyyyy3320.com/client-api/" target="_blank" rel="noopener noreferrer">Client API<i>Content not supported</i></a></span> which allows you to access global variables that contain data about pagination, frontmatter, and the various services the plugin provides.</li>
</ul>
<p>We'll be discussing <span>pagination</span> and the <span>Client API</span> in more detail in future tutorials.</p>
<h2 id="installation"> Installation</h2>
<p>We're now ready to discuss the installation of the plugin.</p>
<h3 id="using-the-tutorials-repo"> Using the Tutorials Repo</h3>
<p>If you're following along with the tutorials, then when you switch to the <code>tutorial-15</code> branch you can run the following command to install the package instead of running the installation command:</p>
<code-group>
<code-block title="yarn">
<div><pre><code><span>yarn</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> <span>install</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>This will ensure you have the same version used in the blog since the command uses the version specified in the <code>yarn.lock</code> file during the installation.</p>
<h3 id="using-the-installation-command"> Using the Installation Command</h3>
<p>To install the blog plugin in your own project you can run the following command:</p>
<code-group>
<code-block title="yarn">
<div><pre><code><span>yarn</span> <span>add</span> -D @vuepress/plugin-blog
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> <span>install</span> -D @vuepress/plugin-blog
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div><p>Installing the Same Blog Plugin Version</p>
<p>If you want to ensure you're installing the same version being used in the tutorials and blog, then run <code>yarn upgrade @vuepress/plugin-blog@1.9.4</code>.</p>
</div>
<h3 id="updated-package-json-file"> Updated package.json File</h3>
<p>After installing the plugin, the <code>package.json</code> file should look something like this:</p>
<code-group>
<code-block title="package.json">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br></div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"code-monkeys-blog-tutorials"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.0.0"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>{</span>
    <span>"type"</span><span>:</span> <span>"git"</span><span>,</span>
    <span>"url"</span><span>:</span> <span>"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git"</span>
  <span>}</span><span>,</span>
  <span>"author"</span><span>:</span> <span>{</span>
    <span>"name"</span><span>:</span> <span>"J the Code Monkey"</span><span>,</span>
    <span>"email"</span><span>:</span> <span>"support@codemonkeys.tech"</span><span>,</span>
    <span>"url"</span><span>:</span> <span>"https://www.codemonkeys.tech/"</span>
  <span>}</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"GPL-3.0-or-later"</span><span>,</span>
  <span>"scripts"</span><span>:</span> <span>{</span>
    <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
    <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span><span>,</span>
    <span>"svgo"</span><span>:</span> <span>"vuepress svgo docs"</span>
  <span>}</span><span>,</span>
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"@goy/vuepress-plugin-svg-icons"</span><span>:</span> <span>"^4.2.3"</span><span>,</span>
    <span>"@vuepress/plugin-blog"</span><span>:</span> <span>"^1.9.4"</span><span>,</span>
    <span>"vuepress"</span><span>:</span> <span>"1.8.2"</span>
  <span>}</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br></div></div></code-block>
</code-group>
<h3 id="automatically-installed-plugins"> Automatically Installed Plugins</h3>
<p>When installing the blog plugin you may have noticed the following plugins also get installed:</p>
<ul>
<li><span><a href="https://vssue.js.org/guide/vuepress.html#vuepress-plugin" target="_blank" rel="noopener noreferrer">@vssue/vuepress-plugin-vssue<i>Content not supported</i></a></span></li>
<li><span><a href="https://github.com/lorisleiva/vuepress-plugin-disqus" target="_blank" rel="noopener noreferrer">vuepress-plugin-disqus<i>Content not supported</i></a></span></li>
<li><span><a href="https://github.com/webmasterish/vuepress-plugin-feed" target="_blank" rel="noopener noreferrer">vuepress-plugin-feed<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress-plugin-mailchimp.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-mailchimp<i>Content not supported</i></a></span></li>
<li><span><a href="https://github.com/ekoeryanto/vuepress-plugin-sitemap" target="_blank" rel="noopener noreferrer">vuepress-plugin-sitemap<i>Content not supported</i></a></span></li>
</ul>
<p>These plugins provide features that are common to blogs, so they're included in the installation of the blog plugin. Including these plugins in the installation of the blog plugin saves you the time of searching for plugins that provide these common features as well as from having to separately install each plugin.</p>
<p>The plugins will only be used though if you enable them in the <code>config.js</code> file.</p>
<p>They can also be installed as standalone plugins, so you don't need to use the blog plugin to use them for your site.</p>
<p>We'll be discussing these plugins in more detail in future tutorials.</p>
<h2 id="usage"> Usage</h2>
<p>To use the blog plugin we need to add the following to the <code>config.js</code> file which should now look something like this:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span><span>'@goy/svg-icons'</span><span>,</span> <span>'@vuepress/blog'</span><span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br></div></div></code-block>
</code-group>
<h2 id="document-classification"> Document Classification</h2>
<p>The blog plugin provides a <span>document classifier</span> which is a set of functions that handles the classifications of pages with the same characteristics.</p>
<p>These characteristics for pages in a blog may consist of:</p>
<ul>
<li>Pages in the same directory, e.g., a <code>_posts</code> directory.</li>
<li>Pages containing the same frontmatter key, e.g., <code>tag: js</code> which signifies those pages contain content related to <code>js</code>, i.e., <code>JavaScript</code>.</li>
</ul>
<p>Another common requirement is the ability to group all pages as well as pages with specific tags for <span>pagination</span>.</p>
<p>Before discussing directory classification, we're going to first define what a <span>permalink</span> is as well as discuss how they're built and configured. This will give us a better understanding of how the blog plugin uses <span>permalinks</span> to build customizable links for blog posts which is preferable to using the default way of creating links.</p>
<h2 id="permalinks"> Permalinks</h2>
<p>A <span>permalink</span> is a URL that is intended to remain unchanged for a long time. This leads to links that are less susceptible to <a href="https://en.wikipedia.org/wiki/Link_rot" target="_blank" rel="noopener noreferrer">link rot<i>Content not supported</i></a> which is when a link ceases to point to its originally targeted web page due to the page being relocated to a new address or becoming permanently unavailable.</p>
<p><a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress v1<i>Content not supported</i></a> provided support for creating customizable links by introducing the ability to build <span>permalinks</span>.</p>
<h3 id="template-variables"> Template Variables</h3>
<p>We're able to build <span>permalinks</span> by using the following template variables:</p>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>:year</td>
<td>Published year of post (4-digit)</td>
</tr>
<tr>
<td>:month</td>
<td>Published month of post (2-digit)</td>
</tr>
<tr>
<td>:i_month</td>
<td>Published month of post (without leading zeros)</td>
</tr>
<tr>
<td>:day</td>
<td>Published day of post (2-digit)</td>
</tr>
<tr>
<td>:i_day</td>
<td>Published day of post (without leading zeros)</td>
</tr>
<tr>
<td>:slug</td>
<td>Slugified file path (without extension)</td>
</tr>
<tr>
<td>:regular</td>
<td>Permalink generated by VuePress by default.</td>
</tr>
</tbody>
</table>
<h3 id="default-configuration"> Default Configuration</h3>
<p>The default configuration for <span>permalinks</span> is <code>/:regular</code>.</p>
<p>The <code>:regular</code> template variable will first check if the Markdown files in the documents directory which in our case is the <code>docs</code> directory are index files, i.e., <code>README.md</code> or <code>index.md</code>.</p>
<ul>
<li>If they're index files, they get converted to URLs without extensions that are based on the file hierarchy.</li>
<li>If they're not index files, they get converted to URLs with <code>html</code> extensions that are based on the file hierarchy.</li>
</ul>
<p>Let's look at some examples to make this clearer where the file paths are relative to the documents directory which again in our case is the <code>docs</code> directory:</p>
<table>
<thead>
<tr>
<th style="text-align:center">Relative Path</th>
<th style="text-align:center">Page Routing</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><code>/README.md</code></td>
<td style="text-align:center"><code>/</code></td>
</tr>
<tr>
<td style="text-align:center"><code>/foo/README.md</code></td>
<td style="text-align:center"><code>/foo/</code></td>
</tr>
<tr>
<td style="text-align:center"><code>/foo.md</code></td>
<td style="text-align:center"><code>/foo.html</code></td>
</tr>
<tr>
<td style="text-align:center"><code>/foo/bar.md</code></td>
<td style="text-align:center"><code>/foo/bar.html</code></td>
</tr>
</tbody>
</table>
<div><p>Using Vue Files</p>
<p>Files with a <code>vue</code> extension follow the same conventions described for Markdown files above, e.g., <code>/README.vue</code> gets converted to <code>/</code>.</p>
</div>
<p>You can take a look at <a href="https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/shared-utils/src/fileToPath.ts" target="_blank" rel="noopener noreferrer">fileToPath.ts<i>Content not supported</i></a> to see the code that handles converting files to paths.</p>
<h3 id="global-configuration"> Global Configuration</h3>
<p>To globally change the default configuration for <span>permalinks</span> for your site you can add the <code>permalink</code> property to the <code>config.js</code> file.</p>
<p>We can build a <span>permalink</span> to use in the <code>config.js</code> file by using the template variables.</p>
<p>For example we can use the template variables to build the following <span>permalink</span>: <code>/:year/:month/:day/:slug</code>.</p>
<p>We can then set this as the value for the <code>permalink</code> property in the <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  permalink<span>:</span> <span>'/:year/:month/:day/:slug'</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<div><p>Using the Default Configuration</p>
<p>We'll be leaving the <code>permalink</code> property with the default value of <code>/:regular</code>, and we'll use the configuration provided by the blog plugin to customize the <span>permalinks</span> for each blog post.</p>
</div>
<h3 id="local-configuration"> Local Configuration</h3>
<p>It's also possible to set a <span>permalink</span> locally for a single page which overrides any globally set configuration.</p>
<p>This is done be setting the <code>permalink</code> property in the frontmatter of the Markdown file:</p>
<code-group>
<code-block title="Local Permalink">
<div><div><br><br><div>&nbsp;</div><br><br></div><pre><code><span><span>---</span>
<span><span>title</span><span>:</span> Local Permalink
<span>permalink</span><span>:</span> /using<span>-</span>a<span>-</span>local<span>-</span>permalink</span>
<span>---</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>This will set the <code>permalink</code> property to be <code>/using-a-local-permalink</code> instead of following the global configuration.</p>
<p>Now that we have an understanding of <span>document classification</span> and <span>permalinks</span>, let's move onto the <span>directory classifier</span> which handles classifying pages placed in the same directory.</p>
<h2 id="directory-classification"> Directory Classification</h2>
<p>First we need to create a directory that will contain all of the pages we want to classify. To do this we'll create a <code>_posts</code> directory inside of the <code>docs</code> directory. The <code>docs</code> directory for your site should now look something like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   ├── <code>_posts</code>
│   ├── <code>icons</code>
│   └── README.md</p>
</code></pre><p>Next, we'll create the following example pages in the <code>_posts</code> directory:</p>
<ul>
<li><code>2020-07-03-example-page-1.md</code></li>
<li><code>2021-11-16-example-page-2.md</code></li>
<li><code>2022-05-08-example-page-3.md</code></li>
</ul>
<p>The <code>_posts</code> directory for your site should now look like this:</p>
<pre><code><p>.
├── <code>_posts</code>
│   ├── 2020-07-03-example-page-1.md
│   ├── 2021-11-16-example-page-2.md
│   └── 2022-05-08-example-page-3.md</p>
</code></pre><p>By default <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> will create the following page URLs since it uses the <code>/:regular</code> template variable described above when building the links:</p>
<ul>
<li><code>/_posts/2020-07-03-example-page-1.html</code></li>
<li><code>/_posts/2021-11-16-example-page-2.html</code></li>
<li><code>/_posts/2022-05-08-example-page-3.html</code></li>
</ul>
<p>You should now be able to navigate to these pages in the browser:</p>
<ul>
<li><span><a href="http://localhost:8080/_posts/2020-07-03-example-page-1.html" target="_blank" rel="noopener noreferrer">http://localhost:8080/_posts/2020-07-03-example-page-1.html<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/_posts/2021-11-16-example-page-2.html" target="_blank" rel="noopener noreferrer">http://localhost:8080/_posts/2021-11-16-example-page-2.html<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/_posts/2022-05-08-example-page-3.html" target="_blank" rel="noopener noreferrer">http://localhost:8080/_posts/2022-05-08-example-page-3.html<i>Content not supported</i></a></span></li>
</ul>
<p>The default behavior is fine for creating the main pages on the site, but having the ability to build customizable links for blog posts is preferable.</p>
<p>After using the configuration provided by the blog plugin to build customized <span>permalinks</span>, the page URLs will look like this:</p>
<ul>
<li><code>/2020/07/03/example-page-1/</code></li>
<li><code>/2021/11/16/example-page-2/</code></li>
<li><code>/2022/05/08/example-page-3/</code></li>
</ul>
<p>To build these customizable links we're going to start setting up the <span>directory classifier</span> configuration in the <code>config.js</code> file.</p>
<h3 id="directories"> directories</h3>
<p>First, we'll add the <code>directories</code> property which is used to create the <span>directory classifier</span>.</p>
<p>The expected type is a <code>DirectoryClassifier[]</code>, and the default value is <code>[]</code>.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span><span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br></div></div></code-block>
</code-group>
<h3 id="id"> id</h3>
<p>Next, we'll add the <code>id</code> property which sets a unique id for the current classifier. We'll use a value of <code>posts</code>.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>undefined</code>.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br></div></div></code-block>
</code-group>
<h3 id="dirname"> dirname</h3>
<p>Now, we'll add the <code>dirname</code> property which is used to identify the directory we want to classify. This is the <code>_posts</code> directory we created earlier.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>undefined</code>.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br></div></div></code-block>
</code-group>
<p>After setting the <code>dirname</code> property, the page URLs get set to the customized <span>permalinks</span> mentioned above:</p>
<ul>
<li><span><a href="http://localhost:8080/2020/07/03/example-page-1/" target="_blank" rel="noopener noreferrer">http://localhost:8080/2020/07/03/example-page-1/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/2021/11/16/example-page-2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/2021/11/16/example-page-2/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/2022/05/08/example-page-3/" target="_blank" rel="noopener noreferrer">http://localhost:8080/2022/05/08/example-page-3/<i>Content not supported</i></a></span></li>
</ul>
<p>The customized <span>permalinks</span> are actually built using properties we haven't discussed yet. The blog plugin sets default values that don't need to be explicitly set in the <code>config.js</code> file. We'll be discussing these other properties and their default values below.</p>
<p>The previously provided links still work because they get converted to the customized <span>permalinks</span> when navigating to those pages.</p>
<div><p>Unknown Custom Element</p>
<p>When navigating to the links if you inspect the browser then go to the <code>Console</code>, you'll see the following error: <code>Unknown custom element: &lt;Post&gt;</code>.</p>
</div>
<p>This error is occurring because the plugin is looking for a <code>Post</code> layout component in the <code>layouts</code> directory which we haven't created yet.</p>
<p>Before creating a <code>Post</code> layout component to fix this error, we're going to first add the <code>path</code> property.</p>
<h3 id="path"> path</h3>
<p>The <code>path</code> property specifies the entry page, also known as the list page for the current classifier. This page will be used to display your posts as a paginated list.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>/${id}/</code> where <code>${id}</code> is the value of the <code>id</code> property we previously set.</p>
<p>This means you don't need to explicitly set the <code>path</code> property if you're going to be using the same value as the <code>id</code> property. We'll be using a value of <code>/posts/</code> for the <code>path</code> property, so we don't need to explicitly set the property. However, we're going to explicitly set the property because it allows us to have a quick reference to the property and its value.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br></div></div></code-block>
</code-group>
<p>You can navigate to the entry page by using the following link:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a></span></li>
</ul>
<p>Notice this link has the value of the <code>path</code> property in it, i.e., <code>/posts/</code>. This is the same link we set in the navbar dropdown menu for All Posts, so you can click on that link to navigate to the entry page which will eventually be a paginated list of all of the posts.</p>
<p>Currently, when navigating to that link the <code>Layout</code> component provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> is displayed. The blog plugin will fallback to using the <code>Layout</code> component if it's unable to find an <code>IndexPost</code> layout component in the <code>layouts</code> directory.</p>
<p>This means we can create an <code>IndexPost</code> layout component that specifically handles the layout of the paginated list of all of the posts instead of using the <code>Layout</code> component.</p>
<h3 id="creating-the-indexpost-layout"> Creating the IndexPost Layout</h3>
<p>To create the <code>IndexPost</code> layout component we're going to add an <code>IndexPost.vue</code> file inside of the <code>layouts</code> directory. The <code>layouts</code> directory for your site should now look something like this:</p>
<pre><code><p>.
├── <code>layouts</code>
│   ├── GlobalLayout.vue
│   └── IndexPost.vue</p>
</code></pre><p>We're going to begin the development of the <code>IndexPost</code> layout component by adding <code>template</code>, <code>script</code>, and <code>style</code> tags:</p>
<code-group>
<code-block title="IndexPost.vue">
<div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>We'll continue developing the <code>IndexPost</code> layout component in a future tutorial.</p>
<h3 id="layout"> layout</h3>
<p>We're now ready to add the <code>layout</code> property which is used to specify which layout to use for the entry page.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>'IndexPost' || 'Layout'</code>.</p>
<p>From the default value we can see why the entry page originally defaulted to using the <code>Layout</code> component before we created the <code>IndexPost</code> layout component. Since the blog plugin looks for the <code>IndexPost</code> layout component by default, we don't need to explicitly set the property. However, we're going to explicitly set it because this gives us a quick reference to the property and its value.</p>
<p>It's also possible to use a custom value for the <code>layout</code> property, e.g., you could use a value of <code>MyIndexPost</code> which you would have to explicitly set in the <code>config.js</code> file. Then you would have to create a <code>MyIndexPost.vue</code> file inside of the <code>layouts</code> directory.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br></div></div></code-block>
</code-group>
<p>We're now going to fix the <code>Unknown Custom Element</code> error we got after adding the <code>dirname</code> property. To fix this error we need to create the previously mentioned <code>Post</code> layout component.</p>
<h3 id="creating-the-post-layout"> Creating the Post Layout</h3>
<p>The <code>Post</code> layout component is used to handle the layout for individual post pages.</p>
<p>To create the <code>Post</code> layout component we're going to add a <code>Post.vue</code> file inside of the <code>layouts</code> directory. The <code>layouts</code> directory for your site should now look something like this:</p>
<pre><code><p>.
├── <code>layouts</code>
│   ├── GlobalLayout.vue
│   ├── IndexPost.vue
│   └── Post.vue</p>
</code></pre><p>We're going to begin the development of the <code>Post</code> layout component by adding <code>template</code>, <code>script</code>, and <code>style</code> tags:</p>
<code-group>
<code-block title="Post.vue">
<div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>We'll continue developing the <code>Post</code> layout component in a future tutorial.</p>
<h3 id="itemlayout"> itemLayout</h3>
<p>We're now ready to add the <code>itemLayout</code> property which is used to specify which layout to use for individual post pages.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>'Post'</code>.</p>
<p>From the default value we can see why the blog plugin looks for a <code>Post</code> layout component. Since the blog plugin looks for the <code>Post</code> layout component by default, we don't need to explicitly set the property. However, we're going to explicitly set it because this once again gives us a quick reference to the property and its value.</p>
<p>It's also possible to use a custom value for the <code>itemLayout</code> property, e.g., you could use a value of <code>MyPost</code> which you would have to explicitly set in the <code>config.js</code> file. Then you would have to create a <code>MyPost.vue</code> file inside of the <code>layouts</code> directory.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br></div></div></code-block>
</code-group>
<h3 id="itempermalink"> itemPermalink</h3>
<p>We're now ready to add the <code>itemPermalink</code> property which is used to build customized <span>permalinks</span> for each blog post.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>'/:year/:month/:day/:slug'</code>.</p>
<p>From the default value we can see how the blog plugin built the customized <span>permalinks</span> after only setting the <code>dirname</code> property. Since the blog plugin uses the value we currently want, we don't need to explicitly set the property. However, just like the other properties we're going to explicitly set it because this gives us a quick reference to the property and its value.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
            itemPermalink<span>:</span> <span>'/:year/:month/:day/:slug'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br></div></div></code-block>
</code-group>
<h3 id="summary-of-urls-and-layouts"> Summary of URLs and Layouts</h3>
<p>Here's a table that summarizes the relationship between the page URLs the blog plugin builds using customized <span>permalinks</span> and the layout components.</p>
<table>
<thead>
<tr>
<th>URLs</th>
<th>Layouts</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>/posts/</code></td>
<td><code>IndexPost</code> (falls back to <code>Layout</code>)</td>
</tr>
<tr>
<td><code>/2020/07/03/example-page-1/</code></td>
<td><code>Post</code></td>
</tr>
<tr>
<td><code>/2021/11/16/example-page-2/</code></td>
<td><code>Post</code></td>
</tr>
<tr>
<td><code>/2022/05/08/example-page-3/</code></td>
<td><code>Post</code></td>
</tr>
</tbody>
</table>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be discussing the configuration for the <code>pagination</code> property as well as how to access the <span>pagination</span> data in the layout components by using the <span>Client API</span>.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 17 - IndexPost Layout</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-17/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-17/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 17 - IndexPost Layout</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to start developing the IndexPost layout component, then check out VuePress Tutorial 17 - IndexPost Layout! 🍌🐒</description>
      <pubDate>Mon, 17 Oct 2022 14:12:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-17-indexpost-layout"> VuePress Tutorial 17 - IndexPost Layout</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>We're now ready to begin the development of the <code>IndexPost</code> layout component. We'll be using the globally scoped <code>$pagination</code> variable provided by the blog plugin <a href="https://vuepress-plugin-blog.billyyyyy3320.com/client-api/" target="_blank" rel="noopener noreferrer">Client API<i>Content not supported</i></a> to access the <span>pagination</span> data. In this tutorial we'll be focusing on the post title and preview <span>pagination</span> data. To display the data on the <span>pagination</span> pages we'll be updating the <code>IndexPost</code> layout component's <code>template</code> tag.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>Be sure to add each block of code below one at a time to your project, then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-17</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-17" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="naming-the-component"> Naming the Component</h2>
<p>Before accessing and displaying the <span>pagination</span> data, we're going to first give the component a name and remove the <code>created</code> lifecycle hook which we were using in the previous tutorial to log the <span>pagination</span> data to the console.</p>
<p>Here's the updated <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Naming the Component">
<div><div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br></div></div></code-block>
</code-group>
<h2 id="looping-over-pagination-pages"> Looping Over Pagination Pages</h2>
<p>To display the <span>pagination</span> data we're going to loop over the <code>$pagination.pages</code> property which if you remember from the previous tutorial <a href="/vuepress-tutorial-16">VuePress Tutorial 16 - Pagination</a> is an array of objects where each object contains data related to post pages that are accessible on the current <span>pagination</span> page.</p>
<h3 id="using-the-v-for-directive"> Using the v-for Directive</h3>
<p>Since <code>$pagination.pages</code> is an array that we want to loop over, we're going to use the <code>v-for</code> directive to render a list of post pages based on the data within the array. The <code>v-for</code> directive uses the following syntax <code>v-for=&quot;item in items&quot;</code> where <code>items</code> is the array you want to loop over, and <code>item</code> is an alias for the array element being iterated on. Here, <code>items</code> corresponds to <code>$pagination.pages</code>, and we'll use <code>post</code> as the alias for the array element being iterated on. This means our <code>v-for</code> directive will be <code>v-for=&quot;post in $pagination.pages&quot;</code>.</p>
<h3 id="using-the-key-attribute"> Using the key Attribute</h3>
<p>When using the <code>v-for</code> directive the common best practice is to bind a <code>key</code> attribute where each value given to the <code>key</code> attribute should be unique. The <code>key</code> attribute uses the following syntax <code>:key=&quot;item.id&quot;</code> where <code>id</code> is a property with a unique value for every <code>item</code> in the <code>items</code> array.</p>
<p>You really only need to use the <code>key</code> attribute when the rendered list relies on child component state or temporary <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="noopener noreferrer">Document Object Model (DOM)<i>Content not supported</i></a> state, e.g., form input values . This means we don't actually need to include the <code>key</code> attribute since we're currently just rendering a static list.</p>
<p>However, we're going to bind the <code>key</code> attribute in case we ever need to use it in the future. To ensure the <code>key</code> attribute has a unique value for each item in the list, we're going to use the <code>key</code> property which is a unique value generated for each page object within the <code>$pagination.pages</code> array. Here's what the <code>key</code> attribute will look like in our case <code>:key=&quot;post.key&quot;</code>.</p>
<h3 id="determining-a-tag"> Determining a Tag</h3>
<p>Now we need to determine what tag we want to add our <code>v-for</code> directive and <code>key</code> attribute to. We're going to add them to a <code>div</code> tag which will allow us to wrap the <span>pagination</span> data for each post in the list of post pages. Here's what the <code>div</code> tag is going to look like after adding the <code>v-for</code> directive and <code>key</code> attribute <code>&lt;div v-for=&quot;post in $pagination.pages&quot; :key=&quot;post.key&quot;&gt;&lt;/div&gt;</code>.</p>
<h3 id="using-a-root-element"> Using a Root Element</h3>
<p>Since the <code>div</code> tag uses the <code>v-for</code> directive, it's going to render multiple elements. This means we cannot use it as the root element, i.e., the first element in the <code>template</code> tag because the <code>template</code> tag can only have one root element. To resolve this issue we're going to wrap the <code>div</code> tag that's using the <code>v-for</code> directive within another <code>div</code> tag which will serve as the root element.</p>
<h3 id="adding-the-loop"> Adding the Loop</h3>
<p>Here's what the <code>IndexPost.vue</code> file should now look like:</p>
<code-group>
<code-block title="Adding the Loop">
<div><div><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br></div></div></code-block>
</code-group>
<p>If you any questions or want to learn more about the <code>v-for</code> directive and the <code>key</code> attribute then check out these resources:</p>
<ul>
<li><span><a href="https://v2.vuejs.org/v2/guide/list.html" target="_blank" rel="noopener noreferrer">List Rendering<i>Content not supported</i></a></span></li>
<li><span><a href="https://v2.vuejs.org/v2/guide/list.html#Maintaining-State" target="_blank" rel="noopener noreferrer">Maintaining State<i>Content not supported</i></a></span></li>
<li><span><a href="https://v2.vuejs.org/v2/api/#key" target="_blank" rel="noopener noreferrer">key<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.youtube.com/watch?v=yg0n19SdKzs" target="_blank" rel="noopener noreferrer">Does Vue v-for really need a key?<i>Content not supported</i></a></span></li>
<li><span><a href="https://michaelnthiessen.com/understanding-the-key-attribute" target="_blank" rel="noopener noreferrer">Understanding the :key Attribute in Vue<i>Content not supported</i></a></span></li>
</ul>
<h3 id="entry-page-html"> Entry Page HTML</h3>
<p>After updating the <code>IndexPost.vue</code> file with the code above, if you navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> you won't notice any changes on the page. This is because we've rendered <code>div</code> tags without any of the <span>pagination</span> data inside of them.</p>
<p>If you navigate to the entry page, inspect the browser, and go to the <code>Elements</code> tab, the HTML for the <code>body</code> tag should now look something like this:</p>
<code-group>
<code-block title="Entry Page HTML">
<div><div><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br></div></div></code-block>
</code-group>
<p>Notice how the entry page consists of two <code>div</code> tags wrapped inside of the <code>div</code> tag that's being used as the root element of the <code>template</code> tag. Each of those <code>div</code> tags inside of the parent <code>div</code> tag corresponds to a post page that is accessible on the entry page.</p>
<h3 id="page-2-html"> Page 2 HTML</h3>
<p>If you navigate to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a> you also won't notice any changes on the page. This is because we've rendered a <code>div</code> tag without any of the <span>pagination</span> data inside of it.</p>
<p>The HTML for the <code>body</code> tag for the second page should now look something like this:</p>
<code-group>
<code-block title="Page 2 HTML">
<div><div><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br></div></div></code-block>
</code-group>
<p>Notice how the second page consists of one <code>div</code> tag wrapped inside of the <code>div</code> tag that's being used as the root element of the <code>template</code> tag. There is only one <code>div</code> tag since we have one post page accessible on the second page.</p>
<h2 id="post-titles"> Post Titles</h2>
<p>Before we can access the post title data using the <code>$pagination.pages</code> property, we need to first add titles to the post files we created in the <code>_posts</code> directory:</p>
<ul>
<li><code>2020-07-03-example-page-1.md</code></li>
<li><code>2021-11-16-example-page-2.md</code></li>
<li><code>2022-05-08-example-page-3.md</code></li>
</ul>
<h3 id="adding-titles-to-post-files"> Adding Titles to Post Files</h3>
<p>Since the post files are Markdown files, we can add titles to the files by adding a heading level one, e.g., <code># Heading Level 1</code> to each file which gets converted to the following HTML <code>&lt;h1&gt;Heading Level 1&lt;/h1&gt;</code>.</p>
<p>Here's what the post files look like after adding the titles:</p>
<code-group>
<code-block title="Example Page 1">
<div><pre><code><span><span>#</span> Example Post 1</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 2">
<div><pre><code><span><span>#</span> Example Post 2</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 3">
<div><pre><code><span><span>#</span> Example Post 3</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you have any questions or want to learn more about Markdown headings, then check out the <a href="https://www.markdownguide.org/basic-syntax" target="_blank" rel="noopener noreferrer">Basic Syntax<i>Content not supported</i></a> guide.</p>
<h3 id="adding-titles-to-page-variables"> Adding Titles to $page Variables</h3>
<p>When <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> encounters a heading level one in a Markdown file it automatically adds a <code>title</code> property to the globally scoped <code>$page</code> variable.</p>
<p>The page objects in the <code>$pagination.pages</code> property are the same as the <code>$page</code> variables used by the post pages which means each page object will now have a <code>title</code> property that we can access in the <code>IndexPost</code> layout component.</p>
<p>You can take a look at the <a href="https://v1.vuepress.vuejs.org/guide/global-computed.html" target="_blank" rel="noopener noreferrer">Global Computed<i>Content not supported</i></a> documentation to learn more about the <code>$page</code> variable and other globally scoped variables.</p>
<h3 id="displaying-post-titles"> Displaying Post Titles</h3>
<p>Now that we can access the post titles in the <code>$pagination.pages</code> property, we're ready to render the post titles on the <span>pagination</span> pages.</p>
<p>We're going to display the post titles as <code>h2</code> tags which we'll be wrapping inside of two <code>div</code> tags. We'll be using the <code>div</code> tags to add styling to the list of post pages in a future tutorial.</p>
<p>To display the post titles we'll be using <a href="https://v2.vuejs.org/v2/guide/syntax.html#Text" target="_blank" rel="noopener noreferrer">Text Interpolation<i>Content not supported</i></a> which allows us to use variables inside of HTML tags by using the &quot;Mustache&quot; syntax. The &quot;Mustache&quot; syntax consists of wrapping a variable inside of double curly braces.</p>
<p>We can access the <code>title</code> property on each page object in our loop by using <code>post.title</code>. We can then display this by using the text interpolation described above.</p>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Displaying Post Titles">
<div><div><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br></div></div></code-block>
</code-group>
<h3 id="entry-page-html-2"> Entry Page HTML</h3>
<p>After updating the <code>IndexPost.vue</code> file with the code above, if you navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> you should now see the post titles being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the entry page should now look something like this:</p>
<code-group>
<code-block title="Entry Page HTML">
<div><div><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 1 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 2 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br></div></div></code-block>
</code-group>
<h3 id="page-2-html-2"> Page 2 HTML</h3>
<p>If you navigate to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a> you should now see one post title being displayed with some styling which again is being provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the second page should now look something like this:</p>
<code-group>
<code-block title="Page 2 HTML">
<div><div><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 3 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br></div></div></code-block>
</code-group>
<h2 id="post-previews"> Post Previews</h2>
<p>The post preview data is a snippet of text taken from the beginning of a post which is used as an introduction to the post in the list of post pages. Before we can access the post preview data using the <code>$pagination.pages</code> property, we need to first add previews to the post files we created in the <code>_posts</code> directory:</p>
<ul>
<li><code>2020-07-03-example-page-1.md</code></li>
<li><code>2021-11-16-example-page-2.md</code></li>
<li><code>2022-05-08-example-page-3.md</code></li>
</ul>
<h3 id="adding-previews-to-post-files"> Adding Previews to Post Files</h3>
<p>Since the post files are Markdown files, we can use <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks in the files and define a custom variable <code>preview</code>.</p>
<p>Here's what the post files look like after adding the <code>preview</code> variables:</p>
<code-group>
<code-block title="Example Page 1">
<div><div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br></div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 1 preview</span>
<span>---</span></span>

<span><span>#</span> Example Post 1</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 2">
<div><div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br></div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 2 preview</span>
<span>---</span></span>

<span><span>#</span> Example Post 2</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 3">
<div><div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br></div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 3 preview</span>
<span>---</span></span>

<span><span>#</span> Example Post 3</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>If you have any questions or want to learn more about <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks in <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> then check these resources:</p>
<ul>
<li><a href="/vuepress-tutorial-6/#yaml-frontmatter-blocks">YAML Frontmatter Blocks</a></li>
<li><span><a href="https://vuepress.vuejs.org/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">Frontmatter<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress.vuejs.org/miscellaneous/glossary.html#frontmatter" target="_blank" rel="noopener noreferrer">Glossary - frontmatter<i>Content not supported</i></a></span></li>
</ul>
<div><p>Number of Characters Used in Preview</p>
<p>The value for each post <code>preview</code> variable should be within a preferred minimum and maximum number of characters. This will ensure the post previews in the list of post pages looks consistent.</p>
</div>
<h3 id="adding-previews-to-page-variables"> Adding Previews to $page Variables</h3>
<p>When <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> encounters a <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped <code>$page.frontmatter</code> variable.</p>
<p>The page objects in the <code>$pagination.pages</code> property are the same as the <code>$page</code> variables used by the post pages which means each page object will now have a <code>frontmatter.preview</code> property that we can access in the <code>IndexPost</code> layout component.</p>
<p>You can take a look at the <a href="https://v1.vuepress.vuejs.org/guide/global-computed.html" target="_blank" rel="noopener noreferrer">Global Computed<i>Content not supported</i></a> documentation to learn more about the <code>$page</code> variable and other globally scoped variables.</p>
<div><p>Content Excerpt</p>
<p>Instead of defining the custom variable <code>preview</code> in the <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks of Markdown files, <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> provides the ability to use a <a href="https://vuepress.vuejs.org/theme/writing-a-theme.html#content-excerpt" target="_blank" rel="noopener noreferrer">Content Excerpt<i>Content not supported</i></a> by adding a <code>&lt;!-- more --&gt;</code> comment to a Markdown file. Any content above the comment gets extracted and exposed as a globally scoped <code>$page.excerpt</code> variable. This variable can then be used to render the list of post pages with excerpts for each post just like our custom variable <code>preview</code>. I prefer to use the custom variable <code>preview</code> because the <code>&lt;!-- more --&gt;</code> comment takes all of the content above it which includes any HTML as opposed to using just the text of a post.</p>
</div>
<h3 id="displaying-post-previews"> Displaying Post Previews</h3>
<p>Now that we can access the post previews in the <code>$pagination.pages</code> property, we're ready to render the post previews on the <span>pagination</span> pages.</p>
<p>We're going to display the post previews as <code>p</code> tags which we'll place underneath the parent <code>div</code> tag of the <code>h2</code> tag.</p>
<p>To display the post previews we'll be using <a href="https://v2.vuejs.org/v2/guide/syntax.html#Text" target="_blank" rel="noopener noreferrer">Text Interpolation<i>Content not supported</i></a> just like we did when displaying the post titles.</p>
<p>We can access the <code>preview</code> property on each page object in our loop by using <code>post.frontmatter.preview</code>.</p>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Displaying Post Previews">
<div><div><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br></div></div></code-block>
</code-group>
<h3 id="entry-page-html-3"> Entry Page HTML</h3>
<p>After updating the <code>IndexPost.vue</code> file with the code above, if you navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> you should now see the post previews being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the entry page should now look something like this:</p>
<code-group>
<code-block title="Entry Page HTML">
<div><div><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 1 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 1 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 2 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 2 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br></div></div></code-block>
</code-group>
<h3 id="page-2-html-3"> Page 2 HTML</h3>
<p>If you navigate to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a> you should now see one post preview being displayed with some styling which again is being provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the second page should now look something like this:</p>
<code-group>
<code-block title="Page 2 HTML">
<div><div><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 3 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 3 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br></div></div></code-block>
</code-group>
<h2 id="indexpost-styling"> IndexPost Styling</h2>
<p>When viewing the <span>pagination</span> pages you probably noticed the list of post pages stretches across the entire width of the page. This styling doesn't look too good, so we're going to update the styling by adding the following class <code>theme-default-content</code> to the outermost <code>div</code> tag.</p>
<h3 id="adding-theme-default-content"> Adding theme-default-content</h3>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Adding theme-default-content">
<div><div><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br></div></div></code-block>
</code-group>
<h3 id="theme-default-content-styles"> theme-default-content Styles</h3>
<p>The <code>theme-default-content</code> class is provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> and provides the following styles:</p>
<code-group>
<code-block title="theme-default-content Styles">
<div><pre><code><span>.theme-default-content:not(.custom)</span> <span>{</span>
  <span>max-width</span><span>:</span> 740px<span>;</span>
  <span>margin</span><span>:</span> 0 auto<span>;</span>
  <span>padding</span><span>:</span> 2rem 2.5rem<span>;</span>
<span>}</span>

<span><span>@media</span> <span>(</span><span>max-width</span><span>:</span> 959px<span>)</span></span> <span>{</span>
  <span>.theme-default-content:not(.custom)</span> <span>{</span>
    <span>padding</span><span>:</span> 2rem<span>;</span>
  <span>}</span>
<span>}</span>

<span><span>@media</span> <span>(</span><span>max-width</span><span>:</span> 419px<span>)</span></span> <span>{</span>
  <span>.theme-default-content:not(.custom)</span> <span>{</span>
    <span>padding</span><span>:</span> 1.5rem<span>;</span>
  <span>}</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>.theme-default-content:not(.custom)</code> is used to select tags that have a class of <code>theme-default-content</code> and that don't have a class of <code>custom</code> by using the <code>:not()</code> pseudo-class. This selector is defined by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> since other pages can use the <code>theme-default-content</code> class along with a class of <code>custom</code> to apply different styles than the ones shown here. The homepage is an example of a page that uses the <code>theme-default-content</code> class along with a class of <code>custom</code> to apply different styles.</li>
<li><code>max-width: 740px;</code> sets the maximum width of the <code>div</code> tag to be <code>740px</code>. If the content is greater than the <code>max-width</code>, then the height of the <code>div</code> tag will automatically be changed. If the content is smaller than the <code>max-width</code>, then the <code>max-width</code> property has no effect.</li>
<li><code>margin: 0 auto;</code> sets the margins for the <code>div</code> tag by setting the top and bottom margins to be <code>0</code> and the left and right margins to a value of <code>auto</code>. The value of <code>auto</code> means the browser will automatically set the left and right margins to horizontally center the <code>div</code> tag.</li>
<li><code>padding: 2rem 2.5rem;</code> sets the padding for the <code>div</code> tag by setting the top and bottom paddings to be <code>2rem</code> and the left and right paddings to be <code>2.5rem</code>.</li>
<li><code>@media (max-width: 959px)</code> will apply the styles within it when the maximum width of the display area, e.g., the browser window is less than or equal to the provided value which in this case is <code>959px</code>.</li>
<li><code>padding: 2rem;</code> sets the padding for all of the sides of the <code>div</code> tag to be <code>2rem</code> when the width of the display area is less than or equal to <code>959px</code>.</li>
<li><code>@media (max-width: 419px)</code> will apply the styles within it when the maximum width of the display area is less than or equal to the provided value which in this case is <code>419px</code>.</li>
<li><code>padding: 1.5rem;</code> sets the padding for all of the sides of the <code>div</code> tag to be <code>1.5rem</code> when the width of the display area is less than or equal to <code>419px</code>.</li>
</ul>
<p>If you have any questions about the CSS discussed above, then check out these resources:</p>
<ul>
<li><span><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank" rel="noopener noreferrer">:not()<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/cssref/pr_dim_max-width.asp" target="_blank" rel="noopener noreferrer">CSS max-width Property<i>Content not supported</i></a></span></li>
<li><span><a href="https://selleo.com/blog/when-does-margin-0-auto-center" target="_blank" rel="noopener noreferrer">When Does margin: 0 auto Center?<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/cssref/css3_pr_mediaquery.asp" target="_blank" rel="noopener noreferrer">CSS @media Rule<i>Content not supported</i></a></span></li>
</ul>
<p>To view these styles in the browser you can navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> or to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a>, inspect the browser, go to the <code>Elements</code> tab, locate the <code>div</code> tag with a class of <code>theme-default-content</code>, and then go to the <code>Styles</code> tab.</p>
<div><p>Use in the Default Theme</p>
<p>The <code>theme-default-content</code> class is used on the global <code>Content</code> component within the <code>Page</code> and <code>Home</code> components provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>. If you look at the HTML on the homepage, you'll see the <code>theme-default-content</code> class being used on a <code>div</code> tag within the <code>main</code> tag with a class of <code>home</code>. We'll be discussing the global <code>Content</code> component, the <code>Page</code> component, and the <code>Home</code> component in more detail in future tutorials.</p>
</div>
<h2 id="indexpost-heading"> IndexPost Heading</h2>
<p>We're now going to add a heading to the <span>pagination</span> pages. This heading will be displayed on each <span>pagination</span> page.</p>
<h3 id="displaying-the-heading"> Displaying the Heading</h3>
<p>We're going to display the heading as an <code>h1</code> tag which we'll be adding as the first child tag of the outermost <code>div</code> tag.</p>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Displaying the Heading">
<div><div><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br></div></div></code-block>
</code-group>
<h3 id="entry-page-html-4"> Entry Page HTML</h3>
<p>After updating the <code>IndexPost.vue</code> file with the code above, if you navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> you should now see the heading being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the entry page should now look something like this:</p>
<code-group>
<code-block title="Entry Page HTML">
<div><div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 1 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 1 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 2 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 2 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br></div></div></code-block>
</code-group>
<h3 id="page-2-html-4"> Page 2 HTML</h3>
<p>If you navigate to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a> you should now see the heading being displayed with some styling which again is being provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the second page should now look something like this:</p>
<code-group>
<code-block title="Page 2 HTML">
<div><div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 3 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 3 Preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br></div></div></code-block>
</code-group>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be continuing the development of the <code>IndexPost</code> layout component by using the <code>$pagination</code> variable to add images to each post in the list of post pages.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 18 - IndexPost Images</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-18/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-18/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 18 - IndexPost Images</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to learn how to add images to the IndexPost layout component, then check out VuePress Tutorial 18 - IndexPost Images! 🍌🐒</description>
      <pubDate>Wed, 09 Nov 2022 22:15:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-18-indexpost-images"> VuePress Tutorial 18 - IndexPost Images</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>In this tutorial we're going to continue the development of the <code>IndexPost</code> layout component by using the globally scoped <code>$pagination</code> variable to access <span>pagination</span> data related to images. To display the data on the <span>pagination</span> pages we'll be updating the <code>IndexPost</code> layout component's <code>template</code> tag like we did in the previous tutorial.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>Be sure to add each block of code below one at a time to your project, then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-18</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-18" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="adding-post-images"> Adding Post Images</h2>
<p>Before we can access the <span>pagination</span> data related to images, we need to first add the images that we'll be displaying in the list of post pages. We're going to be adding three post images to the blog one for each post.</p>
<p>Each post image has a <code>width</code> of <code>155px</code> and a <code>height</code> of <code>185px</code>. Using the same <code>width</code> and <code>height</code> for the post images makes the list of post pages look consistent.</p>
<p>You can download all of the images below from your browser, and they're also available in the <code>tutorial-18</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-18" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<p>The images were created using <a href="https://www.canva.com/" target="_blank" rel="noopener noreferrer">Canva<i>Content not supported</i></a>. The site offers a lot of features for free, but some features and images require payment after your free trial is expired. A good alternative to use is <a href="https://www.gimp.org/" target="_blank" rel="noopener noreferrer">GIMP<i>Content not supported</i></a>.</p>
<p>Here are some other useful online image tools:</p>
<ul>
<li><span><a href="https://www5.lunapic.com/editor/" target="_blank" rel="noopener noreferrer">LunaPic<i>Content not supported</i></a></span></li>
<li><span><a href="https://htmlcsstoimage.com/" target="_blank" rel="noopener noreferrer">HCTI API<i>Content not supported</i></a></span></li>
<li><span><a href="https://photoscissors.com/" target="_blank" rel="noopener noreferrer">PhotoScissors<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.iloveimg.com/" target="_blank" rel="noopener noreferrer">iLoveIMG<i>Content not supported</i></a></span></li>
</ul>
<p>It's also important to reduce the file sizes of your images by using compression. This will help to optimize your site's bundle size, save bandwidth, and decrease the loading time for your images. <a href="https://www.canva.com/" target="_blank" rel="noopener noreferrer">Canva<i>Content not supported</i></a> and <a href="https://www.gimp.org/" target="_blank" rel="noopener noreferrer">GIMP<i>Content not supported</i></a>, and some of the other image tools mentioned above offer the ability to compress your images.</p>
<p>Here are some other useful online tools for image compression:</p>
<ul>
<li><span><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer">TinyPNG<i>Content not supported</i></a></span></li>
<li><span><a href="https://imagecompressor.com/" target="_blank" rel="noopener noreferrer">Image Compressor<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.websiteplanet.com/webtools/imagecompressor/" target="_blank" rel="noopener noreferrer">Website Planet Image Compressor<i>Content not supported</i></a></span></li>
</ul>
<h3 id="adding-an-examples-directory"> Adding an Examples Directory</h3>
<p>Let's start by creating an <code>examples</code> directory inside of the <code>images</code> directory. The <code>examples</code> directory will be used to store the post images for each example post.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   │   ├── <code>images</code>
│   │   │   │   ├── <code>code-monkeys-logos</code>
│   │   │   │   └── <code>examples</code>
│   │   ├── <code>theme</code>
│   │   └── config.js</p>
</code></pre><h3 id="example-post-1"> Example Post 1</h3>
<p>After adding the <code>examples</code> directory, we're now ready to add the post images for each example post. We'll be creating a directory for each example post inside of the <code>examples</code> directory. Then we'll add the post images to the directories of each example post.</p>
<p>We're going to start with the first example post by adding an <code>example-post-1</code> directory inside of the <code>examples</code> directory. Then we'll add the image for the first example post which is named <code>example-post-1.png</code> inside of the <code>example-post-1</code> directory.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>examples</code>
│   ├── <code>example-post-1</code>
│   │   └── example-post-1.png</p>
</code></pre><p>Here's the example post 1 image:</p>
<div>
  <i>Content not supported</i>
</div>
<h3 id="example-post-2"> Example Post 2</h3>
<p>For the second example post we'll be adding an <code>example-post-2</code> directory inside of the <code>examples</code> directory. Then we'll add the image for the second example post which is named <code>example-post-2.png</code> inside of the <code>example-post-2</code> directory.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>examples</code>
│   ├── <code>example-post-1</code>
│   ├── <code>example-post-2</code>
│   │   └── example-post-2.png</p>
</code></pre><p>Here's the example post 2 image:</p>
<div>
  <i>Content not supported</i>
</div>
<h3 id="example-post-3"> Example Post 3</h3>
<p>For the third example post we'll be adding an <code>example-post-3</code> directory inside of the <code>examples</code> directory. Then we'll add the image for the third example post which is named <code>example-post-3.png</code> inside of the <code>example-post-3</code> directory.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>examples</code>
│   ├── <code>example-post-1</code>
│   ├── <code>example-post-2</code>
│   ├── <code>example-post-3</code>
│   │   └── example-post-3.png</p>
</code></pre><p>Here's the example post 3 image:</p>
<div>
  <i>Content not supported</i>
</div>
<h2 id="post-images"> Post Images</h2>
<p>After adding the post images to the blog, we now need to add a way to access each image in the <code>IndexPost</code> layout component which we'll accomplish by adding a custom variable <code>img</code> to the <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks of each post file. The value of the <code>img</code> custom variable will be the path to the image in the project.</p>
<p>We're also going to add another custom variable of <code>alt</code> to the <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks of each post file. The value of the <code>alt</code> custom variable will be a description of the image.</p>
<p>If you have any questions or want to learn more about <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks in <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> then check these resources:</p>
<ul>
<li><a href="/vuepress-tutorial-6/#yaml-frontmatter-blocks">YAML Frontmatter Blocks</a></li>
<li><span><a href="https://vuepress.vuejs.org/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">Frontmatter<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress.vuejs.org/miscellaneous/glossary.html#frontmatter" target="_blank" rel="noopener noreferrer">Glossary - frontmatter<i>Content not supported</i></a></span></li>
</ul>
<h3 id="adding-img-and-alt-to-post-files"> Adding Img and Alt to Post Files</h3>
<p>Here's what the post files look like after adding the <code>img</code> and <code>alt</code> custom variables:</p>
<code-group>
<code-block title="Example Page 1">
<div><div><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br></div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 1 preview
<span>img</span><span>:</span> examples/example<span>-</span>post<span>-</span>1/example<span>-</span>post<span>-</span>1.png
<span>alt</span><span>:</span> Example Post 1 Post Picture</span>
<span>---</span></span>

<span><span>#</span> Example Post 1</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 2">
<div><div><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br></div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 2 preview
<span>img</span><span>:</span> examples/example<span>-</span>post<span>-</span>2/example<span>-</span>post<span>-</span>2.png
<span>alt</span><span>:</span> Example Post 2 Post Picture</span>
<span>---</span></span>

<span><span>#</span> Example Post 2</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 3">
<div><div><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br></div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 3 preview
<span>img</span><span>:</span> examples/example<span>-</span>post<span>-</span>3/example<span>-</span>post<span>-</span>3.png
<span>alt</span><span>:</span> Example Post 3 Post Picture</span>
<span>---</span></span>

<span><span>#</span> Example Post 3</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<h3 id="adding-img-and-alt-to-page-variables"> Adding Img and Alt to $page Variables</h3>
<p>As mentioned in the previous tutorial when <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> encounters a <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped <code>$page.frontmatter</code> variable.</p>
<p>Since the page objects in the <code>$pagination.pages</code> property are the same as the <code>$page</code> variables used by the post pages, we will now have a <code>frontmatter.img</code> property and a <code>frontmatter.alt</code> property that we can access in the <code>IndexPost</code> layout component.</p>
<h3 id="displaying-images"> Displaying Images</h3>
<p>Now that we can access the values of the <code>img</code> and <code>alt</code> custom variables in the <code>$pagination.pages</code> property, we're ready to render the images on the <span>pagination</span> pages.</p>
<p>We're going to display the images using the <code>img</code> tag which we'll place in a <code>div</code> tag underneath the parent <code>div</code> tag of the <code>p</code> tag.</p>
<p>The <code>img</code> tag allows us to embed an image into the page. We'll be using the <code>src</code> and <code>alt</code> attributes provided by the <code>img</code> tag.</p>
<p>The <code>src</code> attribute is required, and it contains the path to the image you want to display which in our case are the post images we created earlier.</p>
<p>The <code>alt</code> attribute is optional and consists of a text description of the image which is useful for <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank" rel="noopener noreferrer">accessibility<i>Content not supported</i></a> because screen readers will be able to read the description to the users. This allows the users to gain an understanding of what the image is. The description is also displayed on the page if the image is unable to be loaded.</p>
<p>If you want to learn more about the <code>img</code> tag, then check out <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank" rel="noopener noreferrer">&lt;img&gt;: The Image Embed element<i>Content not supported</i></a>.</p>
<p>We can access the <code>img</code> and <code>alt</code> properties on each page object in our loop by using <code>post.frontmatter.img</code> and <code>post.frontmatter.alt</code>, respectively.</p>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Displaying the Images">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>img</span>
          <span>:src</span><span><span>=</span><span>"</span>`/images/${post.frontmatter.img}`<span>"</span></span>
          <span>:alt</span><span><span>=</span><span>"</span>post.frontmatter.alt || <span>'</span>Post Picture<span>'</span><span>"</span></span>
        <span>/></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br></div></div></code-block>
</code-group>
<p>Here we're binding the <code>src</code> and <code>alt</code> attributes by placing a <code>:</code> before them which is shorthand for <code>v-bind</code>. This allows us to bind the JavaScript expressions to the HTML attributes.</p>
<p>Also, notice <code>/images/</code> was added to the beginning of the path to the post images which we need to add since they're all located in the <code>images</code> directory. We don't need to include <code>.vuepress/public</code> in the path to the post images though because whenever you reference assets stored in the <code>public</code> directory that gets added automatically.</p>
<p>We also added an alternative value for the post image <code>alt</code> attribute in case the <code>alt</code> custom variable isn't present in the frontmatter of a post. This is done by using a logical OR operator, i.e., <code>||</code>. Here, we're using <code>&quot;post.frontmatter.alt || 'Post Picture'&quot;</code> which means if the <code>alt</code> property evaluates to a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy" target="_blank" rel="noopener noreferrer">falsy<i>Content not supported</i></a> value, then we'll display the <code>Post Picture</code> text instead.</p>
<p>If you have any questions or want to learn more about <code>v-bind</code> or the logical OR operator, then check these resources:</p>
<ul>
<li><span><a href="https://v2.vuejs.org/v2/api/#v-bind" target="_blank" rel="noopener noreferrer">v-bind<i>Content not supported</i></a></span></li>
<li><span><a href="https://masteringjs.io/tutorials/vue/bind" target="_blank" rel="noopener noreferrer">Using v-bind in Vue<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR" target="_blank" rel="noopener noreferrer">logical OR (||)<i>Content not supported</i></a></span></li>
</ul>
<h3 id="entry-page-html"> Entry Page HTML</h3>
<p>After updating the <code>IndexPost.vue</code> file with the code above, if you navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> you should now see the images being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the entry page should now look something like this:</p>
<code-group>
<code-block title="Entry Page HTML">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 1 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 1 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
             <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-1/example-post-1.png<span>"</span></span>
                  <span>alt</span><span><span>=</span><span>"</span>Exmple Post 1 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 2 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 2 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-2/example-post-2.png<span>"</span></span>
                 <span>alt</span><span><span>=</span><span>"</span>Example Post 2 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br></div></div></code-block>
</code-group>
<h3 id="page-2-html"> Page 2 HTML</h3>
<p>If you navigate to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a> you should now see the image being displayed with some styling which again is being provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>The HTML for the <code>body</code> tag for the second page should now look something like this:</p>
<code-group>
<code-block title="Page 2 HTML">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 3 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 3 Preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-3/example-post-3.png<span>"</span></span>
                 <span>alt</span><span><span>=</span><span>"</span>Example Post 3 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br></div></div></code-block>
</code-group>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be continuing the development of the <code>IndexPost</code> layout component by beginning the process of adding the <span>pagination</span> buttons to the <span>pagination</span> pages.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 16 - Pagination</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-16/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-16/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 16 - Pagination</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to learn about the pagination feature provided by the blog plugin, then check out VuePress Tutorial 16 - Pagination! 🍌🐒</description>
      <pubDate>Fri, 30 Sep 2022 20:07:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-16-pagination"> VuePress Tutorial 16 - Pagination</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>Now it's time to learn more about the <span>pagination</span> feature and the <span>Client API</span> provided by <a href="https://vuepress-plugin-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-blog<i>Content not supported</i></a>. In this tutorial we're going to begin the configuration of the <code>pagination</code> property as well as discuss the globally scoped <code>$pagination</code> variable provided by the <span>Client API</span>.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-16</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-16" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="pagination-configuration"> Pagination Configuration</h2>
<p>As mentioned in the previous tutorial <span>pagination</span> allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.</p>
<p>If you have any questions or want to learn more about the <span>pagination</span> configuration, then check out the <a href="https://vuepress-plugin-blog.billyyyyy3320.com/config/#pagination" target="_blank" rel="noopener noreferrer">pagination property<i>Content not supported</i></a> and <a href="https://vuepress-plugin-blog.billyyyyy3320.com/pagination/" target="_blank" rel="noopener noreferrer">Pagination Config<i>Content not supported</i></a> documentation.</p>
<h3 id="pagination"> pagination</h3>
<p>We're going to begin the configuration by adding the <code>pagination</code> property which allows you to customize the <span>pagination</span> of your posts.</p>
<p>The expected type is a <code>Pagination</code> object.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
            itemPermalink<span>:</span> <span>'/:year/:month/:day/:slug'</span><span>,</span>
            pagination<span>:</span> <span>{</span><span>}</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br></div></div></code-block>
</code-group>
<h3 id="lengthperpage"> lengthPerPage</h3>
<p>Next, we'll add the <code>lengthPerPage</code> property which sets the maximum number of posts to display per page.</p>
<p>The expected type is a <code>number</code>, and the default value is <code>10</code>.</p>
<p>When the number of posts is greater than the <code>lengthPerPage</code> value, the blog plugin will generate the necessary pages to display all of the posts.</p>
<p>The blog plugin does this by adding <code>page/n/</code> onto the end of the entry page where <code>n</code> represents the number of the page.</p>
<p>So, the second page in the <span>paginated</span> list of pages would be <code>page/2/</code>.</p>
<p>If you remember from the previous tutorial <a href="/vuepress-tutorial-15">VuePress Tutorial 15 - Blog Plugin</a>, the entry page is set by the <code>path</code> property which was given a value of <code>/posts/</code>.</p>
<p>This means in our case the blog plugin will generate pages with the following format: <code>/posts/page/n/</code> where <code>n</code> once again represents the number of the page.</p>
<p>We also created the following posts in the <code>_posts</code> directory in the previous tutorial:</p>
<ul>
<li><code>2020-07-03-example-page-1.md</code></li>
<li><code>2021-11-16-example-page-2.md</code></li>
<li><code>2022-05-08-example-page-3.md</code></li>
</ul>
<p>Since we only have three posts and the default value for <code>lengthPerPage</code> is 10, the blog plugin won't generate any more pages. You can test this by attempting to navigate to the following page:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
</ul>
<p>To demonstrate the generation of pages we can set the <code>lengthPerPage</code> to have a value of <code>2</code>.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
            itemPermalink<span>:</span> <span>'/:year/:month/:day/:slug'</span><span>,</span>
            pagination<span>:</span> <span>{</span>
              lengthPerPage<span>:</span> <span>2</span><span>,</span>
            <span>}</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br></div></div></code-block>
</code-group>
<p>You should now be able to navigate to the following page:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
</ul>
<div><p>Updating lengthPerPage</p>
<p>In a future tutorial we'll be updating the value of <code>lengthPerPage</code> to be <code>5</code> which is the current value being used in the blog.</p>
</div>
<h3 id="layout"> layout</h3>
<p>Now we're going to add the <code>layout</code> property which is used to specify which layout component to use for the <span>pagination</span> pages except for the entry page. The entry page uses the <code>IndexPost</code> layout component which we set in the previous tutorial.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>'DirectoryPagination' || 'Layout'</code>.</p>
<p>Since we haven't created a <code>DirectoryPagination</code> layout component in the <code>layouts</code> directory, the <code>layout</code> property uses the other default value which is the <code>Layout</code> component. In our case the <code>Layout</code> component is provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>To see the difference between the layout of the entry page and the layout of the second page you can navigate to the following pages:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/posts/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
</ul>
<p>If you want your <span>pagination</span> pages except for the entry page to use a layout specifically designed for them, then you can create a <code>DirectoryPagination.vue</code> file inside of the <code>layouts</code> directory. Since <code>DirectoryPagination</code> is the default value for the <code>layout</code> property you won't need to explicitly set it in the <code>config.js</code> file.</p>
<p>We'll be using the same layout for the entry page and for the other <span>pagination</span> pages, so we're going to provide a custom value of <code>IndexPost</code> to the <code>layout</code> property.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
            itemPermalink<span>:</span> <span>'/:year/:month/:day/:slug'</span><span>,</span>
            pagination<span>:</span> <span>{</span>
              lengthPerPage<span>:</span> <span>2</span><span>,</span>
              layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            <span>}</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br></div></div></code-block>
</code-group>
<p>When navigating to the following page you should now see the <code>IndexPost</code> layout component being used instead of the <code>Layout</code> component:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
</ul>
<p>Here's a table that summarizes the relationship between the <span>pagination</span> and post page URLs the blog plugin builds and the layout components:</p>
<table>
<thead>
<tr>
<th>URLs</th>
<th>Layouts</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>/posts/</code></td>
<td><code>IndexPost</code> (falls back to <code>Layout</code>)</td>
</tr>
<tr>
<td><code>/posts/page/2/</code></td>
<td><code>IndexPost</code> (falls back to <code>DirectoryPagination</code> or <code>Layout</code>)</td>
</tr>
<tr>
<td><code>/2020/07/03/example-page-1/</code></td>
<td><code>Post</code></td>
</tr>
<tr>
<td><code>/2021/11/16/example-page-2/</code></td>
<td><code>Post</code></td>
</tr>
<tr>
<td><code>/2022/05/08/example-page-3/</code></td>
<td><code>Post</code></td>
</tr>
</tbody>
</table>
<div><p>Post Pages Reminder</p>
<p>The post pages were given the URLs above by building customized <span>permalinks</span> using the format specified by the <code>itemPermalink</code> property, and the layout components used by the post pages were set by the <code>itemLayout</code> property. Both of these properties can be found in the <code>config.js</code> file, and you can refer to the previous tutorial <a href="/vuepress-tutorial-15">VuePress Tutorial 15 - Blog Plugin</a> if you have any questions about the post pages.</p>
</div>
<h3 id="prevtext"> prevText</h3>
<p>Now we'll add the <code>prevText</code> property which is used to specify the text for the previous links. The previous links are used to navigate to the previous page in the list of <span>pagination</span> pages.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>'Prev'</code>.</p>
<p>We'll be using the default value of <code>'Prev'</code> for the <code>prevText</code> property, so we don't need to explicitly set the property. However, we're going to explicitly set it because this gives us a quick reference to the property and its value.</p>
<p>It's also possible to use a custom value for the <code>prevText</code> property, e.g., you could use a value of <code>Older</code> which you would have to explicitly set in the <code>config.js</code> file.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
            itemPermalink<span>:</span> <span>'/:year/:month/:day/:slug'</span><span>,</span>
            pagination<span>:</span> <span>{</span>
              lengthPerPage<span>:</span> <span>2</span><span>,</span>
              layout<span>:</span> <span>'IndexPost'</span><span>,</span>
              prevText<span>:</span> <span>'Prev'</span><span>,</span>
            <span>}</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br></div></div></code-block>
</code-group>
<h3 id="nexttext"> nextText</h3>
<p>We're now ready to add the <code>nextText</code> property which is used to specify the text for the next links. The next links are used to navigate to the next page in the list of <span>pagination</span> pages.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>'Next'</code>.</p>
<p>We'll be using the default value of <code>'Next'</code> for the <code>nextText</code> property, so we don't need to explicitly set the property. However, we're going to explicitly set it because this once again gives us a quick reference to the property and its value.</p>
<p>It's also possible to use a custom value for the <code>nextText</code> property, e.g., you could use a value of <code>Newer</code> which you would have to explicitly set in the <code>config.js</code> file.</p>
<p>Here's the updated <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span>
    <span>'@goy/svg-icons'</span><span>,</span>
    <span>[</span>
      <span>'@vuepress/blog'</span><span>,</span>
      <span>{</span>
        directories<span>:</span> <span>[</span>
          <span>{</span>
            id<span>:</span> <span>'posts'</span><span>,</span>
            dirname<span>:</span> <span>'_posts'</span><span>,</span>
            path<span>:</span> <span>'/posts/'</span><span>,</span>
            layout<span>:</span> <span>'IndexPost'</span><span>,</span>
            itemLayout<span>:</span> <span>'Post'</span><span>,</span>
            itemPermalink<span>:</span> <span>'/:year/:month/:day/:slug'</span><span>,</span>
            pagination<span>:</span> <span>{</span>
              lengthPerPage<span>:</span> <span>2</span><span>,</span>
              layout<span>:</span> <span>'IndexPost'</span><span>,</span>
              prevText<span>:</span> <span>'Prev'</span><span>,</span>
              nextText<span>:</span> <span>'Next'</span><span>,</span>
            <span>}</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br></div></div></code-block>
</code-group>
<h2 id="client-api"> Client API</h2>
<p>We're now going to take a look at how to use the <span>Client API</span> to access the <span>pagination</span> data in the layout components used by the blog plugin.</p>
<p>The <span>Client API</span> uses globally scoped variables which means you can access these variables from any component as well as in Markdown files when using Vue. You can check out the <a href="https://v1.vuepress.vuejs.org/guide/using-vue.html" target="_blank" rel="noopener noreferrer">Using Vue in Markdown<i>Content not supported</i></a> documentation if you're interested.</p>
<p>The <span>Client API</span> provides the following globally scoped variables: <code>$pagination</code>, <code>$frontmatterKey</code>, and <code>$service</code>. We'll be focusing on the <code>$pagination</code> variable in this tutorial.</p>
<p>If you have any questions or want to learn more about the <span>Client API</span>, then check out the <a href="https://vuepress-plugin-blog.billyyyyy3320.com/client-api/" target="_blank" rel="noopener noreferrer">Client API<i>Content not supported</i></a> documentation.</p>
<h3 id="pagination-2"> $pagination</h3>
<p>We're going to discuss each property the <code>$pagination</code> variable exposes as well as demonstrate how to access the properties in the layout components.</p>
<p>To get a better understanding of the <span>pagination</span> data we're going to log each property to the console. The logging will be added to the <code>created</code> lifecycle hook in the <code>script</code> tag. To view the data in the console we're going to inspect the browser then go to the <code>Console</code> tab.</p>
<p>If you have questions about the <code>created</code> lifecycle hook, then check out this resources:</p>
<ul>
<li><span><a href="https://v2.vuejs.org/v2/api/#created" target="_blank" rel="noopener noreferrer">created<i>Content not supported</i></a></span></li>
<li><span><a href="https://blog.logrocket.com/introduction-to-vue-lifecycle-hooks/" target="_blank" rel="noopener noreferrer">Introduction to Vue lifecycle hooks<i>Content not supported</i></a></span></li>
</ul>
<div><p>null $paginaton</p>
<p>If you access the <code>$pagination</code> variable at a route which doesn't match any classification, i.e., the route isn't a pagination page, then the value of <code>$pagination</code> will be <code>null</code>.</p>
<p>This means when developing layout components you should check if <code>$pagination</code> has a value of <code>null</code> before using the variable.</p>
</div>
<h3 id="pages"> pages</h3>
<p>The <code>$pagination.pages</code> property is an array of objects where each object contains data related to post pages that are accessible on the current <span>pagination</span> page.</p>
<p>Since the <code>$pagination.pages</code> property contains data related to post pages that are accessible on the current <span>pagination</span> page, the data of <code>$pagination.pages</code> will be different depending on which <span>pagination</span> page is being viewed.</p>
<p>To see the differences between the data, we're going to look at the entry page and the second page which in our case is also the last page.</p>
<p>Here are the links to both the entry page and the second page:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
</ul>
<p>Let's add the code to log the <code>$pagination.pages</code> property in the layout component which in our case is being used by both the entry page and the second page, i.e., the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.pages">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span><span>'$pagination.pages'</span><span>,</span> <span>this</span><span>.</span>$pagination<span>.</span>pages<span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<div><p>Using Different Layout Components</p>
<p>If you're using different layout components for your entry page and the other <span>pagination</span> pages, then you'll need to add the logging of the <code>$pagination.pages</code> property to both of the files.</p>
</div>
<p>After adding the above code to the <code>IndexPost.vue</code> file and navigating to the entry page, the console should log an array of page objects with the following data:</p>
<code-group>
<code-block title="Entry Page $pagination.pages">
<div><pre><code><span>[</span>
  <span>{</span>
    <span>"frontmatter"</span><span>:</span> <span>{</span>
      <span>"layout"</span><span>:</span> <span>"Post"</span><span>,</span>
      <span>"permalink"</span><span>:</span> <span>"/:year/:month/:day/:slug"</span>
    <span>}</span><span>,</span>
    <span>"id"</span><span>:</span> <span>"posts"</span><span>,</span>
    <span>"key"</span><span>:</span> <span>"v-4e4f6ae5"</span><span>,</span>
    <span>"path"</span><span>:</span> <span>"/2020/07/03/example-page-1/"</span><span>,</span>
    <span>"pid"</span><span>:</span> <span>"posts"</span><span>,</span>
    <span>"regularPath"</span><span>:</span> <span>"/_posts/2020-07-03-example-page-1.html"</span><span>,</span>
    <span>"relativePath"</span><span>:</span> <span>"_posts/2020-07-03-example-page-1.md"</span>
  <span>}</span><span>,</span>
  <span>{</span>
    <span>"frontmatter"</span><span>:</span> <span>{</span>
      <span>"layout"</span><span>:</span> <span>"Post"</span><span>,</span>
      <span>"permalink"</span><span>:</span> <span>"/:year/:month/:day/:slug"</span>
    <span>}</span><span>,</span>
    <span>"id"</span><span>:</span> <span>"posts"</span><span>,</span>
    <span>"key"</span><span>:</span> <span>"v-60c9aaf7"</span><span>,</span>
    <span>"path"</span><span>:</span> <span>"/2021/11/16/example-page-2/"</span><span>,</span>
    <span>"pid"</span><span>:</span> <span>"posts"</span><span>,</span>
    <span>"regularPath"</span><span>:</span> <span>"/_posts/2021-11-16-example-page-2.html"</span><span>,</span>
    <span>"relativePath"</span><span>:</span> <span>"_posts/2021-11-16-example-page-2.md"</span>
  <span>}</span>
<span>]</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br></div></div></code-block>
</code-group>
<p>Since the <code>lengthPerPage</code> property was given a value of <code>2</code> and we have three post pages, the <code>$pagination.pages</code> property for the entry page contains two page objects one for each post.</p>
<div><p>Formatting Differences</p>
<p>The log in the <code>Console</code> tab will be formatted differently than the <code>$pagination.pages</code> data shown here which was formatted using <a href="https://www.json.org/json-en.html" target="_blank" rel="noopener noreferrer">JSON<i>Content not supported</i></a>. The properties and values will be the same though.</p>
</div>
<p>After navigating to the second page, the console should log an array consisting of one page object with the following data:</p>
<code-group>
<code-block title="Second Page $pagination.pages">
<div><pre><code><span>[</span>
  <span>{</span>
    <span>"frontmatter"</span><span>:</span> <span>{</span>
      <span>"layout"</span><span>:</span> <span>"Post"</span><span>,</span>
      <span>"permalink"</span><span>:</span> <span>"/:year/:month/:day/:slug"</span>
    <span>}</span><span>,</span>
    <span>"id"</span><span>:</span> <span>"posts"</span><span>,</span>
    <span>"key"</span><span>:</span> <span>"v-9dca171a"</span><span>,</span>
    <span>"path"</span><span>:</span> <span>"/2022/05/08/example-page-3/"</span><span>,</span>
    <span>"pid"</span><span>:</span> <span>"posts"</span><span>,</span>
    <span>"regularPath"</span><span>:</span> <span>"/_posts/2022-05-08-example-page-3.html"</span><span>,</span>
    <span>"relativePath"</span><span>:</span> <span>"_posts/2022-05-08-example-page-3.md"</span>
  <span>}</span>
<span>]</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br></div></div></code-block>
</code-group>
<p>Now let's describe what each property in the <code>$pagination.pages</code> data represents:</p>
<ul>
<li><code>frontmatter</code>: Contains the data present in the <span><a href="https://v1.vuepress.vuejs.org/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">frontmatter<i>Content not supported</i></a></span> of the post pages.</li>
<li><code>layout</code>: Layout component used by the post pages which is set using the <code>itemLayout</code> property in the <code>config.js</code> file.</li>
<li><code>permalink</code>: Permalink format used for the post pages which is set using the <code>itemPermalink</code> property in the <code>config.js</code> file.</li>
<li><code>id</code>: Unique id for the current classifier which is set using the <code>id</code> property in the <code>config.js</code> file.</li>
<li><code>key</code>: Unique key generated for each page in the site.</li>
<li><code>path</code>: Path for the post page which uses a customized permalink built from the format specified by the <code>itemPermalink</code> property found in the <code>config.js</code> file.</li>
<li><code>pid</code>: Represents the pid for the current classifier which is set using the <code>id</code> property in the <code>config.js</code> file.</li>
<li><code>regularPath</code>: Default path for the post page which is built using the <code>:regular</code> template variable.</li>
<li><code>relativePath</code>: Location of the post page Markdown file relative to the documents directory which in our case is the <code>docs</code> directory.</li>
</ul>
<div><p>The $page Variable</p>
<p>The page objects in the <code>$pagination.pages</code> property are the same page objects found by logging the globally scoped <code>$page</code> variable in the <code>Post</code> layout component. After writing the code to log the <code>$page</code> variable, you can view the log by navigating to a post page, e.g., <a href="http://localhost:8080/2020/07/03/example-page-1/" target="_blank" rel="noopener noreferrer">http://localhost:8080/2020/07/03/example-page-1/<i>Content not supported</i></a>.</p>
<p>To learn more about the <code>$page</code> variable and other globally scoped variables you can take a look at the <a href="https://v1.vuepress.vuejs.org/guide/global-computed.html" target="_blank" rel="noopener noreferrer">Global Computed<i>Content not supported</i></a> documentation.</p>
</div>
<h3 id="length"> length</h3>
<p>The <code>$pagination.length</code> property is a <code>number</code> whose value is determined by the number of <span>pagination</span> pages.</p>
<p>Let's add the code to log the <code>$pagination.length</code> property in the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.length">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span><span>'$pagination.length'</span><span>,</span> <span>this</span><span>.</span>$pagination<span>.</span>length<span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>If we navigate to either the entry page or the second page, the console should log a value of <code>2</code> since in our case there are a total of two <span>pagination</span> pages.</p>
<h3 id="hasprev"> hasPrev</h3>
<p>The <code>$pagination.hasPrev</code> property is a <code>boolean</code> which has a value of <code>true</code> when a previous <span>pagination</span> page exists and a value of <code>false</code> when a previous <span>pagination</span> page doesn't exist.</p>
<p>Let's add the code to log the <code>$pagination.hasPrev</code> property in the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.hasPrev">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span><span>'$pagination.hasPrev'</span><span>,</span> <span>this</span><span>.</span>$pagination<span>.</span>hasPrev<span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>If we navigate to the entry page, the console should log a value of <code>false</code>. This makes sense since the entry page is the first <span>pagination</span> page which means there is no previous <span>pagination</span> page.</p>
<p>If we navigate to the second page, the console should log a value of <code>true</code> which makes sense since the entry page is before the second page.</p>
<h3 id="prevlink"> prevLink</h3>
<p>The <code>$pagination.prevLink</code> property is a <code>string</code> whose value is the previous <span>pagination</span> page path if a previous <span>pagination</span> page exists and a value of <code>null</code> when a previous <span>pagination</span> page doesn't exist.</p>
<p>Let's add the code to log the <code>$pagination.prevLink</code> property in the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.prevLink">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span><span>'$pagination.prevLink'</span><span>,</span> <span>this</span><span>.</span>$pagination<span>.</span>prevLink<span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>If we navigate to the entry page, the console should log a value of <code>null</code>. This makes sense since the entry page is the first <span>pagination</span> page which means there is no link to a previous <span>pagination</span> page.</p>
<p>If we navigate to the second page, the console should log a value of <code>/posts/</code> which makes sense since the previous link before the second page is the entry page which has a path of <code>/posts/</code>.</p>
<h3 id="hasnext"> hasNext</h3>
<p>The <code>$pagination.hasNext</code> property is a <code>boolean</code> which has a value of <code>true</code> when a <span>pagination</span> page exists after the current <span>pagination</span> page and a value of <code>false</code> when a <span>pagination</span> page doesn't exist after the current <span>pagination</span> page.</p>
<p>Let's add the code to log the <code>$pagination.hasNext</code> property in the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.hasNext">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span><span>'$pagination.hasNext'</span><span>,</span> <span>this</span><span>.</span>$pagination<span>.</span>hasNext<span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>If we navigate to the entry page, the console should log a value of <code>true</code>. This makes sense since there is a next page in the <span>paginated</span> list of pages, i.e., the second page.</p>
<p>If we navigate to the second page, the console should log a value of <code>false</code> which makes sense since in our case there is no <span>pagination</span> page after the second page.</p>
<h3 id="nextlink"> nextLink</h3>
<p>The <code>$pagination.nextLink</code> property is a <code>string</code> whose value is the path of the next <span>pagination</span> page if it exists and a value of <code>null</code> when the next <span>pagination</span> page doesn't exist.</p>
<p>Let's add the code to log the <code>$pagination.nextLink</code> property in the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.nextLink">
<div><div><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span><span>'$pagination.nextLink'</span><span>,</span> <span>this</span><span>.</span>$pagination<span>.</span>nextLink<span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>If we navigate to the entry page, the console should log a value of <code>/posts/page/2/</code>. This makes sense since the entry page is the first <span>pagination</span> page, and in our case there is a link to the next <span>pagination</span> page, i.e., the second page.</p>
<p>If we navigate to the second page, the console should log a value of <code>null</code>. This makes sense since in our case the second page is the last page in the list of <span>pagination</span> pages which means there is no link to the next <span>pagination</span> page.</p>
<h3 id="getspecificpagelink"> getSpecificPageLink()</h3>
<p>The <code>$pagination.getSpecificPageLink()</code> is a method that accepts a page number and returns the path of a <span>pagination</span> page. The page numbers start at <code>0</code>, so to get the entry page path you need to provide a value of <code>0</code>. If an input is provided that is unable to return a path to a <span>pagination</span> page, then an error is thrown which can be found in the <code>Console</code> tab.</p>
<p>Let's add the code to log the output of the <code>$pagination.getSpecificPageLink()</code> method in the <code>IndexPost.vue</code> file:</p>
<code-group>
<code-block title="Logging $pagination.getSpecificPageLink()">
<div><div><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  <span>created</span><span>(</span><span>)</span> <span>{</span>
    console<span>.</span><span>log</span><span>(</span>
      <span>'$pagination.getSpecificPageLink(0)'</span><span>,</span>
      <span>this</span><span>.</span>$pagination<span>.</span><span>getSpecificPageLink</span><span>(</span><span>0</span><span>)</span>
    <span>)</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br></div></div></code-block>
</code-group>
<p>Since we used a page number of <code>0</code> in the code above, the console should log a value of <code>/posts/</code>. This makes sense since a value of <code>0</code> refers to the entry page which has a path of <code>/posts/</code>.</p>
<p>If we want to get the path of the second page, then we can use a value of <code>1</code> as the page number, so the console should log a value of <code>/posts/page/2/</code>. This makes sense since a value of <code>1</code> refers to the second page which has a path of <code>/posts/page/2/</code>.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll begin the development of the <code>IndexPost</code> layout component which will involve using the <code>$pagination</code> variable provided by the <span>Client API</span>.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 20 - Pagination Links Styling</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-20/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-20/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 20 - Pagination Links Styling</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to learn how to style the pagination links, then check out VuePress Tutorial 20 - Pagination Links Styling! 🍌🐒</description>
      <pubDate>Wed, 23 Nov 2022 19:23:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-20-pagination-links-styling"> VuePress Tutorial 20 - Pagination Links Styling</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>We're going to begin the process of styling the Prev and Next <span>pagination</span> links that we added to each of the <span>pagination</span> pages in the previous tutorial. To implement the styling we'll be adding the following CSS classes <code>pagination</code>, <code>left-arrow</code>, and <code>right-arrow</code> to the <code>IndexPost</code> layout component.</p>
<p>The <code>pagination</code> class will be used to properly space out the Prev and Next <span>pagination</span> links. The <code>left-arrow</code> and <code>right-arrow</code> classes will be used to add some styling to the left arrow and right arrow icons which we'll be adding using the global <code>vp-icon</code> component which is provided by <a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a>.</p>
<p>When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>You can view all of the code in this tutorial by going to the <code>tutorial-20</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-20" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="pagination-class"> Pagination Class</h2>
<p>We're going to start by adding the <code>pagination</code> class to the <code>div</code> tag that is wrapping both of the <code>router-link</code> components in the <code>IndexPost.vue</code> file.</p>
<p>Then we'll apply the following styles:</p>
<code-group>
<code-block title="Adding the pagination Class">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>img</span>
          <span>:src</span><span><span>=</span><span>"</span>`/images/${post.frontmatter.img}`<span>"</span></span>
          <span>:alt</span><span><span>=</span><span>"</span>post.frontmatter.alt || <span>'</span>Post Picture<span>'</span><span>"</span></span>
        <span>/></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>pagination<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasPrev<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.prevLink<span>"</span></span><span>></span></span>
          Prev
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasNext<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.nextLink<span>"</span></span><span>></span></span>
          Next
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.pagination
  <span>display</span><span>:</span> flex
  <span>justify-content</span><span>:</span> space-between
  <span>padding-top</span><span>:</span> 2rem
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>lang=&quot;stylus&quot;</code> is used to specify which pre-processor we want to use in the component which in our case is <span><a href="https://stylus-lang.com/" target="_blank" rel="noopener noreferrer">Stylus<i>Content not supported</i></a></span> which is the default pre-processor used by <span><a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a></span>.</li>
<li><code>scoped</code> is used to only apply the styles to the current component, i.e., the <code>IndexPost</code> layout component. We're scoping these styles since they currently only apply to the <code>IndexPost</code> layout component.</li>
<li><code>display: flex</code> defines a flex container for all of the direct children of the <code>div</code> tag with a class of <code>pagination</code>.</li>
<li><code>justify-content: space-between</code> evenly spaces out the flex items along the main-axis of the flex container where the first item is flush with the start of the flex container, and the last item is flush with the end of the flex container. Here, the main-axis of the flex container is the horizontal axis. The flex items are the direct children of the <code>div</code> tag with a class of <code>pagination</code>, i.e., the <code>div</code> tags that are wrapping the <code>router-link</code> components.</li>
<li><code>padding-top: 2rem</code> adds a padding of <code>2rem</code> to the top of the <code>div</code> tag with a class of <code>pagination</code>.</li>
</ul>
<p>The <span>pagination</span> links should now be properly spaced out, and you can view the styling updates by navigating to the <span>pagination</span> pages:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/3/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/3/<i>Content not supported</i></a></span></li>
</ul>
<p>If you have any questions about the <code>lang</code> attribute, the <code>scoped</code> attribute, flexbox, or CSS in general, then check out these resources:</p>
<ul>
<li><span><a href="https://vue-loader-v14.vuejs.org/en/configurations/pre-processors.html" target="_blank" rel="noopener noreferrer">Using Pre-Processors<i>Content not supported</i></a></span></li>
<li><span><a href="https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css" target="_blank" rel="noopener noreferrer">Scoped CSS<i>Content not supported</i></a></span></li>
<li><span><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener noreferrer">A Complete Guide to Flexbox<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noopener noreferrer">Basics of Flexbox<i>Content not supported</i></a></span></li>
<li><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" target="_blank" rel="noopener noreferrer">justify-content<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/css/default.asp" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a></span></li>
</ul>
<h2 id="left-and-right-arrow-icons"> Left and Right Arrow Icons</h2>
<p>We're now ready to add the left and right arrow icons to the <span>pagination</span> links.</p>
<h3 id="downloading-the-icons"> Downloading the Icons</h3>
<p>To add the left and right arrow icons to the site we need to first download the icons. To find icons for your site <a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> recommends using <a href="https://www.iconfont.cn/collections/index" target="_blank" rel="noopener noreferrer">iconfont<i>Content not supported</i></a>. After searching for the icons and downloading them, you'll be asked to specify a color and size for the icons. For the blog we'll be using a color of <code>#e6e6e6</code> and a size of <code>200</code> which is the default size.</p>
<p>Instead of searching <a href="https://www.iconfont.cn/collections/index" target="_blank" rel="noopener noreferrer">iconfont<i>Content not supported</i></a> for the left and right arrow icons, you can download them from the <code>tutorial-20</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-20" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<div><p>Using SVG Export</p>
<p>To easily download the left and right arrow icons you can also install the browser extension <a href="https://svgexport.io/" target="_blank" rel="noopener noreferrer">SVG Export<i>Content not supported</i></a>. After installing the extension, all you need to do is click the extension icon which will extract all of the SVGs including their inline styles from the current page. A new tab will open containing all of the extracted SVGs which you can then download.</p>
</div>
<h3 id="updating-the-icons-directory"> Updating the Icons Directory</h3>
<p>After downloading the left and right arrow icons, we'll need to add them to the <code>icons</code> directory which should now look something like this:</p>
<pre><code><p>├── <code>icons</code>
│   ├── Gab.svg
│   ├── leftArrow.svg
│   ├── GitHub.svg
│   ├── RSS.svg
│   ├── Keybase.svg
│   ├── rightArrow.svg
│   ├── Telegram.svg
│   ├── Twitter.svg
│   └── YouTube.svg</p>
</code></pre><h3 id="displaying-the-icons"> Displaying the Icons</h3>
<p>After adding the left and right arrow icons to the <code>icons</code> directory, the plugin will automatically load the icons and provides the global <code>vp-icon</code> component. To use the <code>vp-icon</code> component we need to pass a <code>name</code> attribute to it where the value is the name of the SVG file we want to use.</p>
<p>Here, the value for the <code>name</code> attribute will be <code>leftArrow</code> for the Prev <span>pagination</span> link and <code>rightArrow</code> for the Next <span>pagination</span> link.</p>
<p>We're going to be adding the <code>vp-icon</code> components inside of the corresponding <code>router-link</code> components.</p>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Displaying the Icons">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>img</span>
          <span>:src</span><span><span>=</span><span>"</span>`/images/${post.frontmatter.img}`<span>"</span></span>
          <span>:alt</span><span><span>=</span><span>"</span>post.frontmatter.alt || <span>'</span>Post Picture<span>'</span><span>"</span></span>
        <span>/></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>pagination<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasPrev<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.prevLink<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>leftArrow<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>Prev
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasNext<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.nextLink<span>"</span></span><span>></span></span>
          Next<span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>rightArrow<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.pagination
  <span>display</span><span>:</span> flex
  <span>justify-content</span><span>:</span> space-between
  <span>padding-top</span><span>:</span> 2rem
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br></div></div></code-block>
</code-group>
<p>To view the left and right arrow icons navigate to the <span>pagination</span> pages:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/3/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/3/<i>Content not supported</i></a></span></li>
</ul>
<p>Notice how the left arrow icon is being displayed to the left of the Prev <span>pagination</span> text and how the right arrow icon is being displayed to the right of the Next <span>pagination</span> text. This ensures the arrows and the text look correct when being displayed.</p>
<h3 id="styling-the-icons"> Styling the Icons</h3>
<p>We're now going to add some styling to the left and right arrow icons. The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Styling the Icons">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>img</span>
          <span>:src</span><span><span>=</span><span>"</span>`/images/${post.frontmatter.img}`<span>"</span></span>
          <span>:alt</span><span><span>=</span><span>"</span>post.frontmatter.alt || <span>'</span>Post Picture<span>'</span><span>"</span></span>
        <span>/></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>pagination<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasPrev<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.prevLink<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>leftArrow<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>left-arrow<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>Prev
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasNext<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.nextLink<span>"</span></span><span>></span></span>
          Next<span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>rightArrow<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>right-arrow<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.pagination
  <span>display</span><span>:</span> flex
  <span>justify-content</span><span>:</span> space-between
  <span>padding-top</span><span>:</span> 2rem
  .left-arrow
    <span>padding-right</span><span>:</span> 0.25rem
  .right-arrow
    <span>padding-left</span><span>:</span> 0.25rem
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br></div></div></code-block>
</code-group>
<ul>
<li>
<p><code>padding-right: 0.25rem</code> adds a padding of <code>0.25rem</code> to the right of the <code>vp-icon</code> component with a class of <code>left-arrow</code>.</p>
</li>
<li>
<p><code>padding-left: 0.25rem</code> adds a padding of <code>0.25rem</code> to the left of the <code>vp-icon</code> component with a class of <code>right-arrow</code>.</p>
</li>
</ul>
<p>To view the styling updates to the left and right arrow icons navigate to the <span>pagination</span> pages:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/3/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/3/<i>Content not supported</i></a></span></li>
</ul>
<p>If you have any questions about the CSS discussed above, then check out this resource:</p>
<ul>
<li><span><a href="https://www.w3schools.com/css/default.asp" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a></span></li>
</ul>
<h2 id="optimizing-the-icons"> Optimizing the Icons</h2>
<p>When downloading the left and right arrow icons from <a href="https://www.iconfont.cn/collections/index" target="_blank" rel="noopener noreferrer">iconfont<i>Content not supported</i></a>, the icons will have a lot of redundant and useless information. We can use a Command-line Interface (CLI) command provided by <a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> to optimize the icons.</p>
<div><p>Icons Already Optimized</p>
<p>If you downloaded the left and right arrow icons from the repository or by using the <a href="https://svgexport.io/" target="_blank" rel="noopener noreferrer">SVG Export<i>Content not supported</i></a> browser extension, then the icons should already be optimized and you shouldn't have to run the CLI command.</p>
</div>
<p>Here's the CLI command you can run to optimize the icons <code>vuepress svgo [docsDir]</code> where <code>[docsDir]</code> is the docs directory for your project which in our case is <code>docs</code>.</p>
<p>We added this CLI command to the <code>scripts</code> object in the <code>package.json</code> file in the previous post <a href="/vuepress-tutorial-12/#cli-command">VuePress Tutorial 12 - Highlight SVGs on Hover</a>.</p>
<p>Here's how to run the script:</p>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> svgo
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> run svgo
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the script, the icons should be optimized.</p>
<p>If you have questions about how the plugin implements the CLI command or about the plugin in general, then checkout the <a href="https://github.com/ntnyq/vuepress-plugin-svg-icons/tree/vuepress-v1/docs/guide" target="_blank" rel="noopener noreferrer">guide<i>Content not supported</i></a>.</p>
<p>You can also check out <a href="https://github.com/svg/svgo" target="_blank" rel="noopener noreferrer">SVGO<i>Content not supported</i></a> which is the optimization tool being used by the plugin to optimize the icons.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we're going to continue styling the <code>IndexPost</code> layout component by making each post in the list of posts look like a card.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 2 - Why Use VuePress?</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-2/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-2/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 2 - Why Use VuePress?</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Wondering if you should use VuePress, then check out VuePress Tutorial 2 - Why Use VuePress? 🍌🐒</description>
      <pubDate>Wed, 24 Nov 2021 20:50:30 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-2-why-use-vuepress"> VuePress Tutorial 2 - Why Use VuePress?</h1>
</template><h2 id="what-is-vuepress"> What is VuePress?</h2>
<p><a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> is a minimalistic <span>static site generator (SSG)</span> with a Vue-powered <a href="https://v1.vuepress.vuejs.org/theme/" target="_blank" rel="noopener noreferrer">theming system<i>Content not supported</i></a> and <a href="https://v1.vuepress.vuejs.org/plugin/" target="_blank" rel="noopener noreferrer">Plugin API<i>Content not supported</i></a>.</p>
<p>Originally, it was created to serve the documentation needs of <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue's<i>Content not supported</i></a> own sub projects, so it comes with a <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> optimized for writing technical documentation.</p>
<p>As well has being useful for writing technical documentation, it also has a <a href="https://vuepress-plugin-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">blog plugin<i>Content not supported</i></a> which we'll be looking at in more detail in future tutorials.</p>
<p>Now, to clear up any confusion we'll define what an <span>SSG</span> is, then we'll talk more about the <a href="https://v1.vuepress.vuejs.org/theme/" target="_blank" rel="noopener noreferrer">theming system<i>Content not supported</i></a> and the <a href="https://v1.vuepress.vuejs.org/plugin/" target="_blank" rel="noopener noreferrer">Plugin API<i>Content not supported</i></a>.</p>
<p>After that we'll provide a list of some of the features of <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>, and then we'll give some quick comparisons with similar technologies.</p>
<h2 id="different-types-of-websites"> Different Types of Websites</h2>
<p>Before we define what an <span>SSG</span> is, let's first look at some different types of websites. This will allow us to get a better understanding of the pros and cons of using an <span>SSG</span>.</p>
<p>We'll mainly be looking at each type of website in terms of <span>search engine optimization (SEO)</span>, <span>speed</span>, and <span>ease of updating</span>.</p>
<h3 id="static-website"> Static Website</h3>
<ul>
<li>Uses static HTML pages with possible CSS and JavaScript</li>
<li>Pages are uploaded to a content delivery network (CDN) or a web host</li>
</ul>
<p>Here's a simple diagram illustrating the process:</p>
<div>
  <i>Content not supported</i>
</div>
<h4 id="pros"> Pros</h4>
<ul>
<li><span>SEO-friendly</span> since a search engine can crawl the site and fully rendered HTML pages with content are provided</li>
</ul>
<h4 id="cons"> Cons</h4>
<ul>
<li>Need to do a request to the server for each page a user visits which <span>slows</span> down the site</li>
<li><span>Difficult to update</span> since you need to rewrite the same code on multiple pages, e.g., the footer</li>
<li>Has <span>limited functionality</span> and generally doesn't contain dynamic data</li>
</ul>
<h3 id="single-page-application-spa"> Single-Page Application (SPA)</h3>
<ul>
<li>Typical <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> and <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React<i>Content not supported</i></a> application</li>
<li>A single request is made to the server which returns a simple HTML page with the styles and scripts linked</li>
<li>The <span>SPA</span> then handles rendering the page content in the browser, e.g., routing, data, etc.</li>
</ul>
<p>Simple diagram illustrating the process:</p>
<div>
  <i>Content not supported</i>
</div>
<h4 id="pros-2"> Pros</h4>
<ul>
<li><span>Fast</span>, no extra requests are made to the server when navigating to new pages since the <span>SPA</span> handles rendering the pages in the browser</li>
<li>Component driven which means <span>easier updating</span>, e.g., if you want to update the footer you only need to update it in one file</li>
</ul>
<h4 id="cons-2"> Cons</h4>
<ul>
<li><span>More difficult</span> for search engines to crawl and index the site for <span>SEO</span> since the page returned by the server is a simple HTML page</li>
</ul>
<h3 id="server-side-rendered-ssr"> Server-Side Rendered (SSR)</h3>
<ul>
<li>A traditional <a href="https://www.php.net/" target="_blank" rel="noopener noreferrer">PHP<i>Content not supported</i></a> site uses this technique as well as a <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> application using <a href="https://expressjs.com/" target="_blank" rel="noopener noreferrer">Express<i>Content not supported</i></a> and <a href="https://ejs.co/" target="_blank" rel="noopener noreferrer">EJS<i>Content not supported</i></a> for templating</li>
<li>Returns an HTML page that is built on the fly for each request using templates and data</li>
<li>Each page returned is a static HTML page</li>
</ul>
<p>Simple diagram illustrating the process:</p>
<div>
  <i>Content not supported</i>
</div>
<h4 id="pros-3"> Pros</h4>
<ul>
<li><span>SEO-friendly</span> since each request returns a fully rendered HTML page, so a search engine can easily crawl and index the site</li>
<li><span>Easy to update</span> since the server is using a templating system</li>
</ul>
<h4 id="cons-3"> Cons</h4>
<ul>
<li>Since the server has to send back fully rendered HTML pages for each request, it can <span>slow</span> down the page rendering</li>
</ul>
<h3 id="static-site-generator-ssg"> Static Site Generator (SSG)</h3>
<ul>
<li>An <span>SSG</span> creates pre-rendered static HTML pages using a combination of templates, components, and data</li>
<li>These static HTML pages are generated at build-time, i.e., <span>before</span> deployment</li>
<li>The static pages are then deployed to the web</li>
</ul>
<p>Simple diagram illustrating the process:</p>
<div>
  <i>Content not supported</i>
</div>
<h4 id="pros-4"> Pros</h4>
<ul>
<li><span>SEO-friendly</span> since it returns fully rendered HTML which can then be crawled and indexed</li>
<li>Navigating to new pages is <span>fast</span> since after the initial request the site behaves like a normal <span>SPA</span></li>
<li><span>Easy to update</span> since the site is component driven</li>
</ul>
<h4 id="cons-4"> Cons</h4>
<ul>
<li>Have to rebuild the static pages <span>evey time</span> a change is made to the site, and the build time will <span>increase</span> as more pages are added</li>
</ul>
<h2 id="use-cases-for-ssgs"> Use Cases for SSGs</h2>
<p>Since <span>SSGs</span> create static HTML pages at build-time then behave like an <span>SPA</span>, they are suited for websites that <span>don't</span> have a lot of frequent content changes.</p>
<ul>
<li>Here are some examples:
<ul>
<li>Personal Website/Portfolio</li>
<li>Documentation</li>
<li>Blog</li>
</ul>
</li>
</ul>
<h2 id="how-it-works-in-vuepress"> How it Works in VuePress</h2>
<p>Like other <span>SSGs</span>, the static HTML pages are rendered at build-time. Then the static HTML pages are deployed to the web.</p>
<p>Once the page is loaded, <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> takes control of the static content and the site behaves like an <span>SPA</span>. The <span>SPA</span> is powered by <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a>, <a href="https://router.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Router<i>Content not supported</i></a>, and <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">webpack<i>Content not supported</i></a>.</p>
<p>Each Markdown file gets compiled into HTML with <a href="https://markdown-it.github.io/" target="_blank" rel="noopener noreferrer">markdown-it<i>Content not supported</i></a> which is then processed as the template of a <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> component. This is what enables you to use <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> directly in your Markdown files and also makes it possible to embed dynamic content.</p>
<h2 id="theming"> Theming</h2>
<p>A theme in <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> allows you to control how your project is structured. You can simply use the provided <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, use <a href="https://v1.vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">theme inheritance<i>Content not supported</i></a> to create a child theme based on a parent theme, or <a href="https://v1.vuepress.vuejs.org/theme/writing-a-theme.html" target="_blank" rel="noopener noreferrer">write your own theme<i>Content not supported</i></a>.</p>
<p>Within a theme you are able to create directories that handle <span>global components</span>, <span>components</span>, <span>layouts</span>, <span>styles</span>, and <span>templates</span>. You can also create files for <span>theme configurations</span> and <span>app level enhancements</span>. When writing your own theme the only file that is necessary is Layout.vue, everything else is up to. You can also publish your theme as an <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> package which allows other people to easily install it.</p>
<p>The <a href="/">Code Monkeys Blog</a> is currently a child theme inherited from the default theme. Eventually, I would like to look into publishing it as an <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> package.</p>
<p>We'll go over the directory structure, what each directory in a theme is used for, theme configuration, app level enhancement, and <a href="https://v1.vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">theme inheritance<i>Content not supported</i></a> in future tutorials.</p>
<ul>
<li>Example themes you can check out:
<ul>
<li><span><a href="https://vuepress-theme-meteorlxy.meteorlxy.cn/" target="_blank" rel="noopener noreferrer">vuepress-theme-meteorlxy<i>Content not supported</i></a></span></li>
<li><span><a href="https://vp-modern.z3by.com/" target="_blank" rel="noopener noreferrer">vuepress-theme-modern-blog<i>Content not supported</i></a></span></li>
<li><span><a href="https://succinct.mflash.dev/" target="_blank" rel="noopener noreferrer">vuepress-theme-succinct<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress-theme-hope.github.io/" target="_blank" rel="noopener noreferrer">vuepress-theme-hope<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress-theme-mini.wxsm.space/" target="_blank" rel="noopener noreferrer">vuepress-theme-mini<i>Content not supported</i></a></span></li>
</ul>
</li>
</ul>
<h2 id="plugin-api"> Plugin API</h2>
<p><a href="https://v1.vuepress.vuejs.org/plugin/" target="_blank" rel="noopener noreferrer">Plugins<i>Content not supported</i></a> allow you to add <span>global-level functionality</span> to <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. You can configure them by passing in options. It's also possible to write your own and publish them as <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> packages.</p>
<p>We'll go over installing and configuring <a href="https://v1.vuepress.vuejs.org/plugin/" target="_blank" rel="noopener noreferrer">plugins<i>Content not supported</i></a> in future tutorials.</p>
<ul>
<li>Examples of some plugins:
<ul>
<li><span><a href="https://vuepress-plugin-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-blog<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/plugin/official/plugin-active-header-links.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-active-header-links<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/plugin/official/plugin-back-to-top.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-back-to-top<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/plugin/official/plugin-search.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-search<i>Content not supported</i></a></span></li>
<li><span><a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">@goy/vuepress-plugin-svg-icons<i>Content not supported</i></a></span></li>
</ul>
</li>
</ul>
<h2 id="features"> Features</h2>
<p>Here are some of the features that come with <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>:</p>
<p>Built-in Markdown Extensions</p>
<ul>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/markdown.html#table-of-contents" target="_blank" rel="noopener noreferrer">Table of Contents<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/markdown.html#custom-containers" target="_blank" rel="noopener noreferrer">Custom Containers<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/markdown.html#line-highlighting-in-code-blocks" target="_blank" rel="noopener noreferrer">Line Highlighting<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/markdown.html#line-numbers" target="_blank" rel="noopener noreferrer">Line Numbers<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/markdown.html#import-code-snippets" target="_blank" rel="noopener noreferrer">Import Code Snippets<i>Content not supported</i></a></span></li>
</ul>
<p>Ability to Use Vue In Markdown Files</p>
<ul>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/using-vue.html#templating" target="_blank" rel="noopener noreferrer">Templating<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/guide/using-vue.html#using-components" target="_blank" rel="noopener noreferrer">Using Components<i>Content not supported</i></a></span></li>
</ul>
<p>Vue-powered Custom Theme System</p>
<ul>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/writing-a-theme.html#site-and-page-metadata" target="_blank" rel="noopener noreferrer">Metadata<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/writing-a-theme.html#content-excerpt" target="_blank" rel="noopener noreferrer">Content Excerpt<i>Content not supported</i></a></span></li>
</ul>
<p>A Default Theme with</p>
<ul>
<li>Responsive layout</li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#homepage" target="_blank" rel="noopener noreferrer">Optional Homepage<i>Content not supported</i></a></span></li>
<li>Customizable <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#navbar" target="_blank" rel="noopener noreferrer">Navbar<i>Content not supported</i></a> and <a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#sidebar" target="_blank" rel="noopener noreferrer">Sidebar<i>Content not supported</i></a></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#built-in-search" target="_blank" rel="noopener noreferrer">Simple Out-of-the-Box Header-Based Search<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#algolia-search" target="_blank" rel="noopener noreferrer">Algolia Search<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#last-updated" target="_blank" rel="noopener noreferrer">Last Updated<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#git-repository-and-edit-links" target="_blank" rel="noopener noreferrer">Git Repository and Edit Links<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#custom-layout-for-specific-pages" target="_blank" rel="noopener noreferrer">Custom Layout for Specific Pages<i>Content not supported</i></a></span></li>
<li><span><a href="https://v1.vuepress.vuejs.org/theme/default-theme-config.html#default-code-block" target="_blank" rel="noopener noreferrer">Code Groups and Code Blocks<i>Content not supported</i></a></span></li>
</ul>
<p>It also has a <a href="https://vuepress-theme-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">blog theme<i>Content not supported</i></a>, numerous community themes, official plugins, and community plugins.</p>
<p>You can find a list of these themes, plugins, and more resources at <a href="https://github.com/vuepress/awesome-vuepress" target="_blank" rel="noopener noreferrer">Awesome VuePress<i>Content not supported</i></a>.</p>
<h2 id="comparisons"> Comparisons</h2>
<p>Here are some similar technologies and how they compare with <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>:</p>
<p><span><a href="https://nuxtjs.org/" target="_blank" rel="noopener noreferrer">Nuxt<i>Content not supported</i></a></span></p>
<ul>
<li>Designed for building applications whereas <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> is focused on content-centric static sites with a focus on technical documentation</li>
</ul>
<p><span><a href="https://docsify.js.org/#/" target="_blank" rel="noopener noreferrer">Docsify<i>Content not supported</i></a> / <a href="https://docute.org/" target="_blank" rel="noopener noreferrer">Docute<i>Content not supported</i></a></span></p>
<ul>
<li>Both are runtime-driven, so they're not SEO-friendly</li>
<li>Good if SEO isn't a concern and you don't want to deal with installing dependencies</li>
</ul>
<p><span><a href="https://hexo.io/" target="_blank" rel="noopener noreferrer">Hexo<i>Content not supported</i></a></span></p>
<ul>
<li>Static and string-based theming system, so we're unable to take advantage of <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> for layout and interactivity</li>
<li>Markdown rendering configuration is not that flexible</li>
</ul>
<p><span><a href="https://www.gitbook.com/" target="_blank" rel="noopener noreferrer">GitBook<i>Content not supported</i></a></span></p>
<ul>
<li>Development reload performance is not ideal with a large amount of files</li>
<li>Limiting navigation structure for the default theme</li>
<li>Theming system is not <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> based</li>
</ul>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 3 - Set Up and Installation</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-3/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-3/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 3 - Set Up and Installation</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to set up and install VuePress, then check out VuePress Tutorial 3 - Set Up and Installation! 🍌🐒</description>
      <pubDate>Sun, 16 Jan 2022 05:40:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-3-set-up-and-installation"> VuePress Tutorial 3 - Set Up and Installation</h1>
</template><h2 id="setting-up-and-using-github"> Setting Up and Using GitHub</h2>
<p>First we'll be going over how to create a repository on <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub<i>Content not supported</i></a>. If you plan on using these tutorials as guides and want to start your own project from scratch, then you should create your own repository.</p>
<p>Each tutorial in this series involving code will also have a branch in the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository. If you want the code for a specific tutorial, then you can download a specific branch or clone the repository and switch to one of the remote-tracking branches. We'll go over how to download and clone the code in more detail in the sections below.</p>
<p>You can also download, clone, or fork the current version of the <a href="https://github.com/codemonkeysio/code-monkeys-blog" target="_blank" rel="noopener noreferrer">code-monkeys-blog<i>Content not supported</i></a>.</p>
<p>If you don't have <code>git</code> installed, then check out the <a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git" target="_blank" rel="noopener noreferrer">Installing Git<i>Content not supported</i></a> documentation. Also, if you don't have a GitHub account, then <a href="https://github.com/join" target="_blank" rel="noopener noreferrer">Join GitHub<i>Content not supported</i></a> and <a href="https://docs.github.com/en/get-started/quickstart/set-up-git" target="_blank" rel="noopener noreferrer">Set up Git<i>Content not supported</i></a>.</p>
<h3 id="creating-a-repository"> Creating a Repository</h3>
<p>A repository is a directory where you store the code and other files used in a project. A repository can be a local directory on your computer and can be stored and accessed online from a website like <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub<i>Content not supported</i></a>.</p>
<p>If you want to create your own repository for your own project, then you need to:</p>
<ol>
<li>Go to your profile page, click on the <span>Repositories</span> tab, then click the <span>New</span> button or on any page in the upper right corner, click the <span>+</span> drop-down menu, then select <span>New repository</span></li>
<li>Type a short and descriptive name in the <span>Repository name</span> field</li>
<li>Type a description in the <span>Description</span> field (optional)</li>
<li>Choose if you want the repository to be <span>Public</span> or <span>Private</span></li>
<li>Add a <code>README.md</code> file which you can use to describe your project in more detail and to document how to install and use your project</li>
<li>Add a <code>.gitignore</code> file which is used to ignore specified files and directories when making a commit, I recommend selecting the <span>Node</span> template from the drop-down menu</li>
<li>Add your preferred <span>license</span> which is used to tell others how they can use your code</li>
<li>You can also choose a different default branch name, e.g., <span>master</span> instead of <span>main</span> by clicking on the settings link</li>
<li>Click the <span>Create repository</span> button</li>
</ol>
<p>If you run into any issues when creating the repository or want to learn more, then check out the <a href="https://docs.github.com/en/get-started/quickstart/create-a-repo" target="_blank" rel="noopener noreferrer">Create a Repo<i>Content not supported</i></a> documentation. If you need help determining which license you should use, then check out <a href="https://choosealicense.com/" target="_blank" rel="noopener noreferrer">Choose a License<i>Content not supported</i></a>. You can also learn more about the <code>.gitignore</code> file from the <a href="https://git-scm.com/docs/gitignore" target="_blank" rel="noopener noreferrer">gitignore<i>Content not supported</i></a> documentation.</p>
<p>After successfully creating your repository, you can now clone it to make a local copy on your computer.</p>
<h3 id="cloning-a-repository"> Cloning a Repository</h3>
<p>To clone your newly created repository, you need to:</p>
<ol>
<li>Go to the main page of your repository</li>
<li>Click the <span>Code</span> button and select your preferred method to clone the repositroy, e.g., <span>SSH</span></li>
<li>Copy your preferred remote URL</li>
<li>Replace the example URL below with your copied URL, then run one of the following commands in your preferred directory:</li>
</ol>
<code-group>
<code-block title="SSH">
<div><pre><code><span>git</span> clone git@github.com:<span>&lt;</span>username<span>></span>/<span>&lt;</span>repository-name<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="HTTPS">
<div><pre><code><span>git</span> clone https://github.com/<span>&lt;</span>username<span>></span>/<span>&lt;</span>repository-name<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you run into any issues when cloning the repository or want to learn more, then check out <a href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository" target="_blank" rel="noopener noreferrer">Cloning a Repository<i>Content not supported</i></a> and <a href="https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories" target="_blank" rel="noopener noreferrer">About Remote Repositories<i>Content not supported</i></a>.</p>
<p>The next sections will show you how to download and clone the code from the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h3 id="downloading-tutorials-from-github"> Downloading Tutorials from GitHub</h3>
<p>If you want to download the code for a specific tutorial, then you need to:</p>
<ol>
<li>Go to the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository</li>
<li>Select which branch you want to download, e.g., <span>tutorial-3</span></li>
<li>Click the <span>Code</span> button and select <span>Download ZIP</span></li>
<li>Save the ZIP file to your preferred directory</li>
<li>Unzip the file in your preferred directory</li>
</ol>
<h3 id="cloning-and-using-tutorials-from-github"> Cloning and Using Tutorials from GitHub</h3>
<p>If you want to clone the tutorials, then you need to run one of the following commands in your preferred directory depending on your preferred method:</p>
<code-group>
<code-block title="SSH">
<div><pre><code><span>git</span> clone git@github.com:codemonkeysio/code-monkeys-blog-tutorials.git
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="HTTPS">
<div><pre><code><span>git</span> clone https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you run into any issues when cloning the repository or want to learn more, then check out <a href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository" target="_blank" rel="noopener noreferrer">Cloning a Repository<i>Content not supported</i></a> and <a href="https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories" target="_blank" rel="noopener noreferrer">About Remote Repositories<i>Content not supported</i></a>.</p>
<p>After successfully cloning the repository, you can run the following command to list both the remote-tracking and local branches:</p>
<code-group>
<code-block title="List All Branches">
<div><pre><code><span>git</span> branch -a
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Before switching to one of the remote-tracking branches, run the following command to get all of the latest changes from the remote repository without modifying your working directory:</p>
<code-group>
<code-block title="Fetch All Branches">
<div><pre><code><span>git</span> fetch
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Now, to work on the code for a remote-tracking branch you need to make a local copy of it which you can do by running the following command:</p>
<code-group>
<code-block title="Switch Branches">
<div><pre><code><span>git</span> switch <span>&lt;</span>branch-name<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you get an error when running the above command and the provided branch name exists, then check your version of <code>git</code> by running <code>git --version</code>. You need to be using at least <a href="https://github.com/git/git/blob/master/Documentation/RelNotes/2.23.0.txt" target="_blank" rel="noopener noreferrer">Git 2.23<i>Content not supported</i></a> to use the <code>switch</code> command.</p>
<p>If you have an older version of <code>git</code> or if you prefer to not use the <code>switch</code> command, you can alternatively run the following command to work on the code for a remote-tracking branch:</p>
<code-group>
<code-block title="Using Checkout to Switch Branches">
<div><pre><code><span>git</span> checkout <span>[</span>branch-name<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>The <span>recommended</span> way to switch branches is with the <code>switch</code> command since the <code>checkout</code> command does more than just switching branches which can lead to confusion.</p>
<p>If a remote-tracking branch is updated and you want to integrate those changes into your local branch, then switch to the branch you want to update and run the following command:</p>
<code-group>
<code-block title="Pull Changes">
<div><pre><code><span>git</span> pull
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you edit the code for a branch and attempt to pull, you may run into merge conflicts. You can check out <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/about-merge-conflicts" target="_blank" rel="noopener noreferrer">About Merge Conflicts<i>Content not supported</i></a> to learn more about what they are and how to resolve them.</p>
<h2 id="dependencies"> Dependencies</h2>
<p>Before installing <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>, you first need to have <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js 10+<i>Content not supported</i></a> installed and optionally <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>.</p>
<p>It's recommended to use <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> if either one of the following applies to you:</p>
<ul>
<li>You're using <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">webpack 3.x<i>Content not supported</i></a> in which case you may notice installation issues with <code>npm</code>.</li>
<li>You're going to be closely following along with these turtorials in which case I recommend using <code>v1.22.17</code> since it's the same version being used by the <a href="/">Code Monkeys Blog</a>. This will allow you to avoid any potential issues with packages and with the <a href="https://github.com/features/actions" target="_blank" rel="noopener noreferrer">GitHub Actions<i>Content not supported</i></a> workflow which is used when deploying the site.</li>
</ul>
<div><p>Using the Locally Set Version of Yarn in the Repositories</p>
<p>The <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> and the <a href="https://github.com/codemonkeysio/code-monkeys-blog" target="_blank" rel="noopener noreferrer">code-monkeys-blog<i>Content not supported</i></a> repositories both have a <span>local version</span> of <code>yarn</code> set to <code>v1.22.17</code> in a <code>.yarn/releases</code> directory. This means if you use the code from the repositories, then you'll be able to use the <span>locally set version</span> of <code>yarn</code> instead of having to install the specific <span>local version</span> of <code>yarn</code> yourself.</p>
</div>
<p>The next sections will show you how to check your current versions of <code>node</code> and <code>yarn</code>.</p>
<p>If you don't have <code>node</code> or <code>yarn</code> installed or you want to change the versions, then check out the provided resources explaining how to install specific versions.</p>
<h3 id="checking-node-version"> Checking Node Version</h3>
<p>To check if you have <code>node</code> installed run the following command:</p>
<code-group>
<code-block title="Check Node Version">
<div><pre><code>node -v
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you see an output of <code>v10.xx.xx</code> or greater, then you can continue on with the <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> installation.</p>
<div><p>Code Monkeys Blog Node Version</p>
<p>The <a href="/">Code Monkeys Blog</a> is currently using <a href="https://nodejs.org/dist/v16.11.1/docs/api/" target="_blank" rel="noopener noreferrer">Node.js v16.11.1<i>Content not supported</i></a>. If you're going to be closely following along with these turtorials, then I recommend using the same version to avoid any potential issues.</p>
</div>
<p>If you don't see the proper output or want to use the same version in these tutorials, then you need to either install or upgrade <code>node</code>.</p>
<p>To install a <span>system version</span> of <code>node</code> you can go to <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a> and download a compatible version.</p>
<p>If you previously installed a <span>system version</span> of <code>node</code> from <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<i>Content not supported</i></a>, then you can go back to the site and download a newer version to upgrade your current version.</p>
<p>If you're a developer that needs to use multiple versions of <code>node</code> when working on different projects, then I recommend using a <span>node version manager</span>. Before installing a <span>node version manager</span> like <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a> or <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a>, I recommend uninstalling your <span>system version</span> of <code>node</code>, <code>npm</code>, and any globally installed <code>npm</code> packages to avoid potential issues.</p>
<p>Check out these posts <a href="/installing-nvm/">Installing Node Version Manager (nvm)</a> and <a href="/installing-fnm/">Installing Fast Node Manager (fnm)</a> to learn how to install and use them.</p>
<div><p>Preferred Node Version Manager</p>
<p>My <span>preferred</span> way to manage my node versions is with <a href="https://github.com/Schniz/fnm" target="_blank" rel="noopener noreferrer">fnm<i>Content not supported</i></a> since it's much faster than <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<i>Content not supported</i></a>.</p>
</div>
<p>After installing a compatible version of <code>node</code>, you will now have <code>npm</code> the default package manager for <code>node</code>. If you prefer you can use <code>npm</code> to install <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. However, if you're going to be closely following along with these tutorials, then I recommend using <code>yarn</code>.</p>
<h3 id="checking-yarn-version"> Checking Yarn Version</h3>
<p>To check if you have <code>yarn</code> installed run the following command:</p>
<code-group>
<code-block title="Check Yarn Version">
<div><pre><code><span>yarn</span> -v
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you don't see your preferred version of <code>yarn</code>, then it's recommended to install or upgrade a <span>global version</span> of <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a> which can then be used to set a <span>local version</span> of <code>yarn</code> for the project.</p>
<p>To learn more about how to install a <span>global version</span> of <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn 1<i>Content not supported</i></a>, how to use the <span>global version</span> to set a <span>local version</span> of <code>yarn</code> for a project, and other commonly used commands check out the <a href="/installing-yarn-1/">Installing Yarn 1</a> post.</p>
<p>If you created your own repository and are using a <span>locally set version</span> of <code>yarn</code>, then be sure to update your <code>.gitignore</code> file and add a <code>.gitattributes</code> file as described in the <a href="/installing-yarn-1/">Installing Yarn 1</a> post.</p>
<div><p>Recommended Version and Repositories Reminder</p>
<p>Remember the recommended version of <code>yarn</code> to use with your project if you're closely following along with these tutorials is <code>v1.22.17</code>. Also, if you use the code from the repositories, then there will be a provided <span>local version</span> of <code>yarn</code> which you can use instead of installing the specific <span>local version</span> yourself.</p>
</div>
<h3 id="installing-tutorial-packages"> Installing Tutorial Packages</h3>
<p>If you downloaded or cloned the code from the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a>, first check your version of <code>yarn</code> by running the following command in the project directory:</p>
<code-group>
<code-block title="Check Yarn Version">
<div><pre><code><span>yarn</span> -v
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If the version of <code>yarn</code> is <code>v1.22.17</code>, then you can install all of the packages being used in the project by running the following command in the root project directory:</p>
<code-group>
<code-block title="Install All Project Packages">
<div><pre><code><span>yarn</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Make sure you're not using the <code>master</code> branch when checking the version since it doesn't have the <code>.yarn</code> directory and that you have a <span>global version</span> of <code>yarn</code> installed.</p>
<p>If you're using your own repository and want to install <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> yourself, then use one of the installation methods described below.</p>
<h2 id="installing-vuepress"> Installing VuePress</h2>
<p>When installing <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> you have the option to use the <a href="https://github.com/vuepress/create-vuepress-site" target="_blank" rel="noopener noreferrer">create-vuepress-site generator<i>Content not supported</i></a> for a quick start installation or a manual installation. We'll go over both of the installation methods, but the future tutorials will be based off of the manual installation.</p>
<h3 id="quick-start"> Quick Start</h3>
<p>Using the generator will help scaffold a basic site structure for you by creating common directories and files found in <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> sites.</p>
<ol>
<li>To use the generator run the following command in your preferred directory using your preferred package manager:</li>
</ol>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> create vuepress-site <span>[</span>optional-directory-name<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code>npx create-vuepress-site <span>[</span>optional-directory-name<span>]</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the above command, you'll be asked to answer some questions. You can enter custom values for each question or press enter to accept any defaults. Here's an example of running the command in a directory named <code>quick-start-project</code>:</p>
<code-group>
<code-block title="Quick Start Questions">
<div><pre><code>Whats the name of your project? quick-start-project
Whats the description of your project? Learning VuePress
Whats your email? youremail@example.com
Whats your name? Your Name
Whats the repo of your project? https://github.com/github-username/quick-start-project
   create docs/.gitignore
   create docs/package.json
   create docs/src/.vuepress/components/demo-component.vue
   create docs/src/.vuepress/components/Foo/Bar.vue
   create docs/src/.vuepress/components/OtherComponent.vue
   create docs/src/.vuepress/config.js
   create docs/src/.vuepress/enhanceApp.js
   create docs/src/.vuepress/styles/index.styl
   create docs/src/.vuepress/styles/palette.styl
   create docs/src/config/README.md
   create docs/src/guide/README.md
   create docs/src/guide/using-vue.md
   create docs/src/index.md
✨ File Generate Done
Done <span>in</span> <span>38</span>.23s.
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br></div></div></code-block>
</code-group>
<p>The scaffolded basic site is created in a <code>docs</code> directory in your current directory which in the example above was <code>quick-start-project</code>. All of the created directories and files are listed above.</p>
<p>If you're using <code>npm</code> you'll see a <code>.npmignore</code> file in the <code>docs</code> directory instead of a <code>.gitignore</code> file.</p>
<div><p>Using an Optional Directory Name</p>
<p>If you passed an optional directory name, then the scaffolded basic site is created in the given directory in a <code>docs</code> directory.</p>
</div>
<p>The answers given to the questions can be found in the <code>docs</code> directory in the <code>package.json</code> file which contains your site's metadata.</p>
<p>Here's the contents of the <code>package.json</code> file from the example above:</p>
<code-group>
<code-block title="package.json">
<div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"quick-start-project"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"0.0.1"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learning VuePress"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"authors"</span><span>:</span> <span>{</span>
    <span>"name"</span><span>:</span> <span>"Your Name"</span><span>,</span>
    <span>"email"</span><span>:</span> <span>"youremail@example.com"</span>
  <span>}</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>"https://github.com/github-username/quick-start-project.git"</span><span>,</span>
  <span>"scripts"</span><span>:</span> <span>{</span>
    <span>"dev"</span><span>:</span> <span>"vuepress dev src"</span><span>,</span>
    <span>"build"</span><span>:</span> <span>"vuepress build src"</span>
  <span>}</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"MIT"</span><span>,</span>
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"vuepress"</span><span>:</span> <span>"^1.5.3"</span>
  <span>}</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br></div></div></code-block>
</code-group>
<p>We'll be covering the contents of the <code>package.json</code> file in the next tutorial. If you're interested in learning more now, then check out the <a href="https://nodejs.dev/learn/the-package-json-guide" target="_blank" rel="noopener noreferrer">package.json guide<i>Content not supported</i></a>.</p>
<ol start="2">
<li>To see your newly created site, navigate to the <code>docs</code> directory:</li>
</ol>
<code-group>
<code-block title="Navigate to docs Directory">
<div><pre><code><span>cd</span> docs
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<ol start="3">
<li>Install your site's packages using your preferred package manager:</li>
</ol>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> <span>install</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div><p>Installing the Same VuePress Version</p>
<p>The above command will install the latest version. If you want to install the same version being used in the tutorials and blog, then run <code>yarn upgrade vuepress@1.8.2</code>.</p>
</div>
<ol start="4">
<li>Start the hot reloading local development server:</li>
</ol>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> dev
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> run dev
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Your site should now be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a>.</p>
<h3 id="manual-installation"> Manual Installation</h3>
<p>The manual installation method allows you to start building your site from scratch unlike the quick start method which scaffolds a basic site structure for you.</p>
<p>As mentioned above, the following tutorials will be based off of the manual installation method.</p>
<div><p>Using an Existing Project</p>
<p>If you already have an existing project and you would like to keep the documentation inside of it, then start from the third command.</p>
</div>
<ol>
<li>Navigate to your preferred directory which should be where you cloned your site's repository:</li>
</ol>
<code-group>
<code-block title="Navigate to Preferred Directory">
<div><pre><code><span>cd</span> <span>&lt;</span>preferred-directory<span>></span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<ol start="2">
<li>Initialize your project with your preferred package manager:</li>
</ol>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> init
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> init
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>After running the above command, you'll be asked to answer several questions. You can enter custom values for each question or press enter to accept any defaults. Here's an example of running the command in a directory named <code>project-directory</code>:</p>
<code-group>
<code-block title="Project Questions">
<div><pre><code>question name <span>(</span>project-directory<span>)</span>:
question version <span>(</span><span>1.0</span>.0<span>)</span>:
question description: Learning VuePress
question entry point <span>(</span>index.js<span>)</span>:
question repository url: https://github.com/github-username/project-directory.git
question author: Your Name
question license <span>(</span>MIT<span>)</span>:
question private:
success Saved package.json
Done <span>in</span> <span>40</span>.63s.
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>After answering all of the questions, a <code>package.json</code> file containing the answers is created. The <code>package.json</code> file is used to describe metadata about your site.</p>
<p>Here's the contents of the <code>package.json</code> file from the example above:</p>
<code-group>
<code-block title="package.json">
<div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"project-directory"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.0.0"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learning VuePress"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>"https://github.com/github-username/project-directory.git"</span><span>,</span>
  <span>"author"</span><span>:</span> <span>"Your Name"</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"MIT"</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br></div></div></code-block>
</code-group>
<p>We'll be covering the contents of the <code>package.json</code> file in the next tutorial. If you're interested in learning more now, then check out the <a href="https://nodejs.dev/learn/the-package-json-guide" target="_blank" rel="noopener noreferrer">package.json guide<i>Content not supported</i></a>.</p>
<ol start="3">
<li>Install <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>:</li>
</ol>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> <span>add</span> -D vuepress
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> <span>install</span> -D vuepress
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div><p>Installing the Same VuePress Version</p>
<p>The above command will install the latest version. If you want to install the same version being used in the tutorials and blog, then run <code>yarn upgrade vuepress@1.8.2</code>.</p>
</div>
<ol start="4">
<li>Create a <code>docs</code> directory and your first document:</li>
</ol>
<code-group>
<code-block title="Create Your First Document">
<div><pre><code><span>mkdir</span> docs <span>&amp;&amp;</span> <span>echo</span> <span>'# Hello VuePress'</span> <span>></span> docs/README.md
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<ol start="5">
<li>Add the following <code>scripts</code> object to your <code>package.json</code> file:</li>
</ol>
<code-group>
<code-block title="Scripts Object">
<div><pre><code><span>"scripts"</span><span>:</span> <span>{</span>
  <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
  <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>Here's the contents of the <code>package.json</code> file from the example above after installing <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> and adding the <code>scripts</code> object:</p>
<code-group>
<code-block title="package.json">
<div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"project-directory"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.0.0"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learning VuePress"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>"https://github.com/github-username/project-directory.git"</span><span>,</span>
  <span>"author"</span><span>:</span> <span>"Your Name"</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"MIT"</span><span>,</span>
  <span>"scripts"</span><span>:</span> <span>{</span>
    <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
    <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span>
  <span>}</span><span>,</span>
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"vuepress"</span><span>:</span> <span>"^1.9.5"</span>
  <span>}</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br></div></div></code-block>
</code-group>
<ol start="6">
<li>Start the hot reloading local development server:</li>
</ol>
<code-group>
<code-block title="Yarn">
<div><pre><code><span>yarn</span> docs:dev
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> run docs:dev
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>Your site should now be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a>.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll be summarizing our current directory structure as well as going over the recommended <a href="https://vuepress.vuejs.org/guide/directory-structure.html" target="_blank" rel="noopener noreferrer">directory structure<i>Content not supported</i></a> for a <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 19 - Pagination Links</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-19/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-19/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 19 - Pagination Links</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Ready to learn how to add the pagination links to the IndexPost layout component, then check out VuePress Tutorial 19 - Pagination Links! 🍌🐒</description>
      <pubDate>Sat, 19 Nov 2022 20:47:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-19-pagination-links"> VuePress Tutorial 19 - Pagination Links</h1>
</template><h2 id="what-we-re-doing"> What We're Doing</h2>
<p>Every time we navigate to the entry page or the second page in the list of <span>pagination</span> pages we have to manually input the URL into the search bar of the browser which isn't a great user experience. To resolve this issue we're going to be adding <span>pagination</span> links to each of the <span>pagination</span> pages.</p>
<p>To accomplish this we'll be using the following properties provided by the blog plugin <a href="https://vuepress-plugin-blog.billyyyyy3320.com/client-api/" target="_blank" rel="noopener noreferrer">Client API<i>Content not supported</i></a>:</p>
<ul>
<li><code>$pagination.hasPrev</code></li>
<li><code>$pagintaion.prevLink</code></li>
<li><code>$pagination.hasNext</code></li>
<li><code>$pagintaion.nextLink</code></li>
</ul>
<p>Before, we use the properties to add the <span>pagination</span> links, we're going to add two more example posts to the blog. This will allow us to view the <span>pagination</span> links in every scenario, i.e., when there isn't a previous page, when there isn't a next page, and when there is a previous page and a next page.</p>
<p>You can view all of the code in this tutorial by going to the tutorial-19 branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-19" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h2 id="adding-more-example-pages"> Adding More Example Pages</h2>
<p>We'll be adding the following example pages to the <code>_posts</code> directory:</p>
<ul>
<li><code>2022-07-14-example-page-4.md</code></li>
<li><code>2022-11-10-example-page-5.md</code></li>
</ul>
<p>The <code>_posts</code> directory for your site should now look like this:</p>
<pre><code><p>.
├── <code>_posts</code>
│   ├── 2020-07-03-example-page-1.md
│   ├── 2021-11-16-example-page-2.md
│   ├── 2022-05-08-example-page-3.md
│   ├── 2022-07-14-example-page-4.md
│   └── 2022-11-10-example-page-5.md</p>
</code></pre><h3 id="adding-titles-and-frontmatter"> Adding Titles and Frontmatter</h3>
<p>We're now going to add post titles and frontmatter to the example pages we just added like we did for the other example pages.</p>
<p>Here's what the <code>2022-07-14-example-page-4.md</code> file and the <code>2022-11-10-example-page-5.md</code> file look like after adding the titles and frontmatter:</p>
<code-group>
<code-block title="Example Page 4">
<div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 4 preview
<span>img</span><span>:</span> examples/example<span>-</span>post<span>-</span>4/example<span>-</span>post<span>-</span>4.png
<span>alt</span><span>:</span> Example Post 4 Post Picture</span>
<span>---</span></span>

<span><span>#</span> Example Post 4</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Example Page 5">
<div><pre><code><span><span>---</span>
<span><span>preview</span><span>:</span> Example Post 5 preview
<span>img</span><span>:</span> examples/example<span>-</span>post<span>-</span>5/example<span>-</span>post<span>-</span>5.png
<span>alt</span><span>:</span> Example Post 5 Post Picture</span>
<span>---</span></span>

<span><span>#</span> Example Post 5</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<h3 id="adding-images"> Adding Images</h3>
<p>We also need to add the post images for the example pages we just added. We'll do this just like we did in the previous tutorial by creating a directory for each example post inside of the <code>examples</code> directory. Then we'll add the post images to the directories for each example post.</p>
<p>You can download all of the images below from your browser, and they're also available in the <code>tutorial-19</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-19" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<h4 id="example-post-4"> Example Post 4</h4>
<p>For the fourth example post we'll be adding an <code>example-post-4</code> directory inside of the <code>examples</code> directory. Then we'll add the image for the fourth example post which is named <code>example-post-4.png</code> inside of the <code>example-post-4</code> directory.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>examples</code>
│   ├── <code>example-post-1</code>
│   ├── <code>example-post-2</code>
│   ├── <code>example-post-3</code>
│   ├── <code>example-post-4</code>
│   │   └── example-post-4.png</p>
</code></pre><p>Here's the example post 4 image:</p>
<div>
  <i>Content not supported</i>
</div>
<h4 id="example-post-5"> Example Post 5</h4>
<p>For the fifth example post we'll be adding an <code>example-post-5</code> directory inside of the <code>examples</code> directory. Then we'll add the image for the fifth example post which is named <code>example-post-5.png</code> inside of the <code>example-post-5</code> directory.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>examples</code>
│   ├── <code>example-post-1</code>
│   ├── <code>example-post-2</code>
│   ├── <code>example-post-3</code>
│   ├── <code>example-post-4</code>
│   ├── <code>example-post-5</code>
│   │   └── example-post-5.png</p>
</code></pre><p>Here's the example post 5 image:</p>
<div>
  <i>Content not supported</i>
</div>
<h3 id="viewing-the-pagination-pages"> Viewing the Pagination Pages</h3>
<p>After adding the titles and frontmatter to the example pages and adding the post images, you should now have the following <span>pagination</span> pages:</p>
<ul>
<li><span><a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a></span></li>
<li><span><a href="http://localhost:8080/posts/page/3/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/3/<i>Content not supported</i></a></span></li>
</ul>
<p>Having these three <span>pagination</span> pages will allow us to view the <span>pagination</span> links in every scenario that we mentioned in the beginning of the post.</p>
<div><p>Order of Posts</p>
<p>The order of the posts may not be what you're expecting and may change each time you start the local development server. This is because the blog plugin uses a <code>date</code> property to sort the posts which it looks for on the frontmatter of each post page. Since we haven't added a <code>date</code> custom variable to the frontmatter blocks for the post pages, the blog plugin will not sort the posts in a predictable way. We'll fix this issue in a future tutorial by adding the <code>date</code> custom variable to the frontmatter blocks of the post pages.</p>
</div>
<p>If you have any questions about adding the example pages to the <code>_posts</code> directory, adding titles to the post pages, adding the frontmatter to the post pages, and/or adding the post images, then check out the relevant sections from the previous tutorials:</p>
<ul>
<li><a href="/vuepress-tutorial-15/#directory-classification">VuePress Tutorial 15 - Blog Plugin</a></li>
<li><a href="/vuepress-tutorial-17/#post-titles">VuePress Tutorial 17 - IndexPost Layout</a></li>
<li><a href="/vuepress-tutorial-18/#adding-post-images">VuePress Tutorial 18 - IndexPost Images</a></li>
</ul>
<h2 id="displaying-pagination-links"> Displaying Pagination Links</h2>
<p>We're now ready to use the properties provided by the blog plugin <a href="https://vuepress-plugin-blog.billyyyyy3320.com/client-api/" target="_blank" rel="noopener noreferrer">Client API<i>Content not supported</i></a> to add the <span>pagination</span> links to the <span>pagination</span> pages.</p>
<p>We're going to display the <span>pagination</span> links using two <code>router-link</code> components one for the previous page and one for the next page. We'll be wrapping each <code>router-link</code> component in a <code>div</code> tag.</p>
<p>We'll then wrap the <code>div</code> tags inside another <code>div</code> tag which we'll place underneath the <code>div</code> tag that is being used to loop over the <span>pagination</span> pages.</p>
<p>The <code>router-link</code> component is provided by <a href="https://v3.router.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Router<i>Content not supported</i></a> which gets installed when installing <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. The <code>router-link</code> component is used for enabling user navigation for the site. The target location for the link is specified by using the <code>to</code> prop, and it renders as an <code>a</code> tag with the specified <code>href</code> by default.</p>
<p>If you want to learn more about the <code>router-link</code> component, then check out the <a href="https://v3.router.vuejs.org/api/#router-link" target="_blank" rel="noopener noreferrer">&lt;router-link&gt;<i>Content not supported</i></a> documentation.</p>
<p>To display the <span>pagination</span> link for the previous page we'll be using the <code>$pagination.hasPrev</code> property to check if the current <span>pagination</span> page has a previous page. We'll use the <code>$pagination.prevLink</code> property to provide the path of the previous <span>pagination</span> page to the <code>router-link</code> component <code>to</code> prop.</p>
<p>Similarly, to display the <span>pagination</span> link for the next page we'll be using the <code>$pagination.hasNext</code> property to check if the current <span>pagination</span> page has a next page. We'll use the <code>$pagination.nextLink</code> property to provide the path of the next <span>pagination</span> page to the <code>router-link</code> component <code>to</code> prop.</p>
<p>We discussed the properties above in detail in the <a href="/vuepress-tutorial-16/#client-api">VuePress Tutorial 16 - Pagination</a> post, so if you need a refresher or if you have any questions read through the relevant sections in that post.</p>
<p>The <code>IndexPost.vue</code> file should now look like this:</p>
<code-group>
<code-block title="Displaying the Pagination Links">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>v-for</span><span><span>=</span><span>"</span>post in $pagination.pages<span>"</span></span> <span>:key</span><span><span>=</span><span>"</span>post.key<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>h2</span><span>></span></span>
            {{ post.title }}
          <span><span><span>&lt;/</span>h2</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>p</span><span>></span></span>
          {{ post.frontmatter.preview }}
        <span><span><span>&lt;/</span>p</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>img</span>
          <span>:src</span><span><span>=</span><span>"</span>`/images/${post.frontmatter.img}`<span>"</span></span>
          <span>:alt</span><span><span>=</span><span>"</span>post.frontmatter.alt || <span>'</span>Post Picture<span>'</span><span>"</span></span>
        <span>/></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasPrev<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.prevLink<span>"</span></span><span>></span></span>
          Prev
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>router-link</span> <span>v-if</span><span><span>=</span><span>"</span>$pagination.hasNext<span>"</span></span> <span>:to</span><span><span>=</span><span>"</span>$pagination.nextLink<span>"</span></span><span>></span></span>
          Next
        <span><span><span>&lt;/</span>router-link</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'IndexPost'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br></div></div></code-block>
</code-group>
<p>Here we're using the <code>v-if</code> directive to conditionally render the <span>pagination</span> links by using the values of the <code>$pagination.hasPrev</code> and <code>$pagination.hasNext</code> properties. The block of code using the <code>v-if</code> directive will only be rendered if the expression provided to it returns a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy" target="_blank" rel="noopener noreferrer">truthy<i>Content not supported</i></a> value.</p>
<p>We're also binding the <code>to</code> prop by placing a <code>:</code> before it which is shorthand for <code>v-bind</code>. Using <code>v-bind</code> allows us to bind JavaScript expressions to the HTML attributes.</p>
<p>If you have any questions or want to learn more about conditional rendering or <code>v-bind</code>, then check these resources:</p>
<ul>
<li><span><a href="https://v2.vuejs.org/v2/guide/conditional.html" target="_blank" rel="noopener noreferrer">Conditional Rendering<i>Content not supported</i></a></span></li>
<li><span><a href="https://v2.vuejs.org/v2/api/#v-bind" target="_blank" rel="noopener noreferrer">v-bind<i>Content not supported</i></a></span></li>
<li><span><a href="https://masteringjs.io/tutorials/vue/bind" target="_blank" rel="noopener noreferrer">Using v-bind in Vue<i>Content not supported</i></a></span></li>
</ul>
<h3 id="entry-page-html"> Entry Page HTML</h3>
<p>After updating the <code>IndexPost.vue</code> file with the code above, if you navigate to the entry page <a href="http://localhost:8080/posts/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/<i>Content not supported</i></a> you should now see the Next <span>pagination</span> link being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>You should now be able to click on the Next <span>pagination</span> link, and it should take you to the next page in the list of <span>pagination</span> pages.</p>
<p>The HTML for the <code>body</code> tag for the entry page should now look something like this:</p>
<code-group>
<code-block title="Entry Page HTML">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 1 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 1 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
             <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-1/example-post-1.png<span>"</span></span>
                  <span>alt</span><span><span>=</span><span>"</span>Exmple Post 1 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 2 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 2 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-2/example-post-2.png<span>"</span></span>
                 <span>alt</span><span><span>=</span><span>"</span>Example Post 2 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span>&lt;!----></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/page/2/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span><span>"</span></span><span>></span></span> Next <span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br></div></div></code-block>
</code-group>
<h3 id="page-2-html"> Page 2 HTML</h3>
<p>If you navigate to the second page <a href="http://localhost:8080/posts/page/2/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/2/<i>Content not supported</i></a> you should now see the Prev and Next <span>pagination</span> links being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>You should be able to click on the Prev <span>pagination</span> link, and it should take you to the previous page. You should also be able to click on the Next <span>pagination</span> link, and it should take you to the next page.</p>
<p>The HTML for the <code>body</code> tag for the second page should now look something like this:</p>
<code-group>
<code-block title="Page 2 HTML">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 3 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 3 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
             <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-3/example-post-3.png<span>"</span></span>
                  <span>alt</span><span><span>=</span><span>"</span>Exmple Post 3 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 4 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 4 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-4/example-post-4.png<span>"</span></span>
                 <span>alt</span><span><span>=</span><span>"</span>Example Post 4 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>router-link-active<span>"</span></span><span>></span></span> Prev <span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/page/3/<span>"</span></span> <span>class</span><span>></span></span> Next <span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br></div></div></code-block>
</code-group>
<h3 id="page-3-html"> Page 3 HTML</h3>
<p>If you navigate to the third page <a href="http://localhost:8080/posts/page/3/" target="_blank" rel="noopener noreferrer">http://localhost:8080/posts/page/3/<i>Content not supported</i></a> you should now see the Prev <span>pagination</span> link being displayed with some styling provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#default-theme-config" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>You should be able to click on the Prev <span>pagination</span> link, and it should take you to the previous page.</p>
<p>The HTML for the <code>body</code> tag for the third page should now look something like this:</p>
<code-group>
<code-block title="Page 3 HTML">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>body</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>h1</span><span>></span></span>The Scribblings of a Monkey!!!<span><span><span>&lt;/</span>h1</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span><span>></span></span>
              <span><span><span>&lt;</span>h2</span><span>></span></span> Example Post 5 <span><span><span>&lt;/</span>h2</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>p</span><span>></span></span> Example Post 5 preview <span><span><span>&lt;/</span>p</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
             <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/examples/example-post-5/example-post-5.png<span>"</span></span>
                  <span>alt</span><span><span>=</span><span>"</span>Exmple Post 5 Post Picture<span>"</span></span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/page/2/<span>"</span></span> <span>class</span><span>></span></span> Prev <span><span><span>&lt;/</span>a</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span><span>></span></span>
            <span>&lt;!----></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>footer</span> <span>data-v-60ae214a</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>footer</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>body</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br></div></div></code-block>
</code-group>
<h3 id="next-steps"> Next Steps</h3>
<p>You may have noticed the styling of the Prev and Next <span>pagination</span> links doesn't look too good, so in the next tutorial we'll begin styling these links. We'll also be adding left and right arrow icons to the Prev and Next <span>pagination</span> links, respectively.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 4 - Directory Structure</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-4/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-4/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 4 - Directory Structure</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to structure your VuePress site, then check out VuePress Tutorial 4 - Directory Structure! 🍌🐒</description>
      <pubDate>Sat, 22 Jan 2022 16:55:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-4-directory-structure"> VuePress Tutorial 4 - Directory Structure</h1>
</template><h2 id="current-directory-structure"> Current Directory Structure</h2>
<p>We're going to start with an overview of the current directory structure from the previous tutorial. Then we'll describe the recommended directory structure for a <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site.</p>
<p>The current directory structure of the project is based off of creating a repository for your project on <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub<i>Content not supported</i></a>, cloning the repository, setting a <span>local version</span> of <code>yarn</code> for your project, and doing a manual installation of <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. This means if you're not using a <span>local version</span> of <code>yarn</code> and/or did a quick start installation your current directory structure will be a little different.</p>
<p>Here's the current directory structure of the project:</p>
<pre><code><p>.
├── <code>.yarn</code> <em>(<strong>Optional</strong>)</em>
│   ├── <code>releases</code>
│   │   └── yarn-1.22.17.cjs
├── <code>docs</code>
│   └── README.md
├── <code>node_modules</code>
├── .gitattributes <em>(<strong>Optional</strong>)</em>
├── .gitignore
├── .yarnrc <em>(<strong>Optional</strong>)</em>
├── LICENSE
├── package.json
├── README.md
└── yarn.lock</p>
</code></pre><ul>
<li><code>.yarn/releases</code>: Stores a <span>local version</span> of <code>yarn</code> for the project which ensures everyone working on the project is using the same version. If you didn't set a <span>local version</span> of <code>yarn</code> for your project, you won't have this directory.</li>
<li><code>.yarn/releases/yarn-1.22.17.cjs</code>: Specific <span>local version</span> of <code>yarn</code> used in the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> and the <a href="https://github.com/codemonkeysio/code-monkeys-blog" target="_blank" rel="noopener noreferrer">code-monkeys-blog<i>Content not supported</i></a> repositories. The file name will be different if you're using a different version.</li>
<li><code>docs/README.md</code>: The first document for the site which will be used as the homepage.</li>
<li><code>node_modules</code>: Contains all of the code for the installed packages.</li>
<li><code>.gitattributes</code>: Used to prevent <code>git</code> from showing large diffs when you add or update <span>local versions</span> of <code>yarn</code>. If you didn't set a <span>local version</span> of <code>yarn</code> for your project, you won't have this file.</li>
<li><code>.gitignore</code>: Ignores specified files and directories when making a commit to your repository.</li>
<li><code>.yarnrc</code>: Instructs your <span>global version</span> of <code>yarn</code> to use the specified <span>local version</span> in the project. If you didn't set a <span>local version</span> of <code>yarn</code> for your project, you won't have this file.</li>
<li><code>LICENSE</code>: Tells others how they can use your code.</li>
<li><code>package.json</code>: Describes metadata about your site.</li>
<li><code>README.md</code>: Used to describe your project in more detail and to document how to install and use your project.</li>
<li><code>yarn.lock</code>: Keeps track of the exact versions of packages installed in the project. If you're using <code>npm</code> you'll have a <code>package-lock.json</code> file instead.</li>
</ul>
<div><p>Reminder to Update the .gitattributes and .gitignore Files</p>
<p>If you created your own repository and are using a <span>locally set version</span> of <code>yarn</code>, then be sure to update your <code>.gitignore</code> file and add a <code>.gitattributes</code> file as described in the <a href="/installing-yarn-1/">Installing Yarn 1</a> post.</p>
</div>
<h2 id="contents-of-the-package-json-file"> Contents of the package.json File</h2>
<p>Before moving on to the recommended directory structure, we're going to first go over the contents of the <code>package.json</code> file and add some simple updates.</p>
<p>The properties of your <code>package.json</code> file may be different depending on how you answered the questions when initializing your project and if you used the quick start installation method instead of the manual installation method. If you want to update any properties or values, you can edit your <code>package.json</code> file directly.</p>
<p>If you plan on publishing your project to the <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> registry, then take a look at the <a href="https://docs.npmjs.com/cli/v8/configuring-npm/package-json" target="_blank" rel="noopener noreferrer">npm package.json<i>Content not supported</i></a> documentation to make sure you are following all of the specifications.</p>
<p>Here's what the contents of the <code>package.json</code> file looks like for the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a>:</p>
<code-group>
<code-block title="package.json">
<div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"code-monkeys-blog-tutorials"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.0.0"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git"</span><span>,</span>
  <span>"author"</span><span>:</span> <span>"J the Code Monkey"</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"GPL-3.0-or-later"</span><span>,</span>
  <span>"scripts"</span><span>:</span> <span>{</span>
    <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
    <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span>
  <span>}</span><span>,</span>
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"vuepress"</span><span>:</span> <span>"1.8.2"</span>
  <span>}</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br></div></div></code-block>
</code-group>
<p>The <code>package.json</code> file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">semantic versioning (semver)<i>Content not supported</i></a>.</p>
<p>Let's describe each property in a little more detail:</p>
<ul>
<li><code>name</code> is the name given to your project</li>
<li><code>version</code> indicates the current version of your project
<ul>
<li>The versioning follows <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">semver<i>Content not supported</i></a> notation</li>
</ul>
</li>
<li><code>description</code> is used to describe and provide more information about your project</li>
<li><code>main</code> is a JavaScript file that starts the execution of your project</li>
<li><code>repository</code> describes the location of the project repository containing the code
<ul>
<li>You can explicitly set the URL and a version control type in the <code>package.json</code> file by adding, e.g., <code>&quot;repository&quot;: { &quot;type&quot;: &quot;git&quot;, &quot;url&quot;: &quot;https://github.com/github-username/your-project&quot; }</code></li>
</ul>
</li>
<li><code>author</code> describes the creator or owner of the project
<ul>
<li>You can explicitly set the author name, email, and website in the <code>package.json</code> file by adding, e.g., <code>&quot;author&quot;: { &quot;name&quot;: &quot;Your Name&quot;, &quot;email&quot;: &quot;youremail@example.com&quot;, &quot;url&quot;: &quot;https://your-website.com&quot; }</code></li>
</ul>
</li>
<li><code>license</code> indicates the type of license being used by the project</li>
<li><code>scripts</code> are command-line applications that are described as an object where the property is the name of the script and the value is a command that gets run</li>
<li><code>devDependencies</code> are dependencies you need during development only, i.e., not during production</li>
</ul>
<div><p>Installing the Same VuePress Version</p>
<p>If you see a different version of <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> and want to install the same version being used in the tutorials and blog, then you can run <code>yarn upgrade vuepress@1.8.2</code>.</p>
</div>
<p>Now, let's make some simple updates to the <code>package.json</code> file.</p>
<p>To start we're going to be adding a version control type to the <code>repository</code> property by updating it to be <code>&quot;repository&quot;: { &quot;type&quot;: &quot;git&quot;, &quot;url&quot;: &quot;https://github.com/github-username/your-project&quot; }</code>.</p>
<p>Next we're going to be adding an optional email and url to the <code>author</code> property by updating it to be <code>&quot;author&quot;: { &quot;name&quot;: &quot;Your Name&quot;, &quot;email&quot;: &quot;youremail@example.com&quot;, &quot;url&quot;: &quot;https://your-website.com&quot; }</code>.</p>
<p>If you prefer you can also shorten the <code>author</code> property to be one string by defining it like this <code>&quot;author&quot;: &quot;Your Name &lt;youremail@example.com&gt; (https://your-website.com)&quot;</code>.</p>
<p>The email could be a personal or work email, and the url could be a link to a personal website or the website related to your project.</p>
<p>Here's what the contents of the <code>package.json</code> file looks like for the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> after adding the updates:</p>
<code-group>
<code-block title="package.json">
<div><pre><code><span>{</span>
  <span>"name"</span><span>:</span> <span>"code-monkeys-blog-tutorials"</span><span>,</span>
  <span>"version"</span><span>:</span> <span>"1.0.0"</span><span>,</span>
  <span>"description"</span><span>:</span> <span>"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!"</span><span>,</span>
  <span>"main"</span><span>:</span> <span>"index.js"</span><span>,</span>
  <span>"repository"</span><span>:</span> <span>{</span>
    <span>"type"</span><span>:</span> <span>"git"</span><span>,</span>
    <span>"url"</span><span>:</span> <span>"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git"</span>
  <span>}</span><span>,</span>
  <span>"author"</span><span>:</span> <span>{</span>
    <span>"name"</span><span>:</span> <span>"J the Code Monkey"</span><span>,</span>
    <span>"email"</span><span>:</span> <span>"support@codemonkeys.tech"</span><span>,</span>
    <span>"url"</span><span>:</span> <span>"https://codemonkeys.tech/"</span>
  <span>}</span><span>,</span>
  <span>"license"</span><span>:</span> <span>"GPL-3.0-or-later"</span><span>,</span>
  <span>"scripts"</span><span>:</span> <span>{</span>
    <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
    <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span>
  <span>}</span><span>,</span>
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"vuepress"</span><span>:</span> <span>"1.8.2"</span>
  <span>}</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br></div></div></code-block>
</code-group>
<p>Now that we have a good understanding of our current directory structure and the <code>package.json</code> file, let's discuss the recommended directory structure.</p>
<h2 id="recommended-directory-structure"> Recommended Directory Structure</h2>
<p>Here's the recommended directory structure for a standard <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site:</p>
<pre><code><p>.
├── docs
│   ├── .vuepress <em>(<strong>Optional</strong>)</em>
│   │    ├── <code>components</code> <em>(<strong>Optional</strong>)</em>
│   │    ├── <code>public</code> <em>(<strong>Optional</strong>)</em>
│   │    ├── <code>styles</code> <em>(<strong>Optional</strong>)</em>
│   │    │   ├── index.styl
│   │    │   └── palette.styl
│   │    ├── <code>templates</code> <em>(<strong>Optional, Danger Zone</strong>)</em>
│   │    │   ├── dev.html
│   │    │   └── ssr.html
│   │    ├── <code>theme</code> <em>(<strong>Optional</strong>)</em>
│   │    │   └── Layout.vue
│   │    ├── <code>config.js</code> <em>(<strong>Optional</strong>)</em>
│   │    └── <code>enhanceApp.js</code> <em>(<strong>Optional</strong>)</em>
│   │
│   ├── README.md
│   └── example-page
│       └── README.md
│
└── package.json</p>
</code></pre><div><p>Capitalization</p>
<p>When creating these directories and files be sure to follow the capitalization to prevent any potential issues.</p>
</div>
<ul>
<li><code>docs/.vuepress</code>: Stores the global configuration, components, static resources, etc.</li>
<li><code>docs/.vuepress/components</code>: The Vue components in this directory automatically get registered as global components.</li>
<li><code>docs/.vuepress/public</code>: Static resource directory.</li>
<li><code>docs/.vuepress/styles</code>: Stores style related files.</li>
<li><code>docs/.vuepress/styles/index.styl</code>: Used to add global styles that can override the default styles.</li>
<li><code>docs/.vuepress/styles/palette.styl</code>: Used to define global styling variables and override the default styling variables.</li>
<li><code>docs/.vuepress/templates</code>: Stores HTML template files.</li>
<li><code>docs/.vuepress/templates/dev.html</code>: HTML template file for development environment.</li>
<li><code>docs/.vuepress/templates/ssr.html</code>: HTML template file used in the build time.</li>
<li><code>docs/.vuepress/theme</code>: Stores the local theme of the site.</li>
<li><code>docs/.vuepress/theme/Layout.vue</code>: Layout component used by the theme.</li>
<li><code>docs/.vuepress/config.js</code>: Entry file for configuration, can also be <code>yml</code> or <code>toml</code>.</li>
<li><code>docs/.vuepress/enhanceApp.js</code>: App level enhancement.</li>
<li><code>docs/README.md</code>: The first document for the site which will be used as the homepage (same file described in the current directory structure section).</li>
<li><code>docs/example-page/README.md</code>: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., <code>/example-page/</code>.</li>
<li><code>package.json</code>: Describes metadata about your site (same file described in the current directory structure section).</li>
</ul>
<div><p>Using the Recommended Directory Structure for Themes</p>
<p>If you plan on writing your own theme for your site or you plan on closely following along with these tutorials, then be sure to use the recommended directory structure for themes instead of the recommended directory structure for a standard <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site.</p>
</div>
<p>Be sure to check out the <a href="https://vuepress.vuejs.org/guide/directory-structure.html" target="_blank" rel="noopener noreferrer">Directory Structure<i>Content not supported</i></a> documentation if you have any questions.</p>
<h2 id="recommended-directory-structure-for-themes"> Recommended Directory Structure for Themes</h2>
<p>Here's the recommended directory structure if you plan on writing your own theme for your site. Since the <a href="/">Code Monkeys Blog</a> is a child theme inherited from the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, we'll be using the recommended directory structure for themes when developing the blog.</p>
<p>We'll be going over child themes and parent themes in more detail in future tutorials, but if you want to learn more now, you can read through the <a href="https://vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">Theme Inheritance<i>Content not supported</i></a> documentation.</p>
<p>If you're not using a theme when developing your site, you have the option of using the recommended directory structure for a standard <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site. There should only be minor differences when following along with these tutorials.</p>
<p>Only the <code>Layout.vue</code> file is mandatory when writing a theme, but we'll be using the other recommended directories as we continue to develop the blog.</p>
<pre><code><p>.
├── docs
│   ├── .vuepress
│   │   ├── <code>public</code>
│   │   ├── theme
│   │   │   ├── <code>components</code>
│   │   │   ├── <code>global-components</code>
│   │   │   ├── <code>layouts</code>
│   │   │   │   └── Layout.vue <em>(<strong>Mandatory</strong>)</em>
│   │   │   ├── <code>styles</code>
│   │   │   │   ├── index.styl
│   │   │   │   └── palette.styl
│   │   │   ├── <code>templates</code>
│   │   │   │   ├── dev.html
│   │   │   │   └── ssr.html
│   │   │   ├── <code>enhanceApp.js</code>
│   │   │   └── <code>index.js</code>
│   │   └── <code>config.js</code>
│   │
│   ├── README.md
│   └── example-page
│       └── README.md
│
└── package.json</p>
</code></pre><div><p>Capitalization</p>
<p>When creating these directories and files be sure to follow the capitalization to prevent any potential issues.</p>
</div>
<ul>
<li><code>docs/.vuepress</code>: Stores the global configuration, theme, static resources, etc.</li>
<li><code>docs/.vuepress/public</code>: Static resource directory.</li>
<li><code>docs/.vuepress/theme</code>: Stores the theme of the site.</li>
<li><code>theme/components</code>: Stores the Vue components.</li>
<li><code>theme/global-components</code>: The Vue components in this directory automatically get registered as global components.</li>
<li><code>theme/layouts</code>: Stores the layout components used by the theme.</li>
<li><code>theme/layouts/Layout.vue</code>: Mandatory layout component used by the theme.</li>
<li><code>theme/styles</code>: Stores style related files.</li>
<li><code>theme/styles/index.styl</code>: Used to add global styles that can override the default styles.</li>
<li><code>theme/styles/palette.styl</code>: Used to define global styling variables and override the default styling variables.</li>
<li><code>theme/templates</code>: Stores HTML template files.</li>
<li><code>theme/templates/dev.html</code>: HTML template file for development environment.</li>
<li><code>theme/templates/ssr.html</code>: HTML template file used in the build time.</li>
<li><code>theme/enhanceApp.js</code>: Theme level enhancement.</li>
<li><code>theme/index.js</code>: Entry file for theme configuration.</li>
<li><code>docs/.vuepress/config.js</code>: Entry file for configuration, can also be <code>yml</code> or <code>toml</code>.</li>
<li><code>docs/README.md</code>: The first document for the site which will be used as the homepage (same file described in the current directory structure section).</li>
<li><code>docs/example-page/README.md</code>: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., <code>/example-page/</code>.</li>
<li><code>package.json</code>: Describes metadata about your site (same file described in the current directory structure section).</li>
</ul>
<p>We'll be discussing themes in more detail as we continue to develop the blog. If you want to learn more now though or have any questions, then check out the <a href="https://vuepress.vuejs.org/theme/" target="_blank" rel="noopener noreferrer">Theme<i>Content not supported</i></a> documentation.</p>
<h2 id="default-page-routing"> Default Page Routing</h2>
<p>In the directory structure above we used the <code>docs</code> directory as the <code>targetDir</code>. If you want to learn more about how the <code>targetDir</code> is used, then take a look at the <a href="https://vuepress.vuejs.org/api/cli.html" target="_blank" rel="noopener noreferrer">Command-line Interface<i>Content not supported</i></a> documentation.</p>
<p>To see an example of the <code>docs</code> directory being used as the <code>targetDir</code> we can take a look at the <code>scripts</code> object we defined in the <code>package.json</code> file which is in the root directory of the project. Notice the <code>targetDir</code> gets set as the <code>docs</code> directory for the <code>docs:dev</code> and <code>docs:build</code> scripts:</p>
<code-group>
<code-block title="Scripts Object">
<div><pre><code><span>"scripts"</span><span>:</span> <span>{</span>
  <span>"docs:dev"</span><span>:</span> <span>"vuepress dev docs"</span><span>,</span>
  <span>"docs:build"</span><span>:</span> <span>"vuepress build docs"</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>All the relative paths are relative to the <code>docs</code> directory. Here are the relative paths and the default page routing paths for the directory structure described above:</p>
<table>
<thead>
<tr>
<th style="text-align:center">Relative Path</th>
<th style="text-align:center">Page Routing</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><code>/README.md</code></td>
<td style="text-align:center"><code>/</code></td>
</tr>
<tr>
<td style="text-align:center"><code>/example-page/README.md</code></td>
<td style="text-align:center"><code>/example-page/</code></td>
</tr>
</tbody>
</table>
<p>From the table we can see the relative path for the homepage is <code>/README.md</code> and the default page routing path for the homepage is <code>/</code>. We can also see the relative path for the example page is <code>/example-page/README.md</code>, and the default page routing path for the example page is <code>/example-page/</code>.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll discuss the basics of <a href="https://vuepress.vuejs.org/guide/basic-config.html" target="_blank" rel="noopener noreferrer">Configuration<i>Content not supported</i></a>.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 5 - Configuration Basics</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-5/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-5/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 5 - Configuration Basics</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn about the configuration basics for VuePress, then check out VuePress Tutorial 5 - Configuration Basics! 🍌🐒</description>
      <pubDate>Wed, 26 Jan 2022 17:54:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-5-configuration-basics"> VuePress Tutorial 5 - Configuration Basics</h1>
</template><h2 id="adding-a-config-file"> Adding a Config File</h2>
<p>Currently, the site consists of a homepage with a title saying &quot;Hello VuePress&quot; and a search box provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> which builds an index from all <code>h2</code> and <code>h3</code> <a href="https://vuepress.vuejs.org/config/#markdown" target="_blank" rel="noopener noreferrer">markdown<i>Content not supported</i></a> headers and from the <code>title</code> and <code>tags</code> included in the <a href="https://vuepress.vuejs.org/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">frontmatter<i>Content not supported</i></a> of pages.</p>
<p>We'll be discussing the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, <a href="https://vuepress.vuejs.org/config/#markdown" target="_blank" rel="noopener noreferrer">markdown<i>Content not supported</i></a>, and <a href="https://vuepress.vuejs.org/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">frontmatter<i>Content not supported</i></a> in more detail in future tutorials.</p>
<p>To see your site be sure to start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a>.</p>
<p>The site is working, but it doesn't have a lot of functionality or customization. To add more functionality and customization like site navigation with a navbar, a site title, a site description, favicons, etc. we need to add a config file.</p>
<p>Before adding the config file, let's first create a <code>.vuepress</code> directory in the <code>docs</code> directory. The <code>.vuepress</code> directory will be used to store all <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> specific directories and files.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>.yarn</code> <em>(<strong>Optional</strong>)</em>
│   ├── <code>releases</code>
│   │   └── yarn-1.22.17.cjs
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   └── README.md
├── <code>node_modules</code>
├── .gitattributes <em>(<strong>Optional</strong>)</em>
├── .gitignore
├── .yarnrc <em>(<strong>Optional</strong>)</em>
├── LICENSE
├── package.json
├── README.md
└── yarn.lock</p>
</code></pre><p>Now inside of the <code>.vuepress</code> directory, let's add a <code>config.js</code> file.</p>
<p>After adding the <code>config.js</code> file, the directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>.yarn</code> <em>(<strong>Optional</strong>)</em>
│   ├── <code>releases</code>
│   │   └── yarn-1.22.17.cjs
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   └── <code>config.js</code>
│   └── README.md
├── <code>node_modules</code>
├── .gitattributes <em>(<strong>Optional</strong>)</em>
├── .gitignore
├── .yarnrc <em>(<strong>Optional</strong>)</em>
├── LICENSE
├── package.json
├── README.md
└── yarn.lock</p>
</code></pre><p>The <code>config.js</code> file should export a JavaScript object like the following:</p>
<code-group>
<code-block title="config.js File">
<div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span><span>}</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>If you run into any issues when adding the directory and file above, then be sure to check out the <a href="https://vuepress.vuejs.org/guide/basic-config.html" target="_blank" rel="noopener noreferrer">Configuration<i>Content not supported</i></a> documentaion.</p>
<div><p>Alternative Config Formats</p>
<p>In this series we'll be using a JS config file format, i.e., <code>.vuepress/config.js</code>. However, <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> also supports the following config file formats: YAML - <code>.vuepress/config.yml</code>, TOML - <code>.vuepress/config.toml</code>, and TS - <code>.vuepress/config.ts</code>. If you want to use TS, then you need to have a <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> version of <code>1.9.0+</code> installed. See the <a href="https://vuepress.vuejs.org/guide/typescript-as-config.html" target="_blank" rel="noopener noreferrer">TypeScript as Config<i>Content not supported</i></a> documentation for more details.</p>
</div>
<h2 id="config-file-properties"> Config File Properties</h2>
<p>Now that we have added a <code>config.js</code> file, we can begin to add more functionality and customization to the site by setting some of the basic config file properties.</p>
<p>The properties we'll be setting will be using the <code>&lt;head&gt;</code>, <code>&lt;meta&gt;</code>, and <code>&lt;title&gt;</code> tags. To learn more about these tags check out the following references: <a href="https://www.w3schools.com/tags/tag_head.asp" target="_blank" rel="noopener noreferrer">HTML &lt;head&gt; Tag<i>Content not supported</i></a>, <a href="https://www.w3schools.com/tags/tag_meta.asp" target="_blank" rel="noopener noreferrer">HTML &lt;meta&gt; Tag<i>Content not supported</i></a>, and <a href="https://www.w3schools.com/tags/tag_title.asp" target="_blank" rel="noopener noreferrer">HTML &lt;title&gt; Tag<i>Content not supported</i></a>.</p>
<p>As we develop the site we'll be adding more config file properties as needed. For a full list of the available config file properties check out the <a href="https://vuepress.vuejs.org/config/" target="_blank" rel="noopener noreferrer">Config Reference<i>Content not supported</i></a>.</p>
<h3 id="title"> Title</h3>
<p>The <code>title</code> property is used to define the title for the site. The provided value is used to prefix all page titles, and it gets shown in the navbar when using the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> as a link to the homepage.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>undefined</code>.</p>
<p>Now let's set the <code>title</code> of the site:</p>
<code-group>
<code-block title="Adding a Site Title">
<div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<p>After adding the <code>title</code> and saving the file, you should see <code>Code Monkeys</code> or whatever value you set as your site's <code>title</code> in the top left of the navbar as a link to the homepage.</p>
<p>You can also inspect the page, go to the Elements tab, open the <code>&lt;head&gt;</code> tag, and you'll see the following:</p>
<code-group>
<code-block title="Viewing the Title">
<div><pre><code><span><span><span>&lt;</span>head</span><span>></span></span>
  ...
  <span><span><span>&lt;</span>title</span><span>></span></span>Hello VuePress | Code Monkeys<span><span><span>&lt;/</span>title</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>head</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>The value of the <code>&lt;title&gt;</code> tag will be whatever you set as the value for the <code>title</code> of your site.</p>
<div><p>Removing Hello VuePress</p>
<p>When we update the homepage in the next tutorial, we'll remove the <code>Hello VuePress |</code> from the <code>&lt;title&gt;</code> tag.</p>
</div>
<h3 id="description"> Description</h3>
<p>The <code>description</code> property is used to define the description for the site. The provided value is used in a <code>&lt;meta&gt;</code> tag in the <code>&lt;head&gt;</code> tag of the site.</p>
<p>The expected type is a <code>string</code>, and the default value is <code>undefined</code>.</p>
<p>Now let's set the <code>description</code> of the site:</p>
<code-group>
<code-block title="Adding a Description">
<div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>After adding the <code>description</code> and saving the file, you can inspect the page, go to the Elements tab, open the <code>&lt;head&gt;</code> tag, and you'll see the following:</p>
<code-group>
<code-block title="Viewing the Description">
<div><pre><code><span><span><span>&lt;</span>head</span><span>></span></span>
  ...
  <span><span><span>&lt;</span>meta</span> <span>name</span><span><span>=</span><span>"</span>description<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵<span>"</span></span><span>></span></span>
  ...
<span><span><span>&lt;/</span>head</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>The value of the <code>content</code> attribute will be whatever you set as the value for the <code>description</code> of your site.</p>
<h3 id="head"> Head</h3>
<p>The <code>head</code> property is used to inject extra tags into the <code>&lt;head&gt;</code> tag of the site.</p>
<p>The expected type is an <code>array</code>, and the default value is <code>[]</code>.</p>
<p>You can specify a tag to inject into the <code>&lt;head&gt;</code> tag by using the following form: <code>[tagName, { attr1Name: attr1Value, attr2Name: attr2Value, ... }]</code>.</p>
<p>Here are some examples of what can be injected into the <code>&lt;head&gt;</code> tag:</p>
<ul>
<li>Author of the Site</li>
<li>Favicons</li>
<li>Social Media Metadata</li>
<li>Links to External Style Sheets</li>
<li>Client-Side Scripts</li>
</ul>
<p>To start we'll set an <code>author</code> by using a <code>&lt;meta&gt;</code> tag in the <code>&lt;head&gt;</code> tag:</p>
<code-group>
<code-block title="Adding an Author to the Head Tag">
<div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>After adding the <code>author</code> and saving the file, you can inspect the page, go to the Elements tab, open the <code>&lt;head&gt;</code> tag, and you'll see the following:</p>
<code-group>
<code-block title="Viewing the Author">
<div><pre><code><span><span><span>&lt;</span>head</span><span>></span></span>
  ...
  <span><span><span>&lt;</span>meta</span> <span>name</span><span><span>=</span><span>"</span>author<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>J the Code Monkey<span>"</span></span><span>></span></span>
  ...
<span><span><span>&lt;/</span>head</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>To change the <code>author</code> for your site you can use a different value for the <code>content</code> attribute.</p>
<p>We'll be injecting more tags into the <code>&lt;head&gt;</code> tag as we develop the site.</p>
<h2 id="updated-config-file"> Updated Config File</h2>
<p>Here's the content of the <code>config.js</code> file after adding the <code>title</code>, <code>description</code>, and <code>author</code>:</p>
<code-group>
<code-block title="Updated Config File">
<div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  description<span>:</span>
    <span>'Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵'</span><span>,</span>
  head<span>:</span> <span>[</span>
    <span>[</span>
      <span>'meta'</span><span>,</span>
      <span>{</span>
        name<span>:</span> <span>'author'</span><span>,</span>
        content<span>:</span> <span>'J the Code Monkey'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>]</span><span>,</span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br></div></div></code-block>
</code-group>
<p>Be sure to substitute the values with the preferred values for your site.</p>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll discuss the homepage layout provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 7 - Navbar Logo and Links</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-7/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-7/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 7 - Navbar Logo and Links</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to configure the navbar for VuePress, then check out VuePress Tutorial 7 - Navbar Logo and Links! 🍌🐒</description>
      <pubDate>Sat, 12 Mar 2022 17:46:45 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-7-navbar-logo-and-links"> VuePress Tutorial 7 - Navbar Logo and Links</h1>
</template><h2 id="what-is-a-navbar"> What is a Navbar?</h2>
<p>In this tutorial we'll be discussing how to configure the navbar by using the options exposed by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>. A navbar is used to provide users with a quick and easy way to navigate to the main pages of a site. Most sites display the navbar on most or all of the pages, so it's generally designed to be a global component which allows it to be easily shown on all pages.</p>
<p>The navbar for a site made with <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> can consist of a <span>logo</span>, a <span>site title</span>, a <span>search box</span>, <span>internal links</span>, <span>languages the site can be translated to</span>, and <span>external links</span>. Depending on how you want to configure your navbar your site can have all or some of these options. We'll be discussing how to configure the <span>logo</span>, <span>site title</span>, <span>internal links</span>, and <span>external links</span>. We'll also discuss how to disable the navbar globally as well as locally for specific pages.</p>
<p>Take a look at the navbar on this page to see what we'll be designing for the <a href="/">Code Monkeys Blog</a>. To see another example you can check out the <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site navbar as well.</p>
<div><p>Using a Custom Theme</p>
<p>Since the options being used for the navbar are provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, they may be different if you're <a href="https://vuepress.vuejs.org/theme/using-a-theme.html" target="_blank" rel="noopener noreferrer">using a custom theme<i>Content not supported</i></a>.</p>
</div>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<h2 id="navbar-logo-and-site-title"> Navbar Logo and Site Title</h2>
<p>The navbar logo is used to brand your site, and it provides a link to the homepage. The image we're going to be using for the navbar is the Code Monkeys head and shoulders logo. We're going to be adding the image which is named <code>code-monkeys-head-and-shoulders-logo.png</code> to the <code>code-monkeys-logos</code> directory.</p>
<p>The site title in the navbar also provides a link to the homepage, and it's being set by the value of the <code>title</code> property in the <code>config.js</code> file which we set up in a previous tutorial.</p>
<p>After adding the image, the directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>.yarn</code> <em>(<strong>Optional</strong>)</em>
│   ├── <code>releases</code>
│   │   └── yarn-1.22.17.cjs
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   │   ├── <code>images</code>
│   │   │   │   ├── <code>code-monkeys-logos</code>
│   │   │   │   │   ├── code-monkeys-full-logo.png
│   │   │   │   │   └── code-monkeys-head-and-shoulders-logo.png
│   │   └── config.js
│   └── README.md
├── <code>node_modules</code>
├── .gitattributes <em>(<strong>Optional</strong>)</em>
├── .gitignore
├── .yarnrc <em>(<strong>Optional</strong>)</em>
├── LICENSE
├── package.json
├── README.md
└── yarn.lock</p>
</code></pre><p>If the directory structure is confusing you, then be sure to take a look at the <a href="/vuepress-tutorial-6/#adding-an-image">Adding an Image</a> section from the previous tutorial where it's described in more detail. That section also contains links to resources for creating, editing, and compressing images and for coming up with color schemes and palettes for your site.</p>
<p>Here's the Code Monkeys head and shoulders logo:</p>
<div>
  <i>Content not supported</i>
</div>
<p>You can download the logo right here from your browser, and it will also be in the <code>tutorial-7</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-7" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<p>After adding the image to the site, we can reference it in the <code>config.js</code> file as follows:</p>
<code-group>
<code-block title="Adding the Navbar Logo">
<div><div><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>Notice you don't need to include <code>.vuepress/public</code> in the path to the navbar logo because whenever you reference assets stored in the <code>public</code> directory it's added automatically.</p>
<p>Also, notice the value of the site title is being set here by using the <code>title</code> property.</p>
<p>Here's what the HTML looks like after adding the navbar logo:</p>
<code-group>
<code-block title="HTML After Adding the Navbar Logo">
<div><div><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en-US<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>head</span><span>></span></span>...<span><span><span>&lt;/</span>head</span><span>></span></span>
  <span><span><span>&lt;</span>body</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>Code Monkeys<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>logo<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>site-name can-hide<span>"</span></span><span>></span></span>Code Monkeys<span><span><span>&lt;/</span>span</span><span>></span></span>
            <span><span><span>&lt;/</span>a</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 1093px<span>;</span></span><span>"</span></span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>body</span><span>></span></span>
<span><span><span>&lt;/</span>html</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br></div></div></code-block>
</code-group>
<p>You should now see the navbar logo in the upper left of the page.</p>
<h2 id="navbar-links"> Navbar Links</h2>
<p>To add links to the navbar other than to the homepage we need to add a <code>nav</code> property to the <code>themeConfig</code> object. The <code>nav</code> property expects an array of navbar link objects. We're going to start by adding internal links.</p>
<h3 id="internal-links"> Internal Links</h3>
<p>An internal link is a link that points to another section of the same page or to another page on the same site or domain.</p>
<p>To add an internal link you need to add <code>{ text: 'Link Name', link: '/path-to-page/' }</code> to the <code>nav</code> property where the <code>text</code> defines the name of the link in the navbar and <code>link</code> defines the path to the preferred page.</p>
<p>For our site we're going to add the following internal links: <code>Topics</code>, <code>Posts</code>, <code>Resources</code>, and <code>Donate</code>.</p>
<p>Here's what the <code>config.js</code> file looks like after adding the internal links:</p>
<code-group>
<code-block title="Adding Internal Links">
<div><div><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        link<span>:</span> <span>'/posts/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br></div></div></code-block>
</code-group>
<p>Here's what the HTML looks like after adding the internal links:</p>
<code-group>
<code-block title="HTML After Adding the Internal Links">
<div><div><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en-US<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>head</span><span>></span></span>...<span><span><span>&lt;/</span>head</span><span>></span></span>
  <span><span><span>&lt;</span>body</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 1093px<span>;</span></span><span>"</span></span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
                <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> Topics <span><span><span>&lt;/</span>a</span><span>></span></span>
                    <span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> Posts <span><span><span>&lt;/</span>a</span><span>></span></span>
                    <span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/resources/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> Resources <span><span><span>&lt;/</span>a</span><span>></span></span>
                    <span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/donate/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> Donate <span><span><span>&lt;/</span>a</span><span>></span></span>
                    <span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span>&lt;!----></span>
                <span><span><span>&lt;/</span>nav</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        ...
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      ...
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>body</span><span>></span></span>
<span><span><span>&lt;/</span>html</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br></div></div></code-block>
</code-group>
<p>Your navbar should now have <code>Topics</code>, <code>Posts</code>, <code>Resources</code>, and <code>Donate</code> links to the right of the search box.</p>
<div><p>404 When Clicking the Links</p>
<p>If you click the links they will show the 404 layout because we haven't set up the pages for <code>Topics</code>, <code>Posts</code>, <code>Resources</code>, and <code>Donate</code> yet. In future tutorials we'll create these pages which will fix these issues.</p>
</div>
<h3 id="external-links"> External Links</h3>
<p>An external link is a link that points to a page outside of the same site or domain.</p>
<p>Adding an external link is the same as adding an internal link except the value provided to the <code>link</code> property is a URL to an external site.</p>
<p>External links automatically get <code>target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;</code> attributes added to the <code>&lt;a&gt;</code> tag. The <code>target</code> attribute specifies where to open the linked document, and the <code>rel</code> attribute specifies the relationship between the current document and the linked document.</p>
<p>These attributes are used to prevent a vulnerability known as <a href="https://owasp.org/www-community/attacks/Reverse_Tabnabbing" target="_blank" rel="noopener noreferrer">reverse tabnabbing<i>Content not supported</i></a> which can happen when a user clicks on an external link. All major browsers have fixed this vulnerability, but you can still include these attributes in case a user is using a browser without this security update.</p>
<p>You can also customize the values for the <code>target</code> and <code>rel</code> attributes by specifying them as properties in the external link. You can disable the <code>rel</code> attribute for a link by setting it like this <code>rel: false</code>.</p>
<p>For example, we could add an external link to the <a href="https://github.com/codemonkeysio/code-monkeys-blog" target="_blank" rel="noopener noreferrer">code-monkeys-blog<i>Content not supported</i></a> repository on our site with custom values for <code>target</code> and <code>rel</code>.</p>
<p>Here's what the <code>config.js</code> file looks like after adding the external link:</p>
<code-group>
<code-block title="Adding the External Link">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        link<span>:</span> <span>'/posts/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'GitHub'</span><span>,</span>
        link<span>:</span> <span>'https://github.com/codemonkeysio/code-monkeys-blog'</span><span>,</span>
        target<span>:</span><span>'_self'</span><span>,</span>
        rel<span>:</span><span>false</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br></div></div></code-block>
</code-group>
<p>Here's what the HTML looks like after adding the external link:</p>
<code-group>
<code-block title="HTML After Adding the External Link">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en-US<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>head</span><span>></span></span>...<span><span><span>&lt;/</span>head</span><span>></span></span>
  <span><span><span>&lt;</span>body</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 1093px<span>;</span></span><span>"</span></span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
                <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>https://github.com/codemonkeysio/code-monkeys-blog<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_self<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link external<span>"</span></span><span>></span></span> 
                            " GitHub "
                            <span>&lt;!----></span>
                        <span><span><span>&lt;/</span>a</span><span>></span></span>
                    <span><span><span>&lt;/</span>div</span><span>></span></span>
                    <span>&lt;!----></span>
                <span><span><span>&lt;/</span>nav</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>header</span><span>></span></span>
        ...
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      ...
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>body</span><span>></span></span>
<span><span><span>&lt;/</span>html</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br></div></div></code-block>
</code-group>
<div><p>No External Link in Navbar</p>
<p>Currently, the <a href="/">Code Monkeys Blog</a> doesn't include an external link in the navbar, but in the future one may be added for the <a href="https://github.com/codemonkeysio/code-monkeys-blog" target="_blank" rel="noopener noreferrer">code-monkeys-blog<i>Content not supported</i></a> repository using the default values for external links mentioned above.</p>
</div>
<h3 id="dropdown-menus"> Dropdown Menus</h3>
<p>The links in the navbar can also be dropdown menus if an <code>items</code> property which expects an array of navbar link objects is used instead of just a <code>link</code> property.</p>
<p>For example, the <code>Posts</code> link we made earlier can be turned into a dropdown menu containing links to pages for <code>All Posts</code> and for posts <code>By Topic</code>.</p>
<p>Here's what the <code>config.js</code> file looks like after turning the <code>Posts</code> link into a dropdown menu:</p>
<code-group>
<code-block title="Adding a Dropdown Menu">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span> 
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            link<span>:</span> <span>'/topics/'</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br></div></div></code-block>
</code-group>
<p>Here's what the HTML looks like after adding a dropdown menu:</p>
<code-group>
<code-block title="HTML After Adding a Dropdown Menu">
<div><div><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-button<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span> <span>aria-current</span><span><span>=</span><span>"</span>page<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home-link router-link-exact-active router-link-active<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>links<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>max-width</span><span>:</span> 1093px<span>;</span></span><span>"</span></span></span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>search-box<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>nav</span> <span>class</span><span><span>=</span><span>"</span>nav-links can-hide<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>dropdown-wrapper<span>"</span></span><span>></span></span>
                    <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>dropdown-title<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>title<span>"</span></span><span>></span></span>Posts<span><span><span>&lt;/</span>span</span><span>></span></span>
                        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>arrow down<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>span</span><span>></span></span>
                    <span><span><span>&lt;/</span>button</span><span>></span></span>
                    <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>mobile-dropdown-title<span>"</span></span><span>></span></span>
                        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>title<span>"</span></span><span>></span></span>Posts<span><span><span>&lt;/</span>span</span><span>></span></span>
                        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>arrow right<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>span</span><span>></span></span>
                    <span><span><span>&lt;/</span>button</span><span>></span></span>
                    <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>nav-dropdown<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>display</span><span>:</span> none<span>;</span></span><span>"</span></span></span><span>></span></span>
                        <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-item<span>"</span></span><span>></span></span>
                            <span>&lt;!----></span>
                            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> All Posts <span><span><span>&lt;/</span>a</span><span>></span></span>
                        <span><span><span>&lt;/</span>li</span><span>></span></span>
                        <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-item<span>"</span></span><span>></span></span>
                            <span>&lt;!----></span>
                            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> By Topic <span><span><span>&lt;/</span>a</span><span>></span></span>
                        <span><span><span>&lt;/</span>li</span><span>></span></span>
                    <span><span><span>&lt;/</span>ul</span><span>></span></span>
                <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>nav-item<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
            <span>&lt;!----></span>
        <span><span><span>&lt;/</span>nav</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>header</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br></div></div></code-block>
</code-group>
<p>Your navbar should now have a <code>Posts</code> dropdown menu containing <code>All Posts</code> and <code>By Topic</code> links.</p>
<h3 id="dropdown-menu-subgroups"> Dropdown Menu Subgroups</h3>
<p>It's also possible to make a dropdown menu with subgroups where a label is used to group a list of links. This is done by using the <code>items</code> property which expects an array of navbar link objects instead of using just a <code>link</code> property for a dropdown menu entry.</p>
<p>For example, the <code>By Topic</code> link we made earlier can be turned into a subgroup containing links to posts filtered by main topics. Currently, the blog consists of three main topics <code>LeetCode</code>, <code>Node.js</code>, and <code>VuePress</code>, so we'll add each of these as an entry to the <code>By Topic</code> subgroup in our dropdown menu.</p>
<p>Here's what the <code>config.js</code> file looks like after turning the <code>By Topic</code> link in the dropdown menu into a subgroup:</p>
<code-group>
<code-block title="Adding a Subgroup to the Dropdown Menu">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    logo<span>:</span> <span>'/images/code-monkeys-logos/code-monkeys-head-and-shoulders-logo.png'</span><span>,</span>
    nav<span>:</span> <span>[</span>
      <span>{</span>
        text<span>:</span> <span>'Topics'</span><span>,</span>
        link<span>:</span> <span>'/topics/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Posts'</span><span>,</span>
        items<span>:</span> <span>[</span>
          <span>{</span> text<span>:</span> <span>'All Posts'</span><span>,</span> link<span>:</span> <span>'/posts/'</span> <span>}</span><span>,</span>
          <span>{</span>
            text<span>:</span> <span>'By Topic'</span><span>,</span>
            items<span>:</span> <span>[</span>
              <span>{</span> text<span>:</span> <span>'LeetCode'</span><span>,</span> link<span>:</span> <span>'/topics/LeetCode/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'Node.js'</span><span>,</span> link<span>:</span> <span>'/topics/Node.js/'</span> <span>}</span><span>,</span>
              <span>{</span> text<span>:</span> <span>'VuePress'</span><span>,</span> link<span>:</span> <span>'/topics/VuePress/'</span> <span>}</span><span>,</span>
            <span>]</span><span>,</span>
          <span>}</span><span>,</span>
        <span>]</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Resources'</span><span>,</span>
        link<span>:</span> <span>'/resources/'</span><span>,</span>
      <span>}</span><span>,</span>
      <span>{</span>
        text<span>:</span> <span>'Donate'</span><span>,</span>
        link<span>:</span> <span>'/donate/'</span><span>,</span>
      <span>}</span><span>,</span>
    <span>]</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br></div></div></code-block>
</code-group>
<div><p>Final config.js File</p>
<p>This is how the <code>config.js</code> file should look at the end of this tutorial if you're following along with the building of the blog.</p>
</div>
<p>Here's what the HTML looks like after adding a subgroup to the dropdown menu:</p>
<code-group>
<code-block title="HTML After Adding a Subgroup to the Dropdown Menu">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br></div><pre><code><span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>dropdown-wrapper<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>dropdown-title<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>title<span>"</span></span><span>></span></span>Posts<span><span><span>&lt;/</span>span</span><span>></span></span>
        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>arrow down<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>span</span><span>></span></span>
    <span><span><span>&lt;/</span>button</span><span>></span></span>
    <span><span><span>&lt;</span>button</span> <span>type</span><span><span>=</span><span>"</span>button<span>"</span></span> <span>aria-label</span><span><span>=</span><span>"</span>Posts<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>mobile-dropdown-title<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>title<span>"</span></span><span>></span></span>Posts<span><span><span>&lt;/</span>span</span><span>></span></span>
        <span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span><span>"</span>arrow right<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>span</span><span>></span></span>
    <span><span><span>&lt;/</span>button</span><span>></span></span>
    <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>nav-dropdown<span>"</span></span> <span><span>style</span><span><span>=</span><span>"</span><span><span>display</span><span>:</span> none<span>;</span></span><span>"</span></span></span><span>></span></span>
        <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-item<span>"</span></span><span>></span></span>
            <span>&lt;!----></span>
            <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/posts/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> All Posts <span><span><span>&lt;/</span>a</span><span>></span></span>
        <span><span><span>&lt;/</span>li</span><span>></span></span>
        <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-item<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>h4</span><span>></span></span> By Topic <span><span><span>&lt;/</span>h4</span><span>></span></span>
            <span><span><span>&lt;</span>ul</span> <span>class</span><span><span>=</span><span>"</span>dropdown-subitem-wrapper<span>"</span></span><span>></span></span>
                <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-subitem<span>"</span></span><span>></span></span>
                    <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/LeetCode/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> LeetCode <span><span><span>&lt;/</span>a</span><span>></span></span>
                <span><span><span>&lt;/</span>li</span><span>></span></span>
                <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-subitem<span>"</span></span><span>></span></span>
                    <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/Node.js/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> Node.js <span><span><span>&lt;/</span>a</span><span>></span></span>
                <span><span><span>&lt;/</span>li</span><span>></span></span>
                <span><span><span>&lt;</span>li</span> <span>class</span><span><span>=</span><span>"</span>dropdown-subitem<span>"</span></span><span>></span></span>
                    <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/VuePress/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link<span>"</span></span><span>></span></span> VuePress <span><span><span>&lt;/</span>a</span><span>></span></span>
                <span><span><span>&lt;/</span>li</span><span>></span></span>
            <span><span><span>&lt;/</span>ul</span><span>></span></span>
        <span><span><span>&lt;/</span>li</span><span>></span></span>
    <span><span><span>&lt;/</span>ul</span><span>></span></span>
<span><span><span>&lt;/</span>div</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br></div></div></code-block>
</code-group>
<p>Your navbar should now have a <code>By Topic</code> subgroup in the dropdown menu containing these links <code>LeetCode</code>, <code>Node.js</code>, and <code>VuePress</code>.</p>
<p>To add more links to the <code>By Topic</code> subgroup all you need to do is add another element into its <code>items</code> array.</p>
<div><p>404 Reminder When Clicking the Links</p>
<p>Clicking the links will show the 404 layout because we haven't set up the pages for the navbar links except for the homepage. In future tutorials we'll create these pages which will fix these issues.</p>
</div>
<h2 id="disabling-the-navbar"> Disabling the Navbar</h2>
<p>You can disable the navbar globally if you prefer to not have a navbar for your site. You also have the option to disable the navbar locally for specific pages. We'll demonstrate how to do each of these below.</p>
<h3 id="globally"> Globally</h3>
<p>To disable the navbar globally add the following to your <code>config.js</code> file:</p>
<code-group>
<code-block title="Disabling the Navbar Globally">
<div><div><br><br><br><br><br><br><br><div>&nbsp;</div><br><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  title<span>:</span> <span>'Code Monkeys'</span><span>,</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    navbar<span>:</span> <span>false</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>The <code>navbar</code> property is a predefined variable provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>. Check out <a href="https://vuepress.vuejs.org/guide/frontmatter.html#predefined-variables-powered-by-default-theme" target="_blank" rel="noopener noreferrer">Predefined Variables Powered By Default Theme<i>Content not supported</i></a> for a list of the predefined variables.</p>
<h3 id="locally"> Locally</h3>
<p>To disable the navbar locally for a specific page you can add the following to the page's frontmatter:</p>
<code-group>
<code-block title="Disabling the Navbar Locally">
<div><pre><code><span>---</span>
<span>navbar</span><span>:</span> <span>false</span>
<span>---</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<h2 id="next-steps"> Next Steps</h2>
<p>In the next tutorial we'll begin the development of the <code>Footer</code> component which will stick to the bottom of the page and consist of social media icons and a made by message.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 6 - Homepage Layout</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-6/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-6/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 6 - Homepage Layout</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn about the default theme homepage layout for VuePress, then check out VuePress Tutorial 6 - Homepage Layout! 🍌🐒</description>
      <pubDate>Thu, 03 Feb 2022 05:06:00 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-6-homepage-layout"> VuePress Tutorial 6 - Homepage Layout</h1>
</template><h2 id="what-is-a-vuepress-theme"> What is a VuePress Theme?</h2>
<p>In this tutorial we'll be discussing how to configure the homepage layout by using the options exposed by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> which comes with the installation of <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> and is designed for technical documentation. Along with the homepage the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> also allows customization for the navbar, sidebar, search box, etc. We'll discuss those customizations in more detail in future tutorials.</p>
<p>Before moving on to the homepage layout, we're going to first describe what a theme is. If you remember from the <a href="/vuepress-tutorial-2">VuePress Tutorial 2 - Why Use VuePress?</a> post, a <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> theme allows you to control how your project is structured. Within a theme you are able to create directories that handle <span>global components</span>, <span>components</span>, <span>layouts</span>, <span>styles</span>, and <span>templates</span>. You can also create files for <span>theme configuration</span> and <span>app level enhancements</span>. So, a theme handles all of the layout and interactivity details for your site.</p>
<p>Now that we have a good understanding of what a theme is, let's move on to configuring the homepage layout.</p>
<h2 id="homepage-layout"> Homepage Layout</h2>
<p>To see the homepage layout in action you can take a look at the homepages of  the <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site and the <a href="/">Code Monkeys Blog</a>.</p>
<div><p>Using a Custom Theme</p>
<p>Since the options being used for the homepage are provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, they may be different if you're <a href="https://vuepress.vuejs.org/theme/using-a-theme.html" target="_blank" rel="noopener noreferrer">using a custom theme<i>Content not supported</i></a>.</p>
</div>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes to your site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<h3 id="using-the-homepage-layout"> Using the Homepage Layout</h3>
<p>To use the homepage layout open the <code>README.md</code> file in the <code>docs</code> directory of your project then you need to add <code>home: true</code> to a <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter block at the top of the page.</p>
<p>We're also going to remove the <code># Hello VuePress</code> line from the file since we're going to start customizing the homepage.</p>
<p>The <code>README.md</code> file now looks like this:</p>
<code-group>
<code-block title="Specifying the Homepage Layout">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span></span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<p>Before discussing the changes to the site, let's first describe what <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> and frontmatter are.</p>
<h3 id="yaml-frontmatter-blocks"> YAML Frontmatter Blocks</h3>
<p><a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> is a recursive acroynym for <span>&quot;YAML Ain't Markup Language&quot;</span>, and it's a human-readable data serialization language that can be used with a wide variety of programming languages. Frontmatter is structured metadata that allows you to add variables to your pages.</p>
<p>The <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter block support comes with the installation of <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> and is processed using the frontmatter parser <a href="https://github.com/jonschlinkert/gray-matter" target="_blank" rel="noopener noreferrer">gray-matter<i>Content not supported</i></a>.</p>
<p>When you add a <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter block to a page you need to declare it at the top of a Markdown file, and the content must adhere to proper <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> formatting between a set of triple-dashed lines, i.e., <code>---</code> like the example above.</p>
<p>Within the triple-dashed lines you are able to set <a href="https://vuepress.vuejs.org/guide/frontmatter.html#predefined-variables" target="_blank" rel="noopener noreferrer">predefined variables<i>Content not supported</i></a>, <a href="https://vuepress.vuejs.org/guide/frontmatter.html#predefined-variables-powered-by-default-theme" target="_blank" rel="noopener noreferrer">predefined variables powered by the default theme<i>Content not supported</i></a>, and you can define your own custom variables. These variables can then be accessed within the current page by using the <a href="https://vuepress.vuejs.org/guide/global-computed.html#frontmatter" target="_blank" rel="noopener noreferrer">$frontmatter<i>Content not supported</i></a> variable. We'll be discussing and adding predefined and custom variables and using the <a href="https://vuepress.vuejs.org/guide/global-computed.html#frontmatter" target="_blank" rel="noopener noreferrer">$frontmatter<i>Content not supported</i></a> variable as we continue to develop the site.</p>
<p>If you have any questions, then check out the <a href="https://vuepress.vuejs.org/guide/frontmatter.html" target="_blank" rel="noopener noreferrer">Frontmatter<i>Content not supported</i></a> documentation.</p>
<h3 id="alternative-frontmatter-formats"> Alternative Frontmatter Formats</h3>
<p><a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> also supports <a href="https://www.json.org/json-en.html" target="_blank" rel="noopener noreferrer">JSON<i>Content not supported</i></a> and <a href="https://toml.io/en/" target="_blank" rel="noopener noreferrer">TOML<i>Content not supported</i></a> frontmatter syntax.</p>
<p>We'll be using the <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> syntax throughout the tutorials, but if you're interested here's how to set the homepage layout using the other supported syntaxes.</p>
<p>For <a href="https://www.json.org/json-en.html" target="_blank" rel="noopener noreferrer">JSON<i>Content not supported</i></a> the frontmatter needs to start and end with curly brackets:</p>
<code-group>
<code-block title="Specifying the Homepage Layout Using JSON">
<div><pre><code><span><span>---</span>
<span><span>{</span>
  <span>"home"</span><span>:</span> <span>"true"</span>
<span>}</span></span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>For <a href="https://toml.io/en/" target="_blank" rel="noopener noreferrer">TOML<i>Content not supported</i></a> the frontmatter needs to be explicitly marked as <code>toml</code>:</p>
<code-group>
<code-block title="Specifying the Homepage Layout Using TOML">
<div><pre><code>---toml
<span>home = "true"
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<p>Now that we have a better understanding of <a href="https://yaml.org/" target="_blank" rel="noopener noreferrer">YAML<i>Content not supported</i></a> frontmatter blocks, let's discuss the changes to the site after specifying the homepage layout.</p>
<h3 id="homepage-layout-changes"> Homepage Layout Changes</h3>
<p>Before specifying the homepage layout, the HTML for the homepage consists of the following:</p>
<code-group>
<code-block title="HTML Before Specifying the Homepage Layout">
<div><div><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en-US<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>head</span><span>></span></span>
    <span><span><span>&lt;</span>title</span><span>></span></span>Hello VuePress | Code Monkeys<span><span><span>&lt;/</span>title</span><span>></span></span>
    ...
    <span><span><span>&lt;</span>meta</span> <span>name</span><span><span>=</span><span>"</span>description<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>meta</span> <span>name</span><span><span>=</span><span>"</span>author<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>J the Code Monkey<span>"</span></span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>head</span><span>></span></span>
  <span><span><span>&lt;</span>body</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>class</span><span><span>=</span><span>"</span>page<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content content__default<span>"</span></span><span>></span></span>
            <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>hello-vuepress<span>"</span></span><span>></span></span>
              <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>#hello-vuepress<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>header-anchor<span>"</span></span><span>></span></span>#<span><span><span>&lt;/</span>a</span><span>></span></span>
              " Hello VuePress"
            <span><span><span>&lt;/</span>h1</span><span>></span></span>
          <span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>footer</span> <span>class</span><span><span>=</span><span>"</span>page-edit<span>"</span></span><span>></span></span>
            <span>&lt;!----></span>
            <span>&lt;!----></span>
          <span><span><span>&lt;/</span>footer</span><span>></span></span>
          <span>&lt;!----></span>
        <span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>body</span><span>></span></span>
<span><span><span>&lt;/</span>html</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br></div></div></code-block>
</code-group>
<p>The highlighted lines refer to what gets changed after specifying the homepage layout.</p>
<p>After specifying the homepage layout, the HTML for the homepage consists of the following:</p>
<code-group>
<code-block title="HTML After Specifying the Homepage Layout">
<div><div><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en-US<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>head</span><span>></span></span>
    <span><span><span>&lt;</span>title</span><span>></span></span>Code Monkeys<span><span><span>&lt;/</span>title</span><span>></span></span>
    ...
    <span><span><span>&lt;</span>meta</span> <span>name</span><span><span>=</span><span>"</span>description<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>meta</span> <span>name</span><span><span>=</span><span>"</span>author<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>J the Code Monkey<span>"</span></span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>head</span><span>></span></span>
  <span><span><span>&lt;</span>body</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
            <span>&lt;!----></span>
            <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>main-title<span>"</span></span><span>></span></span> Code Monkeys <span><span><span>&lt;/</span>h1</span><span>></span></span>
            <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>description<span>"</span></span><span>></span></span>
              " Learn to Code like a Monkey by joining the Code Monkeys Community! Check out the blog for posts and videos about coding! Start Monkeying Around Today! 🐵"
            <span><span><span>&lt;/</span>p</span><span>></span></span>
            <span>&lt;!----></span>
          <span><span><span>&lt;/</span>header</span><span>></span></span>
          <span>&lt;!----></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
          <span>&lt;!----></span>
        <span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>body</span><span>></span></span>
<span><span><span>&lt;/</span>html</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br></div></div></code-block>
</code-group>
<p>Here are the changes in the HTML after specifying the homepage layout:</p>
<ul>
<li>Line 3: The initial <code>title</code> tag that was set to <code>Hello VuePress | Code Monkeys</code> is now set to <code>Code Monkeys</code>.</li>
<li>Line 15: The initial <code>main</code> tag had a class of <code>&quot;page&quot;</code>, and it now has a class of <code>&quot;home&quot;</code> and an attribute of <code>aria-labelledby=&quot;main-title&quot;</code>.</li>
<li>Line 16: The initial child elements of the <code>div</code> tag are removed since the <code># Hello VuePress</code> line was removed from the <code>README.md</code> file, and the <code>div</code> tag is moved to line 25 with an added class of <code>&quot;custom&quot;</code>. Line 16 now consists of a <code>header</code> tag with a class of <code>&quot;hero&quot;</code>, and the child tags of <code>&lt;h1 id=&quot;main-title&quot;&gt;Code Monkeys&lt;/h1&gt;</code> and <code>&lt;p class=&quot;description&quot;&gt;&quot; Learn to Code like a Monkey... &quot;&lt;/p&gt;</code>.</li>
<li>Line 22: The initial <code>footer</code> tag is removed from the page.</li>
</ul>
<h3 id="adding-an-image"> Adding an Image</h3>
<p>Before adding a homepage image, we're going to first create a <code>public</code> directory inside of the <code>.vuepress</code> directory.</p>
<p>The directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>.yarn</code> <em>(<strong>Optional</strong>)</em>
│   ├── <code>releases</code>
│   │   └── yarn-1.22.17.cjs
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   └── config.js
│   └── README.md
├── <code>node_modules</code>
├── .gitattributes <em>(<strong>Optional</strong>)</em>
├── .gitignore
├── .yarnrc <em>(<strong>Optional</strong>)</em>
├── LICENSE
├── package.json
├── README.md
└── yarn.lock</p>
</code></pre><p>The <code>public</code> directory is a static resource directory which is useful in the following cases:</p>
<ul>
<li>You need to provide static assests that aren't directly referenced in any of your Markdown or component files, e.g., <span>favicons</span> and <span>PWA icons</span> which we'll discuss in more detail in future tutorials.</li>
<li>You need to serve shared static assets that are referenced outside of your site, e.g., logo images.</li>
<li>You want to reference images using <span>absolute URLs</span> in your Markdown and component files.</li>
</ul>
<p>In a future tutorial we'll discuss what <span>absolute URLs</span> are in more detail as well as <span>relative URLs</span>, the <span>base URL</span>, and how to use <span>aliases</span>. If you're interested in learning more now, then check out the <a href="https://vuepress.vuejs.org/guide/assets.html" target="_blank" rel="noopener noreferrer">Assest Handling<i>Content not supported</i></a> documentation.</p>
<p>The image we're going to be adding to the homepage is the Code Monkeys full logo. We're going to create an <code>images</code> directory in the <code>public</code> directory. Then we're going to create a <code>code-monkeys-logos</code> directory inside of the <code>images</code> directory. These directories are optional, but will be helpful for organizational purposes when we add more images in the future. Now inside of the <code>code-monkeys-logos</code> directory, we're going to add the full Code Monkeys logo which is named <code>code-monkeys-full-logo.png</code>.</p>
<p>After adding those directories and the image, the directory structure for your site should now look something like this:</p>
<pre><code><p>.
├── <code>.yarn</code> <em>(<strong>Optional</strong>)</em>
│   ├── <code>releases</code>
│   │   └── yarn-1.22.17.cjs
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   │   ├── <code>images</code>
│   │   │   │   ├── <code>code-monkeys-logos</code>
│   │   │   │   │   └── code-monkeys-full-logo.png
│   │   └── config.js
│   └── README.md
├── <code>node_modules</code>
├── .gitattributes <em>(<strong>Optional</strong>)</em>
├── .gitignore
├── .yarnrc <em>(<strong>Optional</strong>)</em>
├── LICENSE
├── package.json
├── README.md
└── yarn.lock</p>
</code></pre><p>Here's the full Code Monkeys logo:</p>
<div>
  <i>Content not supported</i>
</div>
<p>You can download the logo right here from your browser, and it will also be in the <code>tutorial-6</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-6" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<p>The logo was created using <a href="https://www.canva.com/" target="_blank" rel="noopener noreferrer">Canva<i>Content not supported</i></a>. The site offers a lot of features for free, but some features and images require payment after your free trial is expired. A good alternative to use is <a href="https://www.gimp.org/" target="_blank" rel="noopener noreferrer">GIMP<i>Content not supported</i></a>.</p>
<p>Here are some other useful online image tools:</p>
<ul>
<li><span><a href="https://www5.lunapic.com/editor/" target="_blank" rel="noopener noreferrer">LunaPic<i>Content not supported</i></a></span></li>
<li><span><a href="https://htmlcsstoimage.com/" target="_blank" rel="noopener noreferrer">HCTI API<i>Content not supported</i></a></span></li>
<li><span><a href="https://photoscissors.com/" target="_blank" rel="noopener noreferrer">PhotoScissors<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.iloveimg.com/" target="_blank" rel="noopener noreferrer">iLoveIMG<i>Content not supported</i></a></span></li>
</ul>
<p>Here are some useful resources for coming up with color schemes and palettes for your site:</p>
<ul>
<li><span><a href="https://coolors.co/" target="_blank" rel="noopener noreferrer">Coolors<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.canva.com/colors/color-palettes/" target="_blank" rel="noopener noreferrer">Canva Color Palettes<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/colors/default.asp" target="_blank" rel="noopener noreferrer">Colors Tutorial<i>Content not supported</i></a></span></li>
</ul>
<p>It's also important to reduce the file sizes of your images by using compression. This will help to optimize your site's bundle size, save bandwidth, and decrease the loading time for your images. <a href="https://www.canva.com/" target="_blank" rel="noopener noreferrer">Canva<i>Content not supported</i></a> and <a href="https://www.gimp.org/" target="_blank" rel="noopener noreferrer">GIMP<i>Content not supported</i></a>, and some of the other image tools mentioned above offer the ability to compress your images.</p>
<p>Here are some other useful online tools for image compression:</p>
<ul>
<li><span><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer">TinyPNG<i>Content not supported</i></a></span></li>
<li><span><a href="https://imagecompressor.com/" target="_blank" rel="noopener noreferrer">Image Compressor<i>Content not supported</i></a></span></li>
</ul>
<p>After adding the logo to the site, we can reference the logo in our homepage by adding <code>heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png</code> to the frontmatter.</p>
<p>Notice you don't need to include <code>.vuepress/public</code> in the path to the logo because whenever you reference assets stored in the <code>public</code> directory it's added automatically.</p>
<p>The <code>README.md</code> file now looks like this:</p>
<code-group>
<code-block title="Adding a Homepage Image">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>The homepage image is added as a child element of the <code>&lt;header&gt;</code> tag that has a class of <code>&quot;hero&quot;</code>.</p>
<p>Here's what the HTML looks like after adding the homepage image:</p>
<code-group>
<code-block title="HTML After Adding a Homepage Image">
<div><div><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-full-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>main-title<span>"</span></span><span>></span></span> Code Monkeys <span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>description<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>p</span><span>></span></span>
    <span>&lt;!----></span>
  <span><span><span>&lt;/</span>header</span><span>></span></span>
  <span>&lt;!----></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span>&lt;!----></span>
<span><span><span>&lt;/</span>main</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<h3 id="adding-a-title"> Adding a Title</h3>
<p>Since we already added a site <code>title</code> property in the <code>config.js</code> file, we already have a title on the homepage which has the same value as the site <code>title</code> property.</p>
<p>If you prefer to have the site <code>title</code> property and the title on the homepage to be different, then you can add <code>heroText: Homepage Title</code> to the frontmatter.</p>
<p>The <code>README.md</code> file would look like this:</p>
<code-group>
<code-block title="Adding a Homepage Title">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png
<span>heroText</span><span>:</span> Homepage Title</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>For the <a href="/">Code Monkeys Blog</a> we'll be using the value of the site <code>title</code> property for the homepage title, so the <code>README.md</code> file will look the same as before:</p>
<code-group>
<code-block title="Using the Site Title for the Homepage Title">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>Here's the HTML with the homepage title highlighted:</p>
<code-group>
<code-block title="HTML After Adding a Homepage Title">
<div><div><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-full-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>main-title<span>"</span></span><span>></span></span> Code Monkeys <span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>description<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>p</span><span>></span></span>
    <span>&lt;!----></span>
  <span><span><span>&lt;/</span>header</span><span>></span></span>
  <span>&lt;!----></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span>&lt;!----></span>
<span><span><span>&lt;/</span>main</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<h3 id="adding-a-tagline"> Adding a Tagline</h3>
<p>Since we already added a site <code>description</code> property in the <code>config.js</code> file, we already have a tagline on the homepage which has the same value as the site <code>description</code> property.</p>
<p>If you prefer to have the site <code>description</code> property and the tagline on the homepage to be different, then you can add <code>tagline: Your tagline</code> to the frontmatter.</p>
<p>We're going to update the tagline on the homepage from the value of the site <code>description</code> to be <code>tagline: Let's get down to Monkey Business</code>.</p>
<p>The <code>README.md</code> file now looks like this:</p>
<code-group>
<code-block title="Adding a Homepage Tagline">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png
<span>tagline</span><span>:</span> Let's get down to Monkey Business</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>Here's the HTML with the homepage tagline highlighted:</p>
<code-group>
<code-block title="HTML After Adding a Homepage Tagline">
<div><div><br><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-full-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>main-title<span>"</span></span><span>></span></span> Code Monkeys <span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>description<span>"</span></span><span>></span></span> Let's get down to Monkey Business <span><span><span>&lt;/</span>p</span><span>></span></span>
    <span>&lt;!----></span>
  <span><span><span>&lt;/</span>header</span><span>></span></span>
  <span>&lt;!----></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span>&lt;!----></span>
<span><span><span>&lt;/</span>main</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<h3 id="adding-an-action-button"> Adding an Action Button</h3>
<p>An action button provides a link to a preferred page on your site, and it's placed directly below the tagline.</p>
<p>To add an action button you need to add <code>actionText: Text on Action Button</code> and <code>actionLink: /preferred-page/</code> to the frontmatter.</p>
<p>We're going to add the <code>actionText: Learn to Code like a Monkey →</code> and the <code>actionLink: /topics/</code> to the homepage of the site.</p>
<p>The <code>README.md</code> file now looks like this:</p>
<code-group>
<code-block title="Adding an Action Button">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png
<span>tagline</span><span>:</span> Let's get down to Monkey Business
<span>actionText</span><span>:</span> Learn to Code like a Monkey →
<span>actionLink</span><span>:</span> /topics/</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<p>Here's the HTML with the action button highlighted:</p>
<code-group>
<code-block title="HTML After Adding an Action Button">
<div><div><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-full-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>main-title<span>"</span></span><span>></span></span> Code Monkeys <span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>description<span>"</span></span><span>></span></span> Let's get down to Monkey Business <span><span><span>&lt;/</span>p</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>action<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link action-button<span>"</span></span><span>></span></span> Learn to Code like a Monkey → <span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>header</span><span>></span></span>
  <span>&lt;!----></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span>&lt;!----></span>
<span><span><span>&lt;/</span>main</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br></div></div></code-block>
</code-group>
<div><p>404 When Clicking the Action Button</p>
<p>If you click the action button, it will show the 404 layout because we haven't set up the route to <code>/topics/</code>. In a future tutorial we'll create the <code>Topics</code> page which will fix this issue.</p>
</div>
<h3 id="adding-features"> Adding Features</h3>
<p>Features are text that get displayed under the action button that are used to provide a summary of what your site is about.</p>
<p>You can add as many features as you like, but the recommended number is three. Using three features looks the best with the default styling, and it gives a user a quick introduction to your site.</p>
<p>Here's the format for adding features with titles and details to the frontmatter of your page:</p>
<code-group>
<code-block title="Adding Features with Titles and Details">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>features</span><span>:</span>
  <span>-</span> <span>title</span><span>:</span> Feature 1
    <span>details</span><span>:</span> Feature 1 details
  <span>-</span> <span>title</span><span>:</span> Feature 2
    <span>details</span><span>:</span> Feature 2 details
  <span>-</span> <span>title</span><span>:</span> Feature 3
    <span>details</span><span>:</span> Feature 3 details</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>We're going to be adding only the feature titles to the homepage of the site.</p>
<p>The <code>README.md</code> file now looks like this:</p>
<code-group>
<code-block title="Adding Feature Titles">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png
<span>tagline</span><span>:</span> Let's get down to Monkey Business
<span>actionText</span><span>:</span> Learn to Code like a Monkey →
<span>actionLink</span><span>:</span> /topics/
<span>features</span><span>:</span>
  <span>-</span> <span>title</span><span>:</span> Learn
  <span>-</span> <span>title</span><span>:</span> Code
  <span>-</span> <span>title</span><span>:</span> Crush</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>Here's the HTML with the features highlighted:</p>
<code-group>
<code-block title="HTML After Adding Feature Titles">
<div><div><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br></div><pre><code><span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>img</span> <span>src</span><span><span>=</span><span>"</span>/images/code-monkeys-logos/code-monkeys-full-logo.png<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>h1</span> <span>id</span><span><span>=</span><span>"</span>main-title<span>"</span></span><span>></span></span> Code Monkeys <span><span><span>&lt;/</span>h1</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>description<span>"</span></span><span>></span></span> Let's get down to Monkey Business <span><span><span>&lt;/</span>p</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>action<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span><span>"</span>/topics/<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>nav-link action-button<span>"</span></span><span>></span></span> Learn to Code like a Monkey → <span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>header</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>features<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>feature<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>h2</span><span>></span></span>Learn<span><span><span>&lt;/</span>h2</span><span>></span></span>
      <span><span><span>&lt;</span>p</span><span>></span></span><span><span><span>&lt;/</span>p</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>feature<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>h2</span><span>></span></span>Code<span><span><span>&lt;/</span>h2</span><span>></span></span>
      <span><span><span>&lt;</span>p</span><span>></span></span><span><span><span>&lt;/</span>p</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>feature<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>h2</span><span>></span></span>Crush<span><span><span>&lt;/</span>h2</span><span>></span></span>
      <span><span><span>&lt;</span>p</span><span>></span></span><span><span><span>&lt;/</span>p</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span>&lt;!----></span>
<span><span><span>&lt;/</span>main</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br></div></div></code-block>
</code-group>
<h3 id="adding-a-footer"> Adding a Footer</h3>
<p>A footer typically contains:</p>
<ul>
<li>Authorship Information</li>
<li>Copyright Information</li>
<li>Contact Information</li>
<li>Sitemap (Important Links Regardless of Current Page - Similar to Global Navbar)</li>
</ul>
<p>Here's how to add a footer to the frontmatter of your page:</p>
<code-group>
<code-block title="Adding a Footer">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>footer</span><span>:</span> Your Site's License <span>|</span> Copyright © 2022<span>-</span>present Your Name</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<p>We're not going to be adding a footer using the frontmatter in the homepage for the site. Instead we're going to be creating a Footer component in a future tutorial that sticks to the bottom of the page.</p>
<p>If you do decide to add a footer using the frontmatter in the homepage, then the HTML will look like this:</p>
<code-group>
<code-block title="HTML After Adding a Footer">
<div><div><br><br><br><br><div>&nbsp;</div><br><br></div><pre><code><span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>header</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>features<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span> Your Site's License | Copyright © 2022-present Your Name <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>main</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br></div></div></code-block>
</code-group>
<h3 id="final-homepage-layout"> Final Homepage Layout</h3>
<p>Here's the contents of the <code>README.md</code> file for the homepage after adding all of the desired frontmatter:</p>
<code-group>
<code-block title="Final Homepage Layout">
<div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png
<span>tagline</span><span>:</span> Let's get down to Monkey Business
<span>actionText</span><span>:</span> Learn to Code like a Monkey →
<span>actionLink</span><span>:</span> /topics/
<span>features</span><span>:</span>
  <span>-</span> <span>title</span><span>:</span> Learn
  <span>-</span> <span>title</span><span>:</span> Code
  <span>-</span> <span>title</span><span>:</span> Crush</span>
<span>---</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br></div></div></code-block>
</code-group>
<p>The contents of your <code>README.md</code> file may be different depending on what metadata you decide to use in the frontmatter of your homepage.</p>
<h3 id="homepage-layout-notes"> Homepage Layout Notes</h3>
<p>Here are some general notes about the homepage layout:</p>
<ul>
<li>You can disable any frontmatter by setting any of the options to <code>null</code>.</li>
<li>Any content after the frontmatter block gets parsed as normal Markdown and will be rendered after the features section.</li>
<li>You can also use a fully custom homepage layout. We'll discuss how to use a <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#custom-layout-for-specific-pages" target="_blank" rel="noopener noreferrer">Custom Layout for Specific Pages<i>Content not supported</i></a> in a future tutorial.</li>
</ul>
<h3 id="next-steps"> Next Steps</h3>
<p>In the next tutorial we'll discuss how to configure the navbar that comes with the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 8 - Custom Footer</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-8/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-8/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 8 - Custom Footer</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to create a custom footer for your VuePress site, then check out VuePress Tutorial 8 - Custom Footer! 🍌🐒</description>
      <pubDate>Wed, 06 Apr 2022 16:58:30 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-8-custom-footer"> VuePress Tutorial 8 - Custom Footer</h1>
</template><h2 id="what-is-a-footer"> What is a Footer?</h2>
<p>Now it's time to start building the custom footer component for the site. Before creating the footer component, we're going to first describe what a footer is then we'll mention some other options for footers provided by <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> and the <a href="https://vuepress-theme-blog.billyyyyy3320.com/config/#footer" target="_blank" rel="noopener noreferrer">@vuepress/theme-blog<i>Content not supported</i></a>.</p>
<p>A footer is located at the bottom of a page, and it typically contains:</p>
<ul>
<li>Authorship Information</li>
<li>Copyright Information</li>
<li>Contact Information</li>
<li>Sitemap (Important Links Regardless of Current Page - Similar to Global Navbar)</li>
</ul>
<p>For the <a href="/">Code Monkeys Blog</a> we'll be building a footer that consists of links to various social media platforms. This gives the user an easy way to interact with various content and the community.</p>
<p>Take a look at the footer on this page to see what we'll be designing for the blog. To see another example you can check out the <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> site footer as well.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<h2 id="homepage-layout-footer"> Homepage Layout Footer</h2>
<p>If you remember from the previous post <a href="/vuepress-tutorial-6/#adding-a-footer">VuePress Tutorial 6 - Homepage Layout</a>, <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> provides a way to add a footer to the homepage by adding the following to the homepage layout which is located in <code>docs/README.md</code>:</p>
<code-group>
<code-block title="Adding a Homepage Footer">
<div><div><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br></div><pre><code><span><span>---</span>
<span><span>home</span><span>:</span> <span>true</span>
<span>heroImage</span><span>:</span> /images/code<span>-</span>monkeys<span>-</span>logos/code<span>-</span>monkeys<span>-</span>full<span>-</span>logo.png
<span>tagline</span><span>:</span> Let's get down to Monkey Business
<span>actionText</span><span>:</span> Learn to Code like a Monkey →
<span>actionLink</span><span>:</span> /topics/
<span>features</span><span>:</span>
  <span>-</span> <span>title</span><span>:</span> Learn
  <span>-</span> <span>title</span><span>:</span> Code
  <span>-</span> <span>title</span><span>:</span> Crush
<span>footer</span><span>:</span> Your Site's License <span>|</span> Copyright © 2022<span>-</span>present Your Name</span>
<span>---</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br></div></div></code-block>
</code-group>
<p>If you do decide to add a footer using the frontmatter in the homepage, then the HTML will look like this:</p>
<code-group>
<code-block title="HTML After Adding a Homepage Footer">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en-US<span>"</span></span><span>></span></span>
  <span><span><span>&lt;</span>head</span><span>></span></span>...<span><span><span>&lt;/</span>head</span><span>></span></span>
  <span><span><span>&lt;</span>body</span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>app<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-container no-sidebar<span>"</span></span><span>></span></span>
        <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>navbar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>header</span><span>></span></span>
        <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>sidebar-mask<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;</span>aside</span> <span>class</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>aside</span><span>></span></span>
        <span><span><span>&lt;</span>main</span> <span>aria-labelledby</span><span><span>=</span><span>"</span>main-title<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>home<span>"</span></span><span>></span></span>
          <span><span><span>&lt;</span>header</span> <span>class</span><span><span>=</span><span>"</span>hero<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>header</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>features<span>"</span></span><span>></span></span>...<span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>theme-default-content custom content__default<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
          <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>
            Your Site's License | Copyright © 2022-present Your Name
          <span><span><span>&lt;/</span>div</span><span>></span></span>
        <span><span><span>&lt;/</span>main</span><span>></span></span>
      <span><span><span>&lt;/</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>global-ui<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    ...
  <span><span><span>&lt;/</span>body</span><span>></span></span>
<span><span><span>&lt;/</span>html</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br></div></div></code-block>
</code-group>
<h2 id="rich-text-footer"> Rich-text Footer</h2>
<p><a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> also provides a <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#rich-text-footer" target="_blank" rel="noopener noreferrer">rich-text footer<i>Content not supported</i></a> which gives you the ability to easily add more functionality to your footer like links. To set this type of footer you need to use <a href="https://vuepress.vuejs.org/guide/markdown-slot.html" target="_blank" rel="noopener noreferrer">markdown slot syntax<i>Content not supported</i></a> which we won't discuss in detail here.</p>
<p>Since the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html#rich-text-footer" target="_blank" rel="noopener noreferrer">rich-text footer<i>Content not supported</i></a> uses <a href="https://vuepress.vuejs.org/guide/markdown-slot.html" target="_blank" rel="noopener noreferrer">markdown slot syntax<i>Content not supported</i></a>, you can only add it to markdown files, and it needs to be manaully added to each markdown file to be displayed.</p>
<p>These limitations are why we'll be creating a custom footer component. If you only want to show the footer on one or a few markdown pages, then this option should work fine for you.</p>
<h2 id="vuepress-blog-theme-footer"> VuePress Blog Theme Footer</h2>
<p>The <a href="/">Code Monkeys Blog</a> uses the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, but if you're interested in using <a href="https://vuepress-theme-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/theme-blog<i>Content not supported</i></a> be sure to take a look at the <a href="https://vuepress-theme-blog.billyyyyy3320.com/config/#footer" target="_blank" rel="noopener noreferrer">footer option<i>Content not supported</i></a>.</p>
<p>Here are some examples of sites that use the <a href="https://vuepress-theme-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">@vuepress/theme-blog<i>Content not supported</i></a> footer:</p>
<ul>
<li><span><a href="https://example.vuepress-theme-blog.billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">VuePress Blog Example<i>Content not supported</i></a></span></li>
<li><span><a href="https://billyyyyy3320.com/" target="_blank" rel="noopener noreferrer">Billy Chin's Blog<i>Content not supported</i></a></span></li>
</ul>
<p>Since we'll be using social media sites that are not currently supported by the <a href="https://vuepress-theme-blog.billyyyyy3320.com/config/#footer-contact" target="_blank" rel="noopener noreferrer">footer.contact<i>Content not supported</i></a> option, we won't be using this footer. You can contribute social media contact types by making a pull request to the <a href="https://github.com/vuepress/vuepress-theme-blog" target="_blank" rel="noopener noreferrer">vuepress-theme-blog<i>Content not supported</i></a> repository though if you're interested.</p>
<h2 id="custom-footer"> Custom Footer</h2>
<p>Before designing the custom footer component, we need to have an understanding of the following topics:</p>
<ul>
<li><span><a href="https://vuepress.vuejs.org/theme/writing-a-theme.html#writing-a-theme" target="_blank" rel="noopener noreferrer">Writing a Theme<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress.vuejs.org/plugin/#plugin" target="_blank" rel="noopener noreferrer">Plugins<i>Content not supported</i></a></span></li>
<li><span><a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">Theme Inheritance<i>Content not supported</i></a></span></li>
<li><span><a href="https://vuepress.vuejs.org/theme/option-api.html#globallayout" target="_blank" rel="noopener noreferrer">globalLayout<i>Content not supported</i></a></span></li>
</ul>
<p>We won't be describing every detail about each topic above since we only need to understand how to create our custom footer component. If you're interested in learning more now, then check out the links above.</p>
<h3 id="writing-a-theme"> Writing a Theme</h3>
<p>In <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> you have the ability to make your site into a theme. This gives you the option to publish your site as an <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> package which allows other developers to easily install and use your theme.</p>
<p>To write your own theme you need to create a <code>theme</code> directory in the <code>.vuepress</code> directory. The <code>docs</code> directory for your site should now look something like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   ├── <code>theme</code>
│   │   └── config.js
│   └── README.md</p>
</code></pre><p>After creating the <code>theme</code> directory, all you need to do is create a <code>Layout.vue</code> file inside of it like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   ├── <code>theme</code>
│   │   │   └── Layout.vue
│   │   └── config.js
│   └── README.md</p>
</code></pre><p>From here you can develop your site like any other <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<i>Content not supported</i></a> application by organizing your theme however you want. Being able to organize your theme however you want provides a lot of flexibility when creating your site, but it's recommended to use the directory structure below when designing your theme:</p>
<pre><code><p><code>theme</code>
├── <code>components</code>
│   └── xxx.vue
├── <code>global-components</code>
│   └── xxx.vue
├── <code>layouts</code>
│   ├── Layout.vue <em>(<strong>Mandatory</strong>)</em>
│   └── xxx.vue
├── <code>styles</code>
│   ├── index.styl
│   └── palette.styl
├── <code>templates</code>
│   ├── dev.html
│   └── ssr.html
├── enhanceApp.js
└── index.js</p>
</code></pre><p>Here's a description for each directory and file in the <code>theme</code> directory:</p>
<ul>
<li><code>components</code>: Local components used in your theme.</li>
<li><code>global-components</code>: Components in this directory automatically get registered as global, so you don't need to explicitly import them in a file when using them.</li>
<li><code>layouts</code>: Layout components used in your theme.
<ul>
<li><code>Layout.vue</code>: A mandatory layout file for every theme.</li>
</ul>
</li>
<li><code>styles</code>: Stores files related to styling your theme.
<ul>
<li><code>index.styl</code>: Overrides any default styling and allows you to globally style your site.</li>
<li><code>palette.styl</code>: Overrides any default styling variables and allows you to add any global styling variables.</li>
</ul>
</li>
<li><code>templates</code>: Stores HTML template files.
<ul>
<li><code>dev.html</code>: HTML template file for development environment.</li>
<li><code>ssr.html</code>: HTML template file used in the build time.</li>
</ul>
</li>
<li><code>enhanceApp.js</code>: Enhances the theme of your site by giving you the ability to install Vue plugins, add router hooks, etc.</li>
<li><code>index.js</code>: Entry file for for theme configuration.</li>
</ul>
<div><p>Reviewing the Recommended Directory Structure for Themes</p>
<p>You may have recognized this directory structure from the <a href="/vuepress-tutorial-4/">VuePress Tutorial 4 - Directory Structure</a> post.</p>
</div>
<p>When creating the custom footer component we'll use the <code>global-components</code> directory, the <code>index.js</code> file, and the <code>layouts</code> directory. The <code>global-components</code> directory will be where we add the custom footer component since we want the footer to be available globally. The <code>index.js</code> file will be used to inherit the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> using <a href="https://vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">theme inheritance<i>Content not supported</i></a>. Finally, the <code>layouts</code> directory will be where we add the <code>GlobalLayout.vue</code> file which allows us to add our custom footer component to the global layout of the site.</p>
<p>Since we'll be using the <a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> to add social media icons to our footer, let's go over what <a href="https://vuepress.vuejs.org/plugin/#plugin" target="_blank" rel="noopener noreferrer">plugins<i>Content not supported</i></a> are, how to install them, and how to configure them.</p>
<h3 id="basics-of-plugins"> Basics of Plugins</h3>
<p><a href="https://v1.vuepress.vuejs.org/plugin/" target="_blank" rel="noopener noreferrer">Plugins<i>Content not supported</i></a> allow you to add global-level functionality to <a href="https://v1.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. You can configure them by passing in options. It's also possible to write your own and publish them as <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm<i>Content not supported</i></a> packages.</p>
<p>To use a plugin you need to first install it by using either <code>yarn</code> or <code>npm</code>. We'll be using <code>yarn</code> to install all of the plugins for the blog, but the commands for installing the plugins with <code>npm</code> will also be provided. After installing a plugin, you can configure it by adding it to the <code>config.js</code> file.</p>
<h3 id="vuepress-plugin-svg-icons"> VuePress Plugin - SVG Icons</h3>
<p>Now that we know the basics, we're ready to install and configure <a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a>.</p>
<h4 id="using-the-tutorials-repo"> Using the Tutorials Repo</h4>
<p>If you're following along with the tutorials, then when you switch to the <code>tutorial-8</code> branch you can run the following command to install the package instead of running the installation command:</p>
<code-group>
<code-block title="yarn">
<div><pre><code><span>yarn</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> <span>install</span>
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<p>This will ensure you have the same version used in the blog since the command uses the version specified in the <code>yarn.lock</code> file during the installation.</p>
<h4 id="using-the-installation-command"> Using the Installation Command</h4>
<p>To install the plugin in your own project you can run the following command:</p>
<code-group>
<code-block title="yarn">
<div><pre><code><span>yarn</span> <span>add</span> @goy/vuepress-plugin-svg-icons -D
</code></pre>
<div><span>1</span><br></div></div></code-block>
<code-block title="npm">
<div><pre><code><span>npm</span> <span>install</span> @goy/vuepress-plugin-svg-icons -D
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div><p>Installing the Same Plugin Version</p>
<p>If you want to ensure you're installing the same version being used in the tutorials and blog, then run <code>yarn upgrade @goy/vuepress-plugin-svg-icons@4.2.3</code>.</p>
</div>
<p>After installing the plugin, the <code>package.json</code> file should look something like this:</p>
<code-group>
<code-block title="package.json">
<div><div><br><br><br><div>&nbsp;</div><br><br><br><br></div><pre><code><span>{</span>
  ...
  <span>"devDependencies"</span><span>:</span> <span>{</span>
    <span>"@goy/vuepress-plugin-svg-icons"</span><span>:</span> <span>"^4.2.3"</span><span>,</span>
    <span>"vuepress"</span><span>:</span> <span>"1.8.2"</span>
  <span>}</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br></div></div></code-block>
</code-group>
<p>Next we need to configure the plugin by editing the <code>config.js</code> file:</p>
<code-group>
<code-block title="config.js">
<div><div><br><br><br><br><br><br><br><br><div>&nbsp;</div><br><br></div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  <span>...</span>
  head<span>:</span> <span>[</span>
    <span>...</span>
  <span>]</span><span>,</span>
  themeConfig<span>:</span> <span>{</span>
    <span>...</span>
  <span>}</span><span>,</span>
  plugins<span>:</span> <span>[</span><span>'@goy/svg-icons'</span><span>]</span><span>,</span>
<span>}</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br></div></div></code-block>
</code-group>
<p>To add the social media icons to the site we need to create an <code>icons</code> directory in the <code>docs</code> directory. Here's what the <code>docs</code> directory should look like after adding the <code>icons</code> directory:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   ├── <code>icons</code>
│   └── README.md</p>
</code></pre><p>The plugin recommends using <a href="https://www.iconfont.cn/collections/index" target="_blank" rel="noopener noreferrer">iconfont<i>Content not supported</i></a> to find <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank" rel="noopener noreferrer">Scalable Vector Graphics (SVGs)<i>Content not supported</i></a> for your site. After creating an account, you can search for icons and download them. When downloading the icons you have the option to specify a color and size for the icon. For the blog we'll be using a color of <code>#e6e6e6</code> and a size of <code>200</code> which is the default size.</p>
<p>You can download the icons from the <code>tutorial-8</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-8" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<div><p>Using SVG Export</p>
<p>To easily download the icons used in the footer you can also install the browser extension <a href="https://svgexport.io/" target="_blank" rel="noopener noreferrer">SVG Export<i>Content not supported</i></a>. After installing the extension, all you need to do is click the extension icon which will extract all of the SVGs including their inline styles from the current page. A new tab will open containing all of the extracted SVGs which you can then download.</p>
</div>
<p>We'll be using icons for these social media sites as well as to an RSS feed for Code Monkeys in the footer:</p>
<ul>
<li><span><a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">YouTube<i>Content not supported</i></a></span></li>
<li><span><a href="https://gab.com/" target="_blank" rel="noopener noreferrer">Gab<i>Content not supported</i></a></span></li>
<li><span><a href="https://telegram.org/" target="_blank" rel="noopener noreferrer">Telegram<i>Content not supported</i></a></span></li>
<li><span><a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.rssboard.org/" target="_blank" rel="noopener noreferrer">RSS<i>Content not supported</i></a></span></li>
<li><span><a href="https://keybase.io/" target="_blank" rel="noopener noreferrer">Keybase<i>Content not supported</i></a></span></li>
</ul>
<p>After downloading the icons the <code>icons</code> directory should look something like this:</p>
<pre><code><p>├── <code>icons</code>
│   ├── Gab.svg
│   ├── GitHub.svg
│   ├── RSS.svg
│   ├── Keybase.svg
│   ├── Telegram.svg
│   ├── Twitter.svg
│   └── YouTube.svg</p>
</code></pre><p>After adding the icons to <code>icons</code> directory, the plugin will automically load the icons and will provide a global component named <code>vp-icon</code>. To use the <code>vp-icon</code> component you need to pass a <code>name</code> attribute to it where the value is the name of the SVG file you want to use.</p>
<p>If you're interested in learning more about the plugin, then check out the <a href="https://vp-icon.goyfe.com/" target="_blank" rel="noopener noreferrer">vuepress-plugin-svg-icons<i>Content not supported</i></a> documentation which contains more information about configuration options, component props, and command-line interface (CLI) commands.</p>
<p>We're now ready to create the custom footer component.</p>
<h3 id="footer-component"> Footer Component</h3>
<p>The custom footer component will be added to the <code>global-components</code> directory. Here's what the <code>theme</code> directory will look like after adding the <code>Footer.vue</code> file:</p>
<pre><code><p>├── <code>theme</code>
│   ├── <code>global-components</code>
│   │   └── Footer.vue</p>
</code></pre><p>Here we're creating a <code>*.vue</code> file which is known as a <a href="https://v2.vuejs.org/v2/guide/single-file-components.html?redirect=true" target="_blank" rel="noopener noreferrer">Single-File Component (SFC)<i>Content not supported</i></a>. This is a special file format that allows you to encapsulate the HTML in a <code>template</code> tag, the JavaScript in a <code>script</code> tag, and the CSS in a <code>style</code> tag for the component.</p>
<p>Here's what the <code>Footer.vue</code> file looks like after adding these three main sections:</p>
<code-group>
<code-block title="Main Sections">
<div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span><span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br></div></div></code-block>
</code-group>
<p>To start we'll add the HTML to the <code>template</code> tag. The contents of the footer will be wrapped in a <code>footer</code> tag containing two child tags a <code>div</code> tag and a <code>p</code> tag. The <code>div</code> tag will contain seven child <code>a</code> tags one for each of the social media icons. The <code>p</code> tag will contain authorship information for the blog.</p>
<p>Each <code>a</code> tag will have the following attributes: <code>href</code>, <code>target</code>, and <code>rel</code>. The <code>href</code> specifies the URL of the page the link goes to, the <code>target</code> specifies where to open the link, and the <code>rel</code> specifies the relationship between the current page and the link. Each <code>a</code> tag will also have a child <code>vp-icon</code> tag which will have the <code>name</code> attribute discussed earlier.</p>
<p>Here's what the <code>Footer.vue</code> file looks like after adding the HTML to the <code>template</code> tag:</p>
<code-group>
<code-block title="Adding the HTML to the Template Tag">
<div><div><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>footer</span><span>></span></span>
    <span><span><span>&lt;</span>div</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://github.com/codemonkeysio<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>GitHub<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://www.youtube.com/@codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>YouTube<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://gab.com/codemonkeys<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Gab<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://t.me/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Telegram<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://twitter.com/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Twitter<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://codemonkeys.tech/rss.xml<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>RSS<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://keybase.io/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Keybase<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>p</span><span>></span></span>Made by &amp; for Code Monkeys 🐵<span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>footer</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br></div></div></code-block>
</code-group>
<p>Each <code>href</code> has a value of the related URL for the social media site. Each <code>target</code> has a value of <code>_blank</code>, and each <code>rel</code> has a value of <code>noopener noreferrer</code>.</p>
<p>As mentioned in the previous post these values for the <code>target</code> and <code>rel</code> attributes are used to prevent a vulnerability known as <a href="https://owasp.org/www-community/attacks/Reverse_Tabnabbing" target="_blank" rel="noopener noreferrer">reverse tabnabbing<i>Content not supported</i></a> which can happen when a user clicks on an external link. All major browsers have fixed this vulnerability, but you can still include these attributes in case a user is using a browser without this security update.</p>
<p>Each <code>name</code> attribute has a value of the name of the related SVG file with the <code>.svg</code> extension omitted.</p>
<p>Next we'll export the JavaScript in the <code>script</code> tag and give the component a name. Here's what the <code>Footer.vue</code> file looks like after updating the <code>script</code> tag:</p>
<code-group>
<code-block title="Exporting and Naming the Component">
<div><div><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  ...
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'Footer'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span><span>></span></span><span><span>
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br></div></div></code-block>
</code-group>
<p>Finally, we'll style the component by adding the following CSS classes: <code>&quot;footer&quot;</code>, <code>&quot;icons&quot;</code>, and <code>&quot;made-by&quot;</code>. We'll be adding the <code>&quot;footer&quot;</code> class to the <code>footer</code> tag, the <code>&quot;icons&quot;</code> class to the <code>div</code> tag, and the <code>&quot;made-by&quot;</code> class to the <code>p</code> tag. Then we'll add styling for each of the CSS classes in the <code>style</code> tag. Here's what the <code>Footer.vue</code> file looks like after styling:</p>
<code-group>
<code-block title="Styling the Component">
<div><div><br><div>&nbsp;</div><div>&nbsp;</div><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>footer</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>icons<span>"</span></span><span>></span></span>
      ...
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>made-by<span>"</span></span><span>></span></span>Made by &amp; for Code Monkeys 🐵<span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>footer</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
  <span>...</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.footer
  <span>display</span><span>:</span> flex
  <span>flex-direction</span><span>:</span> column
  <span>align-items</span><span>:</span> center
  <span>padding</span><span>:</span> 2.5rem 2.5rem 2rem
  .icons
    <span>display</span><span>:</span> flex
    <span>margin-bottom</span><span>:</span> 1.75rem
    <span>font-size</span><span>:</span> 2rem
  .icons > <span>a</span><span>:</span><span>not</span><span>(</span><span>:</span>last-child<span>)</span>
    <span>margin-right</span><span>:</span> 4.6875rem
  .made-by
    <span>margin</span><span>:</span> 0
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br></div></div></code-block>
</code-group>
<p>The <code>lang</code> attribute used in the <code>style</code> tag is used to specify which pre-processor we want to use in the component. Here we're using <a href="https://stylus-lang.com/" target="_blank" rel="noopener noreferrer">Stylus<i>Content not supported</i></a> which is the default pre-processor used by <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. If you want to learn how to use a different pre-processor, then check out <a href="https://vuepress.vuejs.org/guide/using-vue.html#using-pre-processors" target="_blank" rel="noopener noreferrer">Using Pre-processors<i>Content not supported</i></a>.</p>
<p>A <code>scoped</code> attribute is also used in the <code>style</code> tag which means all of the styling only applies to the current component. Take a look at <a href="https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css" target="_blank" rel="noopener noreferrer">Scoped CSS<i>Content not supported</i></a> to learn more about the <code>scoped</code> attribute.</p>
<p>The <code>&quot;footer&quot;</code> class is given <code>display: flex</code> which defines a flex container for all of the direct children of the tag where the <code>&quot;footer&quot;</code> class is used. In this case the <code>&quot;footer&quot;</code> class is used on the <code>footer</code> tag which means the <code>div</code></code> tag and <code>p</code> tag will be in a flex container. The <code>&quot;footer&quot;</code> class is also given <code>flex-direction: column</code> which means the flex items in the flex container, i.e., the <code>div</code> tag and the <code>p</code> tag will be stacked on top of each other in a column as opposed to the default row setting. The flex items are then given <code>align-items: center</code></code> which will horizontally center the flex items since the flex direction is set to column. The <code>&quot;footer&quot;</code> class is then given <code>padding: 2.5rem 2.5rem 2rem</code> which will set a padding of <code>2.5rem</code> for the top, <code>2.5rem</code> for the left and right, and <code>2rem</code> for the bottom.</p>
<p>If you're unfamiliar with flexbox, then check out <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener noreferrer">A Complete Guide to Flexbox<i>Content not supported</i></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noopener noreferrer">Basic Concepts of Flexbox<i>Content not supported</i></a>. Also, if you're unfamiliar with CSS units like <code>rem</code>, then check out <a href="https://www.w3schools.com/cssref/css_units.asp" target="_blank" rel="noopener noreferrer">CSS Units<i>Content not supported</i></a>.</p>
<p>The <code>&quot;icons&quot;</code> class is also given <code>display: flex</code> which means each <code>a</code> tag will be in a flex container since they're all direct children of the <code>div</code> tag which has the <code>&quot;icons&quot;</code> class. The <code>&quot;icons&quot;</code> class is also given <code>margin-bottom: 1.75rem</code> and <code>font-size: 2rem</code> which increases the size of the icons. The CSS selector <code>.icons &gt; a:not(:last-child)</code> is then used which selects all <code>a</code> tags where the parent tag has a class of <code>&quot;icons&quot;</code> except for the last <code>a</code> tag. Each <code>a</code> tag that is selected is given <code>margin-right: 4.6875rem</code>.</p>
<p>If you're unfamiliar with CSS selectors, then check out the <a href="https://www.w3schools.com/cssref/css_selectors.asp" target="_blank" rel="noopener noreferrer">CSS Selector Reference<i>Content not supported</i></a>.</p>
<p>Finally, the <code>&quot;made-by&quot;</code> class is given <code>margin: 0</code> which removes the margin from the <code>p</code> tag.</p>
<p>If you didn't feel comfortable with the CSS discussed above, then here's a good resource to go through <a href="https://www.w3schools.com/css/default.asp" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a>.</p>
<p>As we continue to develop the blog, we'll add more styling to the footer to make it look presentable in different scenarios like on smaller screen sizes, when a sidebar is present, etc.</p>
<p>Here's what the <code>Footer.vue</code> file should look like:</p>
<code-group>
<code-block title="Footer.vue">
<div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>footer</span> <span>class</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>div</span> <span>class</span><span><span>=</span><span>"</span>icons<span>"</span></span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://github.com/codemonkeysio<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>GitHub<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://www.youtube.com/@codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>YouTube<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://gab.com/codemonkeys<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Gab<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://t.me/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Telegram<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://twitter.com/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Twitter<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://codemonkeys.tech/rss.xml<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>RSS<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
      <span><span><span>&lt;</span>a</span>
        <span>href</span><span><span>=</span><span>"</span>https://keybase.io/codemonkeystech<span>"</span></span>
        <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span>
        <span>rel</span><span><span>=</span><span>"</span>noopener noreferrer<span>"</span></span>
      <span>></span></span>
        <span><span><span>&lt;</span>vp-icon</span> <span>name</span><span><span>=</span><span>"</span>Keybase<span>"</span></span><span>></span></span><span><span><span>&lt;/</span>vp-icon</span><span>></span></span>
      <span><span><span>&lt;/</span>a</span><span>></span></span>
    <span><span><span>&lt;/</span>div</span><span>></span></span>
    <span><span><span>&lt;</span>p</span> <span>class</span><span><span>=</span><span>"</span>made-by<span>"</span></span><span>></span></span>Made by &amp; for Code Monkeys 🐵<span><span><span>&lt;/</span>p</span><span>></span></span>
  <span><span><span>&lt;/</span>footer</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  name<span>:</span> <span>'Footer'</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>

<span><span><span>&lt;</span>style</span> <span>lang</span><span><span>=</span><span>"</span>stylus<span>"</span></span> <span>scoped</span><span>></span></span><span><span>
.footer
  <span>display</span><span>:</span> flex
  <span>flex-direction</span><span>:</span> column
  <span>align-items</span><span>:</span> center
  <span>padding</span><span>:</span> 2.5rem 2.5rem 2rem
  .icons
    <span>display</span><span>:</span> flex
    <span>margin-bottom</span><span>:</span> 1.75rem
    <span>font-size</span><span>:</span> 2rem
  .icons > <span>a</span><span>:</span><span>not</span><span>(</span><span>:</span>last-child<span>)</span>
    <span>margin-right</span><span>:</span> 4.6875rem
  .made-by
    <span>margin</span><span>:</span> 0
</span></span><span><span><span>&lt;/</span>style</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br><span>70</span><br><span>71</span><br><span>72</span><br><span>73</span><br><span>74</span><br><span>75</span><br><span>76</span><br><span>77</span><br><span>78</span><br></div></div></code-block>
</code-group>
<p>After adding the <code>global-components</code> directory to the <code>theme</code> directory, you may have noticed the site is rendering a blank page. This is because we created a directory in the <code>theme</code> directory, so <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> is now looking for a <code>Layout.vue</code> file in the <code>theme</code> directory.</p>
<p>We have the option of creating a <code>layouts</code> directory and placing our own <code>Layout.vue</code> file inside of it, but as previously mentioned we're going to use <a href="https://vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">theme inheritance<i>Content not supported</i></a> to inherit the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<h3 id="theme-inheritance"> Theme Inheritance</h3>
<p><a href="https://vuepress.vuejs.org/theme/inheritance.html" target="_blank" rel="noopener noreferrer">Theme inheritance<i>Content not supported</i></a> allows you to pass all of the capabilities from a parent theme to a child theme. In our case the parent theme is the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, and we'll be creating the child theme as we develop the blog.</p>
<p>To create the child theme from the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, we need to configure the <a href="https://vuepress.vuejs.org/theme/option-api.html#extend" target="_blank" rel="noopener noreferrer">extend<i>Content not supported</i></a> option in the <code>index.js</code> file.</p>
<p>First, we need to create the <code>index.js</code> file in the <code>theme</code> directory which should now look like this:</p>
<pre><code><p>├── <code>theme</code>
│   ├── <code>global-components</code>
│   └── index.js</p>
</code></pre><p>We can now configure the <a href="https://vuepress.vuejs.org/theme/option-api.html#extend" target="_blank" rel="noopener noreferrer">extend<i>Content not supported</i></a> option:</p>
<code-group>
<code-block title="Configuring the Extend Option">
<div><pre><code>module<span>.</span>exports <span>=</span> <span>{</span>
  extend<span>:</span> <span>'@vuepress/theme-default'</span><span>,</span>
<span>}</span><span>;</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<p>The inherited <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a> should now be rendering alongside the child theme instead of the blank page.</p>
<div><p>Missing Layout.vue File</p>
<p>You may have noticed that the <code>Layout.vue</code> file is listed as a mandatory file, but we didn't need to create one in the <code>theme</code> directory. This is because you don't need to explicitly create the <code>Layout.vue</code> file when you're inheriting it from the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
</div>
<p>The child theme is also able to override files in the parent theme by creating a file with the same name in the same location. We'll go over how to override parent theme files in more detail in future tutorials. You can also override some parent theme files by just using the same name as the parent theme file in the child theme. For example, we're going to override the <code>GlobalLayout.vue</code> file by using the same name for the file in the child theme and the code provided by the documentation.</p>
<p>Now let's create the <code>layouts</code> directory in the <code>theme</code> directory. This is where we'll be adding the <code>GlobalLayout.vue</code> file which again allows us to add our custom footer component to the global layout of the site.</p>
<h3 id="using-the-global-layout"> Using the Global Layout</h3>
<p>Here's what the <code>theme</code> directory will look like after creating the <code>GlobalLayout.vue</code> file in the <code>layouts</code> directory:</p>
<pre><code><p>├── <code>theme</code>
│   ├── <code>global-components</code>
│   ├── <code>layouts</code>
│   │   └── GlobalLayout.vue
│   └── index.js</p>
</code></pre><p>The <code>GlobalLayout.vue</code> file is responsible for handling the global layout of the site. Here's the path to the default <code>GlobalLayout.vue</code> file provided by <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a> <code>node_modules/@vuepress/core/lib/client/components</code>. You can also view the code for the default global layout <a href="https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/core/lib/client/components/GlobalLayout.vue" target="_blank" rel="noopener noreferrer">here<i>Content not supported</i></a>.</p>
<p>The default global layout gives you the ability to render different layouts depending on if <code>$page.path</code> is defined, i.e., the URL of the page is valid and if <code>$page.frontmatter.layout</code> is defined. If only the <code>$page.path</code> is defined, then the default layout will be used which is <code>Layout</code>. If <code>$page.frontmatter.layout</code> is defined, then the specific layout for that page will be used. If <code>$page.path</code> is not defined, then the <code>NotFound</code> layout is used which is the layout for the 404 page provided by <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress<i>Content not supported</i></a>. In most scenarios you don't need to edit the default global layout, but if you want to add a global header or a global footer to your site, then this is a good place to add it.</p>
<p>To override and edit the <code>GlobalLayout.vue</code> file we're going to use the code provided by the <a href="https://vuepress.vuejs.org/theme/option-api.html#globallayout" target="_blank" rel="noopener noreferrer">globalLayout<i>Content not supported</i></a> section from the documentation. The code provided by the documentation basically uses a <a href="https://v2.vuejs.org/v2/guide/computed.html?redirect=true" target="_blank" rel="noopener noreferrer">computed property<i>Content not supported</i></a> to determine the layout for a page based on if the URL of the page is defined and if the page uses a specific layout provided by the frontmatter. This is similar to the logic previously described when discussing the default global layout.</p>
<p>Here's the code from the documentation:</p>
<code-group>
<code-block title="GlobalLayout.vue from Docs">
<div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>header</span><span>></span></span><span><span><span>&lt;</span>h1</span><span>></span></span>Header<span><span><span>&lt;/</span>h1</span><span>></span></span><span><span><span>&lt;/</span>header</span><span>></span></span>
    <span><span><span>&lt;</span>component</span> <span>:is</span><span><span>=</span><span>"</span>layout<span>"</span></span><span>/></span></span>
    <span><span><span>&lt;</span>footer</span><span>></span></span><span><span><span>&lt;</span>h1</span><span>></span></span>Footer<span><span><span>&lt;/</span>h1</span><span>></span></span><span><span><span>&lt;/</span>footer</span><span>></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  computed<span>:</span> <span>{</span>
    <span>layout</span> <span>(</span><span>)</span> <span>{</span>
      <span>if</span> <span>(</span><span>this</span><span>.</span>$page<span>.</span>path<span>)</span> <span>{</span>
        <span>if</span> <span>(</span><span>this</span><span>.</span>$frontmatter<span>.</span>layout<span>)</span> <span>{</span>
          <span>// You can also check whether layout exists first as the default global layout does.</span>
          <span>return</span> <span>this</span><span>.</span>$frontmatter<span>.</span>layout
        <span>}</span>
        <span>return</span> <span>'Layout'</span>
      <span>}</span>
      <span>return</span> <span>'NotFound'</span>
    <span>}</span>
  <span>}</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br></div></div></code-block>
</code-group>
<p>We're going to remove the example <code>header</code> tag and replace the example <code>footer</code> tag with our previously created footer component.</p>
<p>Here's what the <code>GlobalLayout.vue</code> file should look like after the changes:</p>
<code-group>
<code-block title="GlobalLayout.vue">
<div><div><br><br><br><div>&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre><code><span><span><span>&lt;</span>template</span><span>></span></span>
  <span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>global-layout<span>"</span></span><span>></span></span>
    <span><span><span>&lt;</span>component</span> <span>:is</span><span><span>=</span><span>"</span>layout<span>"</span></span><span>/></span></span>
    <span><span><span>&lt;</span>Footer</span> <span>/></span></span>
  <span><span><span>&lt;/</span>div</span><span>></span></span>
<span><span><span>&lt;/</span>template</span><span>></span></span>

<span><span><span>&lt;</span>script</span><span>></span></span><span><span>
<span>export</span> <span>default</span> <span>{</span>
  computed<span>:</span> <span>{</span>
    <span>layout</span> <span>(</span><span>)</span> <span>{</span>
      <span>if</span> <span>(</span><span>this</span><span>.</span>$page<span>.</span>path<span>)</span> <span>{</span>
        <span>if</span> <span>(</span><span>this</span><span>.</span>$frontmatter<span>.</span>layout<span>)</span> <span>{</span>
          <span>// You can also check whether layout exists first as the default global layout does.</span>
          <span>return</span> <span>this</span><span>.</span>$frontmatter<span>.</span>layout
        <span>}</span>
        <span>return</span> <span>'Layout'</span>
      <span>}</span>
      <span>return</span> <span>'NotFound'</span>
    <span>}</span><span>,</span>
  <span>}</span><span>,</span>
<span>}</span>
</span></span><span><span><span>&lt;/</span>script</span><span>></span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br></div></div></code-block>
</code-group>
<div><p>Importing the Footer Component</p>
<p>Notice that we don't need to explicitly import the footer component since we made it a global component by adding it to the <code>global-components</code> directory in the <code>theme</code> directory.</p>
</div>
<h3 id="next-steps"> Next Steps</h3>
<p>In the next tutorial we'll discuss how to override the <code>index.styl</code> and <code>palette.styl</code> files to add our own global styling to the site. The global styling will include background color, accent color, text color, etc.</p>
]]></content:encoded>
    </item>
    <item>
      <title>Contact</title>
      <link>https://codemonkeys.tech/contact/</link>
      <guid>https://codemonkeys.tech/contact/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Contact</source>
      <description>Want to contact your fellow Code Monkeys? Then check out these contact methods which include free and open source software with an emphasis on private and secure communication! 📞🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="contact-your-fellow-code-monkeys-📞-🐒"> Contact Your Fellow Code <div>Monkeys !!! 📞 🐒</div></h1>
</template><template>
<div>
<div
 
>
<h2 id="socials-🐵"> Socials 🐵</h2>
<p>🔑 Securely message with <a href="https://keybase.io/codemonkeystech" target="_blank" rel="noopener noreferrer">Keybase<i>Content not supported</i></a> - <code>codemonkeystech</code></p>
<p>📨 Join our <a href="https://t.me/codemonkeystech" target="_blank" rel="noopener noreferrer">Telegram<i>Content not supported</i></a> - <code>@codemonkeystech</code></p>
<p>🐸 Let's <a href="https://gab.com/codemonkeys" target="_blank" rel="noopener noreferrer">Gab<i>Content not supported</i></a> - <code>@codemonkeys</code></p>
<p>💡 Speak your mind on <a href="https://www.minds.com/codemonkeys/" target="_blank" rel="noopener noreferrer">Minds<i>Content not supported</i></a> - <code>@codemonkeys</code></p>
<p>🐦 Send a <a href="https://twitter.com/codemonkeystech" target="_blank" rel="noopener noreferrer">Tweet<i>Content not supported</i></a> - <code>@codemonkeystech</code></p>
<p>📧 Reach out via <a href="mailto:support@codemonkeys.tech">Email</a> - <code>support@codemonkeys.tech</code></p>
<p><span><vp-icon name="RSS"></vp-icon></span>  Subscribe to the <a href="https://codemonkeys.tech/rss.xml" target="_blank" rel="noopener noreferrer">RSS feed<i>Content not supported</i></a></p>
<p>🦩 J the Code Monkey's npub - <code>npub1zn559gr2vwyex2s2mt2s7x5r5ryjeyy0zwy2zx3ckp6ktwpe4p4spgt84e</code></p>
</div>
<div
 
>
<h2 id="primary-pgp-key-🔐"> Primary PGP Key 🔐</h2>
<p>If you know how to use Pretty Good Privacy (PGP), then you can securely communicate with your fellow Code Monkey by using the PGP public key below to send an encrypted message that only I can decrypt.</p>
<code-group>
<code-block title="Fingerprint">
<div><pre><code>B7E6 FB94 A589 876C CFC2 1E4B 1E07 E75C 19F1 AE0E
</code></pre>
<div><span>1</span><br></div></div></code-block>
</code-group>
<div>
<details><summary>PGP Public Key</summary>
<div>
    <button type="button" v-clipboard:copy="publicKey" v-clipboard:success="onCopy" v-clipboard:error="onError">
      Copy
    </button>
</div>
<div><pre><code>-----BEGIN PGP PUBLIC KEY BLOCK-----

mQINBGRC03cBEADDn1vVti8bek91JwLh65YNRvF5WRFEAzi8jQaAk55a2JKXvkfW
S1QnP9jZBg/fVCYyi5fopjZqckDAiSjWaIkgZLyEJ4dVeUhw2AoTt8WVgjjC9BI3
6neDCcpz2dHERflBOsR6M0QNUcR/8jzRS7zPUeXWY9VqZIEPanqjbgbU5HwoJvvi
c/zikG3GLGXv3Hm2E2pO03IdOq3Q4y2vDpIptltB5FpTQi/iZzs+Wz2iHQkE3sMK
J8MxubwYkmFoRjbtUHDnoegVHcoFJprdxMnzJYm2TYauneyAKIuSXdBe7pOCxEjO
ikY9gTZ0ldufcfgnO3Harmie4hhuSIYCdLEJc86Yfz6MJVqducf/qjfOfvvJRBja
WQR8eoTGatryQOaRWVqXuSfZb9qRRBbMtPhC4m5FajUBc0l1+YztkQ2UoNKlyTQW
mZ0fshNqhuRb1mxSmUBEMvFxRLuXzyqrAj6dAyEug1vch7PweSMaG4WnY4OZwJcL
DGgBg6p9cFrP9oyp5p+WBepOAHMxLSRgRXYusZH1/IKV1PZXWBqJV1W0Csv5cl6b
/aSnrIU48G0YVYJSUds1LL6atbsuCYtcYMDS4vpCeNxsgpsIDnh22WKtSak8+5Po
MPjx+Ttt5J35D8UGTd668CUtmzp5KEQ48lbTsl3OAq2I8xzJmC8b0Xy9mQARAQAB
tDZKYXkgdGhlIENvZGUgTW9ua2V5IDxqYXl0aGVjb2RlbW9ua2V5Ljd2azdpQHNs
bWFpbC5tZT6JAlQEEwEKAD4CGwEFCwkIBwMFFQoJCAsFFgIDAQACHgECF4AWIQS3
5vuUpYmHbM/CHkseB+dcGfGuDgUCaj14IQUJC54/KgAKCRAeB+dcGfGuDs+FD/9v
Nur7MvhGXGLTHfpwkuJ38FYwBlRjFQNMO8KnvpPuIQbAUWx9w84uPUCvXKVn/lmN
uHQ1TUXQBtIIaH7cxgz1k17HOZTTUJtPhoXNvVAcimKFM4GjJ3qIjE0O1u7czI1x
UWMtFs5Y8va1wtOC+dytZQ/lXUv1IuJeot2xCbLsFoL8MZGALzI2AdK3zazYRE4H
iccndfAfchMx0DTr70h3seM1aXFNdobmrvtGETCHIObJUMGrb45q5TTtx4bykHmt
HrbdKVBVsFUi/W77/JLJRrF1wmKdL7QiMzwY4q4omNB11BvixFaESKHf4vXa4tbH
rjgg8pR3V4yRx9x2EJj8HIzTnrCWpNfkD4WHAsJ3giA0czAMHsVTOrbp41+SKCUJ
V1rLaGylXQhaGWwuuaZjWsowuIaBCV5W9wSXuwBUg507TY3C6brs7xxGXqFfxSWH
7b/OlYniiB9CVucYd9ZpkJX8HXiRjDHb1fpvuVWew3RbmWl1b2E83TZBl5S6Mw/Y
DLYagF7plZjlj6jWdN2G6bT9jPdZ/FRyNej45CKivoNUDCrH4MrnuRYQu5MSahCg
1BMS5RPgTdHRmxa0vgKNinwkYVATd9aARfg2EEJkbSPEzBm2hoQtQCISJxtT5e9e
Ol0YbTQ5bDKadvIkTPsrceSdDXTt+llZpPIzviTU9LQnSmF5IHRoZSBDb2RlIE1v
bmtleSA8YzBkZW0wbmtleXNAcG0ubWU+iQJUBBMBCgA+AhsBBQsJCAcDBRUKCQgL
BRYCAwEAAh4BAheAFiEEt+b7lKWJh2zPwh5LHgfnXBnxrg4FAmo9eCcFCQuePyoA
CgkQHgfnXBnxrg5ZiQ//Y1+wJmQF9Lq3LXH2OeeWBxXuOz6hIdgCcLjLC5mONt+s
yZUEvf8YKjINJJxd8Qd+OmONWQ9PU2UsYl6YFTPCI9rkgWjdZsHdKZJfnb1DTLei
qvHmcrwQoDrmCj4GhWFVb6JaJ5OVFc9h3REtOYdFeALPht8FNYmJTIF3YriNAGxr
Xf8BmR1lwAIX0wyRUoG71msTI3CRRzvwdY6+qbmpVMbFNJQrbAiRxGWEzlqPlX4u
hv3Ar2di+A3JQJ6g+YRJBpLsZgEqBFZDLfjoZ6o7uOYxnP7kKZq19IFzE//E9KTQ
IHPHV113MBQ4SdvmVoZadeywJNcVZ4/tzDja/onCNTGM/LMsTNwS6zQ0T4XWcYCS
jiHm/qqwt6CJOY5aTnZzC7jflVJJmIztLG5eQvmjjQHNWxQXsqbQohVKZlihgEjL
5DUS4APS2ZoZTAJ0LKcpuXwhbQdpud8DK9vmW9uWhmy/03pF7D2xnuCu8mMoZlg1
8fxm/cQVnmsxX3l3/mPebODzExOCBb5s1A63fm0peDEB3J6/2/TI9bJIHMtqgd+e
YcULBmcCGET/592pviYWD8omesFH81EVO6mFQBDiTJNvVUVnXX8ikIBanub8Sppb
7WhJ346Jn90yNsREKcUK1eHJBuWQsFIrYC8FRWOdMTpPSymRbqoU9a4SjFwBtdXR
zsnOxwEQAAEBAAAAAAAAAAAAAAAA/9j/4AAQSkZJRgABAQIAJQAlAAD//gAseHI6
ZDpEQUZnd0Jpdng2azo0LGo6MzE3OTExNjY5Nyx0OjIzMDQyMTE2/+ICsElDQ19Q
Uk9GSUxFAAEBAAACoGxjbXMEQAAAbW50clJHQiBYWVogB+cABAAVABAAOAAIYWNz
cEFQUEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1sY21zAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANZGVz
YwAAASAAAABAY3BydAAAAWAAAAA2d3RwdAAAAZgAAAAUY2hhZAAAAawAAAAsclhZ
WgAAAdgAAAAUYlhZWgAAAewAAAAUZ1hZWgAAAgAAAAAUclRSQwAAAhQAAAAgZ1RS
QwAAAhQAAAAgYlRSQwAAAhQAAAAgY2hybQAAAjQAAAAkZG1uZAAAAlgAAAAkZG1k
ZAAAAnwAAAAkbWx1YwAAAAAAAAABAAAADGVuVVMAAAAkAAAAHABHAEkATQBQACAA
YgB1AGkAbAB0AC0AaQBuACAAcwBSAEcAQm1sdWMAAAAAAAAAAQAAAAxlblVTAAAA
GgAAABwAUAB1AGIAbABpAGMAIABEAG8AbQBhAGkAbgAAWFlaIAAAAAAAAPbWAAEA
AAAA0y1zZjMyAAAAAAABDEIAAAXe///zJQAAB5MAAP2Q///7of///aIAAAPcAADA
blhZWiAAAAAAAABvoAAAOPUAAAOQWFlaIAAAAAAAACSfAAAPhAAAtsRYWVogAAAA
AAAAYpcAALeHAAAY2XBhcmEAAAAAAAMAAAACZmYAAPKnAAANWQAAE9AAAApbY2hy
bQAAAAAAAwAAAACj1wAAVHwAAEzNAACZmgAAJmcAAA9cbWx1YwAAAAAAAAABAAAA
DGVuVVMAAAAIAAAAHABHAEkATQBQbWx1YwAAAAAAAAABAAAADGVuVVMAAAAIAAAA
HABzAFIARwBC/9sAQwA5JysyKyQ5Mi4yQD05RFaPXVZPT1avfYRoj8+22tbLtsjE
5P///+Tz//bEyP///////////93//////////////9sAQwE9QEBWS1aoXV2o/+zI
7P//////////////////////////////////////////////////////////////
/////8IAEQgBIADwAwEiAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAABAgP/
xAAXAQEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAHiAAAAAAAAAAAA
AAAAAAAUiiUAEoiiLAAAAAAABQAAAAAAASiAAAAFAABSN6zeetZzdOcOmWjm6zc5
rNwACLAABQGjOtyaXGTeY2Q3AALcm9LyubrOtZvJ051KUQCyjazWNapjGs7Iumqm
sOg5tNzLdMNXN5NZqQZ157s9MNVnKWVNKdOe8zV1Lm4zZcNtZUwbKwauGbYbiwdO
etTXJZU9Es3jpIzM3ipbx1zc3HTNxvOm87Omy52Bdmc7wBsrNNk6TNxrLc3z6SaS
0vPpzOnLrzG5TnUqd659JrnvnanWemc2I3AYWtyGLDVnTNc7k1rOs3E1rcjWc3Os
KnrOdmtUbzstc3TncpOmCWNzoli85suBosuJpLKi9Oe5tnLcDcAA1SaxZagDed4m
4Ki6zqbwKh057ysyzcSxl6cuuVyG4AABtNzXJrNTUp059Oc0FTdZ1NYFS3jWbJrD
BdTrnU1yFSBLKALB1nPrNc3SF59Bz3mbPRhlb5m401m5xumd3kawVICWAFSg0W3l
NXfNs9ZneWiYy6NzOpCrlusZbO7z6ZvNvFSIAALKXo5zSFSABvXK5upq5sZyWFSA
B0znrNcprNSAAsFgVKAAAAAAACCwWAAAAAAsFQVKACFQWAAAAAAAAAAAAAAAAAAA
B//EAB4QAAMBAQEAAwEBAAAAAAAAAAABERAgMDFAQXAh/9oACAEBAAEFAv6BCbCf
Xm3aXIT6MJlL4UuT1WUvtcnjCCHzO4TuDXKLr4RdhCZcfCyj6/Zj1D4pS+CIPHqG
LXi9Fwj9Yh6hiHq5nih4h/J+vqdLL3NQxEx4xD26h+d5Q9QxD8H1O3iGQmN5chB+
b4Q9WUvVEx8LyQ+X8eCHyh6h/TQ+Vwh8Ifsh+KHwh+yyeCHwh8TzuTpdIeTL7zZt
2Z8kx+qQ8vE2ZdomP0XNycXbwhryXhch/pC9oa8n43L5Pwv8w//EAB8RAAICAgID
AQAAAAAAAAAAAAABEBEgMSFBAjBQcf/aAAgBAwEBPwH6VHBZwV6aLLxs4GsKKHFF
FFFLCpcpDcXO57GIQhIbEhzUM6GMWoQmNZJDYtFHRZZ1CY1Lhwi8OpeoWo8ZWPU+
ULUIcLLZQ1ZosbsSKs0Xlos3FR+liy1hcXhv6H//xAAdEQACAgMBAQEAAAAAAAAA
AAAAARARIDFBIVAw/9oACAECAQE/AfpWelHpf42UVjR7lYossssvNSxRU6nghjhi
RYpuEdEI7DhZNiQ9lxRUtCcqFDKw7K3D3Dl49lQ9wxQ8tFi8NlQ2aN57Km5oeW8K
isNfQ//EABQQAQAAAAAAAAAAAAAAAAAAAKD/2gAIAQEABj8CBx//xAAgEAACAgID
AQEBAQAAAAAAAAAAARExECAhMFFBQGFw/9oACAEBAAE/If8AJY/WmYjCRwNBv+aJ
EUkiUh+SZwmEeGMtvwphIUMtn0JhIQmPyNNdiSUNBt2yL2SmNOhKXjJFd+HtIcNV
RDEYNVHBkp4vokYSiFkgUQLQkaUJSx5LVcIvCuEWyg0Zl5JZTgtDUZqWEgXKODzy
ZwRcbjFsINx1sNTmpNCuuuNCwqHYklIbnoJSNRlvgk6S0LgcllcIfLw8fouBucJJ
Q9ScFjyaUKXHIosLlHBljgsS0IOsNIn3CcEz0SwlJSG5LjQNt5rikkNYVjrKciap
SPYlA04sVJiQo4BOBeyUyBYplOC0NRouMJokDfM2w0G2yYkK6NBZWU5w3OU+jRor
6i5XWhbNimiod6uu/oO82KaULa/OrfVVpYppUvqq6XGpHDT5pYp069DcdSgJyMNQ
Kx1mhGXi+aFD89qrnH8EjUjhiWSyvRQ/AoYlPPb9BoJEIk5QnI5DUYXoo/gj0mBj
4CT2JI3CLyoCcjEtWTJQxDdlD8aNJ9OpJKQ3Oy9Fj8HIUBwG52aT7dCUsXCGnoTg
QbgfQTgXKEjdOCX5U4Jf+Nf/2gAMAwEAAgADAAAAEAghnvvvvvvvrigggjvvusog
kstvvjgnvvogggjgggkvvrvugggkMpsoTAgtvvogKtv/AP8A/cpCJS+qmxf6OiKN
u2/IjWAdvdwpCOyCy2MhBBdcFye2/wCSUelvQlRESYTv/f8A4r3IokFbCvbq7333
pfYqIJLasPL/AO/lAXJqCCCr0K6C+iGn6rqCqCQJ6BD1yO+lRCW+KE2PgemVMcap
G++u1CSyZ12yiS7c+2+8KCCCSCCCG+86Cy++uOKCGOe++yCCCS2+++++++6iCC//
xAAeEQEAAgMAAwEBAAAAAAAAAAABABEQITEgQWFRUP/aAAgBAwEBPxD+kNlDs+Zt
F+oleYXqVOypyKfAUh+5S5KPAFWwA2TrAA3PmXh+5ZoiVhBC5RNYNzZCADqPZRtl
ji8VYNR0vBVFw1SCmHc2VgRVljLNSzcp6wVe4/mDTBZZAuPVn7gqNkSm5Qz2EvFL
vApLJZowWYlUYIlXs1asUaZRg+Sl6gWxUUYemLfPwx0x1HuOXxC6ESsemOmO51gV
t8RqDwxryehDaVwENsbI0Yp8QuLSiCIJD9nzCjRHULYr0xKfHnwK9lDsiTRLvI0p
iV/P/8QAHhEBAAICAwEBAQAAAAAAAAAAAQARITEQIEFRYVD/2gAIAQIBAT8Q/pJl
rXHCH3LvutSzqWdwB0QY/Msbg30VuiKqmacKXE/cpH5ltsG+Bplo54ZosVrMNReE
FcUgBEuGVcN21HMKyPEwKilYiolEaS3vDdYh9xLippi1HxPmLcbgLiXF4yuLNcIM
ono8FCGW4hmOpm88WZlnD+y1Zi1BeXg5gDu2caONYa489Vq0G+nRxrNOFeDqlxPE
PuL1HCXgVPAg0mYAOq1AtbEMRIfk/cbdwzqAIKyQb67dH5lpC2Xo5XBv+f8A/8QA
JBABAAICAgICAgMBAAAAAAAAAQARITEQQSBhMFFAcXCBkaH/2gAIAQEAAT8Q/iSr
ijZ+X0EDthoFS1ixivUBrMRNn4otCJ2zSEdxn0IrZ4B3cB3iYOmA6xAdX+AC6Ire
IL3FBnEDoudh5imoLeYr1HYJ9ibQ+Q031KB0QWsxWsS738gjTE6Q7kYOKfgxEfqx
6E3R5DwBWiKrcS2eILog3qML2eOZ/UucETtlWzXjiWFQkNR41eFLO4gag3cW2RPT
B9sA9zH0Il7gkLXrw1x2GUsCC08TSR/2iKwwtD4deWUqN8gaYPsieiKeot74veoh
BFT4KVKy3jUdLBacmmK2G0zHg2DNvF+XUqRbbfipadQhEpp43cQX+seEh084ljyE
NH3Hf6zR+pslr1FIIreAXUHWWJTXgsLtz3pSs3x3mIZ/0jkLTk0kWXq4axAWxmib
/tACiMvXFiAD6n0Tb4a3UEGIDkxymSAZmyErYAKJXWOlgtIbMVvBoMW6SbOKVO51
uEVkVs+d1qYK4ZVMeglz1wqcTaPDwk1MOFjjEdw41TfwNNkqSls14osRAsz4hbRA
EtUa41wKKgm8QW8zA6ITQzF0n0IajFOoVCOJv5RXBIXPXIW1ADEEdSjJ4Us7nW50
xQ3BazFaxFXb4g7lik8W16iAiWp4MSt7mAlz1z3pSo34aJu+HdNXjpm3nT4+ub/A
3M38O7Ovjpm/nT5fv8XP9fh1Zq8cBHbzp8fZ5GR/UfgEwwBmN7HJuOPBr8ftNjkF
aIZmAGY7+FvYgwbkwxNiapu5Z+0pd1mIO5gOiUtrXJocO5cEAP1Or/UVXPxl3iX9
kwxo3/iBcOGD+0T2OAu4t6irtgK4OFgfRE4DH3A9nhKnyu5KVG4IbGG4cMQMz+0g
wGmGLtAXXCAH1GzRtg1t3EDMdwYJ3JSxuOPjvW6hSVVvLexB0gOTDNEWfcAMQDQq
CYMsMlUQAfU64VW3mtTuXYb+K36inoIyt8RqdcCD7JRl1KWmB7ML2Yu3iNNkE+5R
hr4GoICqWsa+BFhhuHDAFrHcGD4EVkRK/jXmmjUUKX8VNGosUv8ADX//2YkCVAQT
AQoAPgIbAQULCQgHAwUVCgkICwUWAgMBAAIeAQIXgBYhBLfm+5SliYdsz8IeSx4H
51wZ8a4OBQJqPXgnBQkLnj8qAAoJEB4H51wZ8a4Oz5EP/i8tliCp0RC5/xcqFFR/
vTDTLKUYkK2njC+a+s+gtaGYOPKt6Sldx2Qai8sk+EYavBgxpqu+AsVdWk/1AohR
W/VlcVZQ+YXyYYGHEGzyrVJnZQMNmBUP5XoggtFrDUl+mLmlX/Y2ZKYM1ULFBJ5w
PKzJwMLvMeLGW/FQpfhjPRj6l/mH5KGFLdQEeblkd5tslhhJl8v8XQ0U82DGec0/
tIHwYIq/niEodX/AIOtpIeLFuvscyh8HeeGQMAiBNWNqfe9aJ6eDrwqiRSNgP+oY
YWIHg//73rB/N3U17gsXhYNdIjPTAaGARAp2Yqjx8SJCIGrkrWMN3aGaL6JOb5ES
fSeid+0FziZBjMdJIrR6kGM3ZYqm10yd08Zs+GwBj9bL1L9jnOgQfvnca310kdUg
zCgVvc9/qxhmbKNVBsD54974Q8MdxqTAMPZBCis3bcz/XUF2hV847dyEv710Oz9L
WRKf//4FqDssBTGFiw1wHvbT/qbgmGLkKdra5YKkY5VUw+cKRra0AwjSEHYymC41
6CKa6mjeTBSb2hnU4iIm890V85eHi00Q6feT7LC2jlzVaQweqxIwKbt4v9mZWdbD
0MHNfGl0vb8X38NoQLolOfgbC7A0ufNe6Ro8Yws8V1JPIJAoIYYkrrlLbXRXa6FG
zIEWaeg10IxjkeM2ZxBOXUU6uQINBGRC1DsBEACh+SSUsnokhUazmzj0L7CqKDHv
rfDyoWnlSEGkiTiXhPjtzBMTYM7HKx9b79TV5U0EB+XdW3aCbSuV5gucuoibiKXe
lBdFy0k2tnDnzAM0qUplKaPSvDC3BbNrCfw99hnoaUuFF4xzwiKfMKAVHtai7SK8
sVyTWjyex45NPyySHHkLs0B9Lg/hzl01E4EugIzYO3BlGqhD2RbR9033gB8acD8o
XWvn+3epus1diJKAQqDN0W1GLCaDR+1LKnQjHf5ECKvtvkWEQOylDVoMs/eTxKSv
dsFcawjjuO7vPVPYlOpucG+zG+Oui5UnztgIQV6XaHvYxLTA6coDPkKpvcKOa+JV
/qSNns+9ft3N9dybFvqIIoiIA62UVreDQ7P6R2RLdgdQzj4aba5raD3XZiA2FfY3
CxQUZQkpDJcNE8+6ix09g9wRsdsAsycWPeIlHe3XTR4wrTUA3tasUqc0faIC+LN+
ndc/OkuWciflgD6IspFelVtEHM6nyDu2iTd4ShJrt2rGPdNDTSpeGb1SYr9ArURw
65/rWlaUk/OERO+MkfE3qijCMo10FpilEFCDlABVRHMsQTpJdOqjakIX4BfmBxN4
jpNK5pjoteQtQ91wgclyfg/xr4o0Si78IZBujHtDCTI1V67wLn75e4ltL8eoJGI+
Uf8eQlHNOaWEOyba6QARAQABiQRyBBgBCgAmAhsCFiEEt+b7lKWJh2zPwh5LHgfn
XBnxrg4FAmo9eMAFCQfb2AUCQMF0IAQZAQoAHRYhBPz/13ccyp3Dp161GtcMKHd8
vgSlBQJkQtQ7AAoJENcMKHd8vgSld4gQAJPhpRbqlLMlYIP143Vlf527QvMF59qV
u40KOQFQcWu8EUprVTPObZV6KsJ7QIiy8q+j71jJxu5w1qZqqxUX3yViX1B1Scox
WhGeR9D9TTPMBo2T+46YR/aeL9lKV20AJABNaTqQsuj3Ie94+Velm/5ouEijyO9r
Zz9mkxRxLqBmhJx22axoCYsThtqSIsbNny2lhKsO/sJM8cFvfpD/2W497QjYNROq
AmAJSnbR6ANMnBvC1sqydMuYxUHPzL6UthxJdZZDEtQBvleWBAfAeieS0WGI6HSw
50g3JCGb2pC3uYr+Scrhc54FeDljNfacSESAO8Ic08IgwewJMzF2ere6rXUHXxri
AaMF7qrmjLDSkjdBxDjEmJWfv97LS3nndwA29aGb0XxdZ3RkNARrMKzDBiQ2YybD
/tDlc9iuqSWN5xWA/kUg3IiHCV6wg1PITxBRN3s/gsPFhZDljAMliHm2lypJFPPo
AMtABkJH96kz345L1PMWMLCvSWkcXmq3bKvfaRK1/s8fkrDc4n/0A62kq9DJkRBK
TyhCVyf/D+fYOHA8TPEzwcZ7BiZZKpJs+mYJ6Cnez04BgcH8dG/RoHkymv9ZuEpe
paRJItrC8cr/6oBcgDV1HPJWzztqW+6mYQZ5yguujL/9VPipaVI5HWsHyinISCD7
gTaEJQI32AEMCRAeB+dcGfGuDqc7EACbQz195ZIOSkk0JHGyo0ad95IsP4PsEOsz
gsm6vMn3hzisbJr1ZTdu8sRBcdUMHEqW7rwQ7P2EtaaIcrJymxASV6cAx2kYJFIT
Sga1qJ9JjqwyX0rtvBXw3M2bqzSCabWBQrBbz0SZ9XSoSHQYRXjWOc5Tveqrrmhe
s2FuDJRo/sf+mbkQ9liTeOidsDjmcTXmrONV9RpdrvjcWqqImsVHuRvlB7PTD2K1
F7gmtXzsrKHvvwcAz1bKVzgPda5YMTgNhN3QVym7kjzMBExbhw2zvdh/eDdS7Ji1
ldYfdpulbQ2d1D1KAyx64os1ZbAIsnoI4OLoOZ48rLelnm6/AGoe/6tIXggmaCxm
wcChNFAj3rpEeGy0za2RNYbYK6YSOjBjoSRcsZ1wqoVDVd5sk0lcQrdLyVrq9FrH
kyLWmwOzYDRnVtvIaZuAjt0QswVZBSN9ZZct6odZ0cHzrZdPzFS6lZOUC2SoFaXH
PSYgG62YSRhxZjR/lsIwlvfG6iCAAzmwlLpHG5+qpF0V9FZQDPX7RMDyphqftcVh
qXLyhh2MrZijDx2oi0sYL4PSJyaFCRkmWFtcXLv3EWxdiTEHZe3y3Ht8q44AIiWE
MykK03juj9OdzRR/dxIUovWZDg4RWqCIfSJZmvtd0PvBBzW4rwWRSeIDQ5V0yWGB
YENb6ztZ9LkCDQRkQtR9ARAAsjtaW7ZytrqmVDP1SyY5Q0ywD3wVXHqVthUJzXZN
VxnJ1sMgzmOK2sHXHSTms8M6hIqb/5W9pdxLVgqE2nxKMuhmwtUIy11GYoNejizz
S/6MdiZeJ7xigcGMshzn1OH6T3fU6EQxaAQjjs7lav1jAQs9cGeVUaBHIUqiRQqT
vDX4NOgoI3lM8hMfElohTi2RnkIzgBrgWmD2NKVIQ2kRL90fNqNilOO7nJ3UYqXZ
SCXo7IqNQwBVhoRkXiW47xBxGFnDyaBU61iDRfVjVU0O4PDd+hBO81o4M9YXcIx3
cUYP5QxP57Io0Km2uDrVYq6yhXh8tEhRxgzlkUpzBran4sTUzS8SGugJJWdqKZwg
jviDEp2trvr3kf4DaD0Z3OHs1XgpJn9NkCa/tTSy/RwYmZSaJ3S/MlN6mD4fPjIk
SwwhH4506CJqCoEeatBw1IGBwx7zu391kzqdvv4jNG2dg1bZypWkJY2HZgwxEC2u
pLRGRx/2c62fhGpeTkTpHfWppuUPuATdOKR4qMKYeaZyruJurTOfKBR6AQaBJVTO
J93D4JOA9UZr0WpfV6n+vaMn0ZDmRLnuxNJ68Tf+IpIGmnYM7N7BlXEha6aofR/D
SkchSwo0S4NntDDg6P3aFjF88t/P97ZOhQwprJ8A3j8NXCOZnXGaws846+S6qJNF
KGkAEQEAAYkCPAQYAQoAJgIbDBYhBLfm+5SliYdsz8IeSx4H51wZ8a4OBQJqPXja
BQkH29fdAAoJEB4H51wZ8a4OLLwQAITbcMXHkRWIeQY9DMD2QbEWamCXGOFnnntz
0mZeApdqBTLKHhKxQpwfIW78fUFEwrUVIQFcFEXT3RMLjC6LmLfybFTS9szZKisG
mF27jPdwWQq56ucdKY17xRvRP9C54bdSVucJlukk3MzgF5bTbCuA9053x20+Xek4
qaYUtwlSzehHn67JT37WDnh17uM8acF09F3WhSxLwk0Gn1mybuK0LszXI1GGTyTP
+ilR+iAfrVBbwuXPgr44/IYhd49OKBW4MYe+Z3pggNCxsqNvgmHH3VmMEzSjm7R0
MuMsUBqUTuelmp0zRI5/ufSmOtt4J5/q920ehbjICB+AI8N4HhVwwec3woVH6m06
K1/x93XfQHzKC6HVMJD/aY1rwAIF6v9X7yFk17vxz43MItrXLFuluCOHnKUAYkJa
Of/iG6hEEc4lqqkcXKTJFEgEUiAKpqJRptef1dg+A0cqRHZ4by+XBokinVb1U5h5
XEWrw6k1qBPNvtrn3hj0mOI0a0v3Evr2hdfmOOAi9B4U+zM4iM+lTTHQnzbtxkIT
JlhdlXHO0K9iYHZ7oYF5eiobBYycZberti453+8Adaj7BAV+R3SwFSpqlMjQZsUd
MdtiwMI7I8aMxqeil05B+SsFpshM4NGGnpjC6LfpW/7Pg4p3twzxSIhb8YJu4AtJ
2Oy4De2yuQINBGRC1LgBEADfGtrGYFhs45BPXUFM1pcfHXR9nI+fSOCNIeGdHf6R
NRqdsnz18Y1c/QRlpmHY2yFqEIZhxGSbu8PbbvAKHDWc/XKE4LOLinznKv6Z4imf
K1g32UO4t4tLVL0kYpl2IpBPOPP6Ka6BfW8/xBXG1m2vuDSywGIYrx97maXjGFLd
+ANeZTimLy3YF6T+VtNet4lZ1OlhC6qTAJwwXBJaXF/bolxvh+b/Nw2EO8xNxVJb
F/Gg940Ca+MTaIFMiZIQRqjRlfPrdg1TWlMhriWYMaLxq3QtqDt7jPrhMnwkcyZE
vEWMtjntoG6iaSYFIppk/LMgPpXclOmbiNqqMiRLy5NpZkV7h5kb6YR0ueQAX3Jp
Kgr2b6SXR+/NrqkVf+nifCk91X9JkNLgU22VJ2P6Zxfyhgb67hVWgOE2qLq8Of2m
maWIJZXG7fBgG8itEQ7VDUBmN7rMlJMFHYT4wRLDu9ordraaXhMcxwmsbWkJsMAz
WwRXnlBceNZvPUJu7lvYKfIF4RWozeOv4aMTAvnUmVzKP9R0kio56qccmq454IQd
EtV1viynHECSVCZKVVvDjjSo7fPta/Bxlodlbpog6LWlZR1838qUwfe/IYU1W/FY
miEjufAd4Xi1LaZQS9mP0Oj0tbD2ax7CGhXeWVwutr7iBvsll+RATZxholYjWMEZ
MQARAQABiQI8BBgBCgAmAhsgFiEEt+b7lKWJh2zPwh5LHgfnXBnxrg4FAmo9eOYF
CQfb164ACgkQHgfnXBnxrg5TPhAAlGmJsuHw4uKtpk0VoIzoBYqT6Wt9thzn+eZp
FcfDREtIb2oDU1oE58tYkguRl0furrZDd5IQb3n0gp6R2ZIxUiuZI8IPLl+2f/Dn
oYkJfWs7PKJGD+G2/tluMVNqgOCS3PRtDWzgytEb5neC9TEKQJ84nSJ/leGcJl/a
HAjckyBjQJ/+32buXs+EwFjknTd3m4eTraCDftM94oPpD9VG6/sG+3RwtKV0Qjrg
dGiXPEnQw0guDrP/sj8yNpTVC6EmS85hFpAFFkNqi4R5FuiEHl7FLhjr538Ikmhd
T89NFKG4k5C7OZJyYA46aJQSYPfyBannkIHRAQyglCu7kSqLmgotoW1wmXFSwKpJ
BZ6ScKX+zOpBRn+k3LQ8ksS/XQyff7W1IQT1X+62Plx9bdIUaGYkWgKbuzgEaWXz
92ZIXYkwkt2/ICYz7yVbtL3hnFTOUFhwrhXFLfze5XarwZUIRg3k3I+B+Mv9JN3O
1lmzczumbBAnZByLK4Zqz9MWIgTlrwCQiiHGgrmJn093a1h09b1MGKQGZ/nzBXdn
AoDUQFXIBA0R8qrrLbKXGB4ozMQzXjJNnX/sfNcIxEOdnhtP03xN0PAtrHsrEepZ
uuwjjusMRMKdJNXVOXuW0XB4KjxOpx5UHglCGsJJOPZ3eiXeqwCG4mPwIk5/OHNB
5darRns=
=UGQb
-----END PGP PUBLIC KEY BLOCK-----
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br><span>70</span><br><span>71</span><br><span>72</span><br><span>73</span><br><span>74</span><br><span>75</span><br><span>76</span><br><span>77</span><br><span>78</span><br><span>79</span><br><span>80</span><br><span>81</span><br><span>82</span><br><span>83</span><br><span>84</span><br><span>85</span><br><span>86</span><br><span>87</span><br><span>88</span><br><span>89</span><br><span>90</span><br><span>91</span><br><span>92</span><br><span>93</span><br><span>94</span><br><span>95</span><br><span>96</span><br><span>97</span><br><span>98</span><br><span>99</span><br><span>100</span><br><span>101</span><br><span>102</span><br><span>103</span><br><span>104</span><br><span>105</span><br><span>106</span><br><span>107</span><br><span>108</span><br><span>109</span><br><span>110</span><br><span>111</span><br><span>112</span><br><span>113</span><br><span>114</span><br><span>115</span><br><span>116</span><br><span>117</span><br><span>118</span><br><span>119</span><br><span>120</span><br><span>121</span><br><span>122</span><br><span>123</span><br><span>124</span><br><span>125</span><br><span>126</span><br><span>127</span><br><span>128</span><br><span>129</span><br><span>130</span><br><span>131</span><br><span>132</span><br><span>133</span><br><span>134</span><br><span>135</span><br><span>136</span><br><span>137</span><br><span>138</span><br><span>139</span><br><span>140</span><br><span>141</span><br><span>142</span><br><span>143</span><br><span>144</span><br><span>145</span><br><span>146</span><br><span>147</span><br><span>148</span><br><span>149</span><br><span>150</span><br><span>151</span><br><span>152</span><br><span>153</span><br><span>154</span><br><span>155</span><br><span>156</span><br><span>157</span><br><span>158</span><br><span>159</span><br><span>160</span><br><span>161</span><br><span>162</span><br><span>163</span><br><span>164</span><br><span>165</span><br><span>166</span><br><span>167</span><br><span>168</span><br><span>169</span><br><span>170</span><br><span>171</span><br><span>172</span><br><span>173</span><br><span>174</span><br><span>175</span><br><span>176</span><br><span>177</span><br><span>178</span><br><span>179</span><br><span>180</span><br><span>181</span><br><span>182</span><br><span>183</span><br><span>184</span><br><span>185</span><br><span>186</span><br><span>187</span><br><span>188</span><br><span>189</span><br><span>190</span><br><span>191</span><br><span>192</span><br><span>193</span><br><span>194</span><br><span>195</span><br><span>196</span><br><span>197</span><br><span>198</span><br><span>199</span><br><span>200</span><br><span>201</span><br><span>202</span><br><span>203</span><br><span>204</span><br><span>205</span><br><span>206</span><br><span>207</span><br><span>208</span><br><span>209</span><br><span>210</span><br><span>211</span><br><span>212</span><br><span>213</span><br><span>214</span><br><span>215</span><br><span>216</span><br><span>217</span><br><span>218</span><br><span>219</span><br></div></div></details>
</div>
</div>
</div>
</template>
]]></content:encoded>
    </item>
    <item>
      <title>Donate</title>
      <link>https://codemonkeys.tech/donate/</link>
      <guid>https://codemonkeys.tech/donate/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Donate</source>
      <description>If you've found our content helpful and would like to support us, then you can donate here! All donations will go towards maintaining an adequate 🍌 supply!</description>
      <content:encoded><![CDATA[<template #header><h1 id="thanks-for-the-bananas-🍌"> Thanks for the <div>Bananas!!! 🍌</div></h1>
</template><div>
<h2 id="crypto-🔗"> Crypto 🔗</h2>
<p>⚠️ Sending Crypto to the Wrong Address will Result in Loss of <span>Funds! ⚠️</span></p>
<p>✅ Always double check the address &amp; amount before <span>sending! ✅</span></p>
<p>🤖 Instead of using the static Bitcoin address below, improve your privacy by using a <span><a href="https://paynym.is/" target="_blank" rel="noopener noreferrer">PayNym!<i>Content not supported</i></a> 🤖</span></p>
<i>Content not supported</i>
<i>Content not supported</i>
</div>
<div>
<h2 id="fiat-💵"> Fiat 💵</h2>
<p>Subscribe for more monkey business on <a href="https://www.subscribestar.com/code-monkeys" target="_blank" rel="noopener noreferrer">SubscribeStar!<i>Content not supported</i></a></p>
<p>Become a <a href="https://github.com/sponsors/codemonkeysio" target="_blank" rel="noopener noreferrer">Code Monkeys Sponsor!<i>Content not supported</i></a></p>
<p>Sponsor J the Code Monkey on <a href="https://github.com/sponsors/jchiarulli" target="_blank" rel="noopener noreferrer">GitHub!<i>Content not supported</i></a></p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>VuePress Tutorial 9 - Styling the Homepage</title>
      <link>https://codemonkeys.tech/vuepress-tutorial-9/</link>
      <guid>https://codemonkeys.tech/vuepress-tutorial-9/</guid>
      <source url="https://codemonkeys.tech/rss.xml">VuePress Tutorial 9 - Styling the Homepage</source>
      <description>Hey fellow Code Monkeys!!! 🐵 Want to learn how to style the homepage for your VuePress site, then check out VuePress Tutorial 9 - Styling the Homepage! 🍌🐒</description>
      <pubDate>Wed, 31 Aug 2022 01:45:30 GMT</pubDate>
      <content:encoded><![CDATA[<template #header><h1 id="vuepress-tutorial-9-styling-the-homepage"> VuePress Tutorial 9 - Styling the Homepage</h1>
</template><h2 id="styling-files"> Styling Files</h2>
<p>The next step we'll be taking in developing the blog is learning how to override the <code>palette.styl</code> and <code>index.styl</code> files which will allow us to add our own global styling to the blog.</p>
<p>To do this we're going to first discuss what the <code>index.styl</code> and <code>palette.styl</code> files are used for. Then we'll take a look at the predefined styling files provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>, and we'll discuss the overriding priority of the files. Finally, we'll implement what we leaned about by styling the homepage of the blog.</p>
<p>Make sure you start the local development server which should be running at <a href="http://localhost:8080/" target="_blank" rel="noopener noreferrer">http://localhost:8080/<i>Content not supported</i></a> to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.</p>
<h3 id="palette-styl"> palette.styl</h3>
<p>The <code>palette.styl</code> file is used to define global styling variables and override the predefined styling variables which in our case are being provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>Here are some of the predefined styling variables available to use and override in your site:</p>
<code-group>
<code-block title="Predefined palette.styl File">
<div><pre><code><span>// colors</span>
<span><span>$accentColor</span> <span>=</span> <span>#3eaf7c</span></span>
<span><span>$textColor</span> <span>=</span> <span>#2c3e50</span></span>
<span><span>$borderColor</span> <span>=</span> <span>#eaecef</span></span>
<span><span>$codeBgColor</span> <span>=</span> <span>#282c34</span></span>
<span><span>$arrowBgColor</span> <span>=</span> <span>#ccc</span></span>
<span><span>$badgeTipColor</span> <span>=</span> <span>#42b983</span></span>
<span><span>$badgeWarningColor</span> <span>=</span> <span><span>darken</span><span>(</span><span>#ffe564</span><span>,</span> <span>35</span><span>%</span><span>)</span></span></span>
<span><span>$badgeErrorColor</span> <span>=</span> <span>#DA5961</span></span>

<span>// layout</span>
<span><span>$navbarHeight</span> <span>=</span> <span>3.6</span><span>rem</span></span>
<span><span>$sidebarWidth</span> <span>=</span> <span>20</span><span>rem</span></span>
<span><span>$contentWidth</span> <span>=</span> <span>740</span><span>px</span></span>
<span><span>$homePageWidth</span> <span>=</span> <span>960</span><span>px</span></span>

<span>// responsive breakpoints</span>
<span><span>$MQNarrow</span> <span>=</span> <span>959</span><span>px</span></span>
<span><span>$MQMobile</span> <span>=</span> <span>719</span><span>px</span></span>
<span><span>$MQMobileNarrow</span> <span>=</span> <span>419</span><span>px</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br></div></div></code-block>
</code-group>
<p>We'll be using and overriding some of these predefined styling variables as well as defining our own styling variables as we develop the blog.</p>
<p>Here's a link to the full <a href="https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/core/lib/client/style/config.styl" target="_blank" rel="noopener noreferrer">palette.styl file<i>Content not supported</i></a> if you're interested. You can also view the full file by navigating to <code>node_modules/@vuepress/core/lib/client/style/config.styl</code> in your project.</p>
<div><p>Only Define Variables in palette.styl</p>
<p>You should ONLY define variables in the <code>palette.styl</code> file because it will be imported at the end of the root Stylus config file. This means several files will use it, so once you define your styling variables here they will be duplicated multiple times</p>
</div>
<h3 id="creating-the-palette-styl-file"> Creating the palette.styl File</h3>
<p>Now that we have a good understanding of the <code>palette.styl</code> file, we're going to create the file by first creating a <code>styles</code> directory in the <code>theme</code> directory. The <code>docs</code> directory for your site should now look something like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   ├── <code>theme</code>
│   │   │   ├── <code>global-components</code>
│   │   │   ├── <code>layouts</code>
│   │   │   ├── <code>styles</code>
│   │   │   └── index.js
│   │   │
│   │   └── config.js
│   │
│   ├── <code>icons</code>
│   └── README.md</p>
</code></pre><p>After creating the <code>styles</code> directory, we can now create the <code>palette.styl</code> file inside of it like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   ├── <code>theme</code>
│   │   │   ├── <code>global-components</code>
│   │   │   ├── <code>layouts</code>
│   │   │   ├── <code>styles</code>
│   │   │   │   └── palette.styl
│   │   │   └── index.js
│   │   │
│   │   └── config.js
│   │
│   ├── <code>icons</code>
│   └── README.md</p>
</code></pre><div><p>Alternative Directory Structure</p>
<p>If you recall from the <a href="/vuepress-tutorial-4/">VuePress Tutorial 4 - Directory Structure</a> post, you also have the option of creating your <code>palette.styl</code> file in the following location <code>.vuepress/styles/palette.styl</code>.</p>
</div>
<p>We'll be updating the <code>palette.styl</code> file later on in this post, but first we're going to take a look at the <code>index.styl</code> file.</p>
<h3 id="index-styl"> index.styl</h3>
<p>The <code>index.styl</code> file is used to add global styles as well as override predefined styles which in our case are being provided by the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>Even though it's a <a href="https://stylus-lang.com/" target="_blank" rel="noopener noreferrer">Stylus<i>Content not supported</i></a> file, you can also use normal <code>CSS</code> syntax if you prefer.</p>
<p>We won't discuss the predefined <code>index.styl</code> file in detail right now. It's just meant to be a reference in case you want to look for a specific style you want to override, or if you're interested in learning more about the predefined styling.</p>
<p>Here's the predefined <code>index.styl</code> which you can override and add your own styles to:</p>
<code-group>
<code-block title="Predefined index.styl File">
<div><pre><code><span><span>@require</span> <span>'./config'</span></span>
<span><span>@require</span> <span>'./code'</span></span>
<span><span>@require</span> <span>'./custom-blocks'</span></span>
<span><span>@require</span> <span>'./arrow'</span></span>
<span><span>@require</span> <span>'./wrapper'</span></span>
<span><span>@require</span> <span>'./toc'</span></span>

<span>html<span>,</span> body</span>
  <span><span>padding</span> <span>0</span></span>
  <span><span>margin</span> <span>0</span></span>
  <span><span>background-color</span> <span>#fff</span></span>

<span>body</span>
  <span><span>font-family</span> -apple-system<span>,</span> BlinkMacSystemFont<span>,</span> <span>"Segoe UI"</span><span>,</span> Roboto<span>,</span> Oxygen<span>,</span> Ubuntu<span>,</span> Cantarell<span>,</span> <span>"Fira Sans"</span><span>,</span> <span>"Droid Sans"</span><span>,</span> <span>"Helvetica Neue"</span><span>,</span> sans-serif</span>
  <span><span>-webkit-font-smoothing</span> antialiased</span>
  <span><span>-moz-osx-font-smoothing</span> grayscale</span>
  <span><span>font-size</span> <span>16</span><span>px</span></span>
  <span><span>color</span> $textColor</span>

<span>.page</span>
  <span><span>padding-left</span> $sidebarWidth</span>

<span>.navbar</span>
  <span><span>position</span> fixed</span>
  <span><span>z-index</span> <span>20</span></span>
  <span><span>top</span> <span>0</span></span>
  <span><span>left</span> <span>0</span></span>
  <span><span>right</span> <span>0</span></span>
  <span><span>height</span> $navbarHeight</span>
  <span><span>background-color</span> <span>#fff</span></span>
  <span><span>box-sizing</span> border-box</span>
  <span><span>border-bottom</span> <span>1</span><span>px</span> solid $borderColor</span>

<span>.sidebar-mask</span>
  <span><span>position</span> fixed</span>
  <span><span>z-index</span> <span>9</span></span>
  <span><span>top</span> <span>0</span></span>
  <span><span>left</span> <span>0</span></span>
  <span><span>width</span> <span>100</span><span>vw</span></span>
  <span><span>height</span> <span>100</span><span>vh</span></span>
  <span><span>display</span> none</span>

<span>.sidebar</span>
  <span><span>font-size</span> <span>16</span><span>px</span></span>
  <span><span>background-color</span> <span>#fff</span></span>
  <span><span>width</span> $sidebarWidth</span>
  <span><span>position</span> fixed</span>
  <span><span>z-index</span> <span>10</span></span>
  <span><span>margin</span> <span>0</span></span>
  <span><span>top</span> $navbarHeight</span>
  <span><span>left</span> <span>0</span></span>
  <span><span>bottom</span> <span>0</span></span>
  <span><span>box-sizing</span> border-box</span>
  <span><span>border-right</span> <span>1</span><span>px</span> solid $borderColor</span>
  <span><span>overflow-y</span> auto</span>

<span><span><span>{</span>$contentClass<span>}</span></span>:not(.custom)</span>
  <span><span>@extend</span> $wrapper</span>
  <span>> *:first-child</span>
    <span><span>margin-top</span> $navbarHeight</span>

  <span>a:hover</span>
    <span><span>text-decoration</span> underline</span>

  <span>p.demo</span>
    <span><span>padding</span> <span>1</span><span>rem</span> <span>1.5</span><span>rem</span></span>
    <span><span>border</span> <span>1</span><span>px</span> solid <span>#ddd</span></span>
    <span><span>border-radius</span> <span>4</span><span>px</span></span>

  <span>img</span>
    <span><span>max-width</span> <span>100</span><span>%</span></span>

<span><span><span>{</span>$contentClass<span>}</span></span>.custom</span>
  <span><span>padding</span> <span>0</span></span>
  <span><span>margin</span> <span>0</span></span>

  <span>img</span>
    <span><span>max-width</span> <span>100</span><span>%</span></span>

<span>a</span>
  <span><span>font-weight</span> <span>500</span></span>
  <span><span>color</span> $accentColor</span>
  <span><span>text-decoration</span> none</span>

<span>p a code</span>
  <span><span>font-weight</span> <span>400</span></span>
  <span><span>color</span> $accentColor</span>

<span>kbd</span>
  <span><span>background</span> <span>#eee</span></span>
  <span><span>border</span> solid <span>0.15</span><span>rem</span> <span>#ddd</span></span>
  <span><span>border-bottom</span> solid <span>0.25</span><span>rem</span> <span>#ddd</span></span>
  <span><span>border-radius</span> <span>0.15</span><span>rem</span></span>
  <span><span>padding</span> <span>0</span> <span>0.15</span><span>em</span></span>

<span>blockquote</span>
  <span><span>font-size</span> <span>1</span><span>rem</span></span>
  <span><span>color</span> <span>#999</span><span>;</span></span>
  <span><span>border-left</span> <span>.2</span><span>rem</span> solid <span>#dfe2e5</span></span>
  <span><span>margin</span> <span>1</span><span>rem</span> <span>0</span></span>
  <span><span>padding</span> <span>.25</span><span>rem</span> <span>0</span> <span>.25</span><span>rem</span> <span>1</span><span>rem</span></span>

  <span>&amp; > p</span>
    <span><span>margin</span> <span>0</span></span>

<span>ul<span>,</span> ol</span>
  <span><span>padding-left</span> <span>1.2</span><span>em</span></span>

<span>strong</span>
  <span><span>font-weight</span> <span>600</span></span>

<span>h1<span>,</span> h2<span>,</span> h3<span>,</span> h4<span>,</span> h5<span>,</span> h6</span>
  <span><span>font-weight</span> <span>600</span></span>
  <span><span>line-height</span> <span>1.25</span></span>

  <span><span><span>{</span>$contentClass<span>}</span></span>:not(.custom) > &amp;</span>
    <span><span>margin-top</span> <span>(</span><span>0.5</span><span>rem</span> <span>-</span> $navbarHeight<span>)</span></span>
    <span><span>padding-top</span> <span>(</span>$navbarHeight <span>+</span> <span>1</span><span>rem</span><span>)</span></span>
    <span><span>margin-bottom</span> <span>0</span></span>

    <span>&amp;:first-child</span>
      <span><span>margin-top</span> <span>-1.5</span><span>rem</span></span>
      <span><span>margin-bottom</span> <span>1</span><span>rem</span></span>

      <span>+ p<span>,</span> + pre<span>,</span> + .custom-block</span>
        <span><span>margin-top</span> <span>2</span><span>rem</span></span>

  <span>&amp;:focus .header-anchor<span>,</span>
  &amp;:hover .header-anchor</span>
    <span><span>opacity</span><span>:</span> <span>1</span></span>

<span>h1</span>
  <span><span>font-size</span> <span>2.2</span><span>rem</span></span>

<span>h2</span>
  <span><span>font-size</span> <span>1.65</span><span>rem</span></span>
  <span><span>padding-bottom</span> <span>.3</span><span>rem</span></span>
  <span><span>border-bottom</span> <span>1</span><span>px</span> solid $borderColor</span>

<span>h3</span>
  <span><span>font-size</span> <span>1.35</span><span>rem</span></span>

<span>a.header-anchor</span>
  <span><span>font-size</span> <span>0.85</span><span>em</span></span>
  <span><span>float</span> left</span>
  <span><span>margin-left</span> <span>-0.87</span><span>em</span></span>
  <span><span>padding-right</span> <span>0.23</span><span>em</span></span>
  <span><span>margin-top</span> <span>0.125</span><span>em</span></span>
  <span><span>opacity</span> <span>0</span></span>

  <span>&amp;:focus<span>,</span>
  &amp;:hover</span>
    <span><span>text-decoration</span> none</span>

<span>code<span>,</span> kbd<span>,</span> .line-number</span>
  <span><span>font-family</span> source-code-pro<span>,</span> Menlo<span>,</span> Monaco<span>,</span> Consolas<span>,</span> <span>"Courier New"</span><span>,</span> monospace</span>

<span>p<span>,</span> ul<span>,</span> ol</span>
  <span><span>line-height</span> <span>1.7</span></span>

<span>hr</span>
  <span><span>border</span> <span>0</span></span>
  <span><span>border-top</span> <span>1</span><span>px</span> solid $borderColor</span>

<span>table</span>
  <span><span>border-collapse</span> collapse</span>
  <span><span>margin</span> <span>1</span><span>rem</span> <span>0</span></span>
  <span><span>display</span><span>:</span> block</span>
  <span><span>overflow-x</span><span>:</span> auto</span>

<span>tr</span>
  <span><span>border-top</span> <span>1</span><span>px</span> solid <span>#dfe2e5</span></span>

  <span>&amp;:nth-child(2n)</span>
    <span><span>background-color</span> <span>#f6f8fa</span></span>

<span>th<span>,</span> td</span>
  <span><span>border</span> <span>1</span><span>px</span> solid <span>#dfe2e5</span></span>
  <span><span>padding</span> <span>.6</span><span>em</span> <span>1</span><span>em</span></span>

<span>.theme-container</span>
  <span>&amp;.sidebar-open</span>
    <span>.sidebar-mask</span>
      <span><span>display</span><span>:</span> block</span>

  <span>&amp;.no-navbar</span>
    <span><span><span>{</span>$contentClass<span>}</span></span>:not(.custom) > h1<span>,</span> h2<span>,</span> h3<span>,</span> h4<span>,</span> h5<span>,</span> h6</span>
      <span><span>margin-top</span> <span>1.5</span><span>rem</span></span>
      <span><span>padding-top</span> <span>0</span></span>

    <span>.sidebar</span>
      <span><span>top</span> <span>0</span></span>

<span><span>@media</span> <span>(</span>min-width<span>:</span> <span>(</span>$MQMobile <span>+</span> <span>1</span><span>px</span><span>)</span><span>)</span></span>
  <span>.theme-container.no-sidebar</span>
    <span>.sidebar</span>
      <span><span>display</span> none</span>

    <span>.page</span>
      <span><span>padding-left</span> <span>0</span></span>

<span><span>@require</span> <span>'mobile.styl'</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br><span>26</span><br><span>27</span><br><span>28</span><br><span>29</span><br><span>30</span><br><span>31</span><br><span>32</span><br><span>33</span><br><span>34</span><br><span>35</span><br><span>36</span><br><span>37</span><br><span>38</span><br><span>39</span><br><span>40</span><br><span>41</span><br><span>42</span><br><span>43</span><br><span>44</span><br><span>45</span><br><span>46</span><br><span>47</span><br><span>48</span><br><span>49</span><br><span>50</span><br><span>51</span><br><span>52</span><br><span>53</span><br><span>54</span><br><span>55</span><br><span>56</span><br><span>57</span><br><span>58</span><br><span>59</span><br><span>60</span><br><span>61</span><br><span>62</span><br><span>63</span><br><span>64</span><br><span>65</span><br><span>66</span><br><span>67</span><br><span>68</span><br><span>69</span><br><span>70</span><br><span>71</span><br><span>72</span><br><span>73</span><br><span>74</span><br><span>75</span><br><span>76</span><br><span>77</span><br><span>78</span><br><span>79</span><br><span>80</span><br><span>81</span><br><span>82</span><br><span>83</span><br><span>84</span><br><span>85</span><br><span>86</span><br><span>87</span><br><span>88</span><br><span>89</span><br><span>90</span><br><span>91</span><br><span>92</span><br><span>93</span><br><span>94</span><br><span>95</span><br><span>96</span><br><span>97</span><br><span>98</span><br><span>99</span><br><span>100</span><br><span>101</span><br><span>102</span><br><span>103</span><br><span>104</span><br><span>105</span><br><span>106</span><br><span>107</span><br><span>108</span><br><span>109</span><br><span>110</span><br><span>111</span><br><span>112</span><br><span>113</span><br><span>114</span><br><span>115</span><br><span>116</span><br><span>117</span><br><span>118</span><br><span>119</span><br><span>120</span><br><span>121</span><br><span>122</span><br><span>123</span><br><span>124</span><br><span>125</span><br><span>126</span><br><span>127</span><br><span>128</span><br><span>129</span><br><span>130</span><br><span>131</span><br><span>132</span><br><span>133</span><br><span>134</span><br><span>135</span><br><span>136</span><br><span>137</span><br><span>138</span><br><span>139</span><br><span>140</span><br><span>141</span><br><span>142</span><br><span>143</span><br><span>144</span><br><span>145</span><br><span>146</span><br><span>147</span><br><span>148</span><br><span>149</span><br><span>150</span><br><span>151</span><br><span>152</span><br><span>153</span><br><span>154</span><br><span>155</span><br><span>156</span><br><span>157</span><br><span>158</span><br><span>159</span><br><span>160</span><br><span>161</span><br><span>162</span><br><span>163</span><br><span>164</span><br><span>165</span><br><span>166</span><br><span>167</span><br><span>168</span><br><span>169</span><br><span>170</span><br><span>171</span><br><span>172</span><br><span>173</span><br><span>174</span><br><span>175</span><br><span>176</span><br><span>177</span><br><span>178</span><br><span>179</span><br><span>180</span><br><span>181</span><br><span>182</span><br><span>183</span><br><span>184</span><br><span>185</span><br><span>186</span><br><span>187</span><br><span>188</span><br><span>189</span><br><span>190</span><br><span>191</span><br><span>192</span><br><span>193</span><br><span>194</span><br><span>195</span><br><span>196</span><br><span>197</span><br><span>198</span><br><span>199</span><br><span>200</span><br><span>201</span><br><span>202</span><br></div></div></code-block>
</code-group>
<p>Here's a link to the <a href="https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/theme-default/styles/index.styl" target="_blank" rel="noopener noreferrer">index.styl file<i>Content not supported</i></a> as well and the path to the file in your project <code>node_modules/@vuepress/theme-default/styles/index.styl</code>.</p>
<p>As we develop the blog we'll be using and overriding some of these predefined styles as well as defining our own styles.</p>
<div><p>Importing and Requiring Stylus and CSS Files</p>
<p>You may have noticed in the <code>index.styl</code> file that we're requiring other files, e.g., <code>@require './config'</code>. We'll discuss how to import and require <code>.styl</code> and <code>.css</code> files in a future post.</p>
</div>
<h3 id="creating-the-index-styl-file"> Creating the index.styl File</h3>
<p>Now that we have a good understanding of the <code>index.styl</code> file, we're going to create the file for the blog inside of the <code>styles</code> directory that we previously created. The <code>docs</code> directory for your site should now look something like this:</p>
<pre><code><p>.
├── <code>docs</code>
│   ├── <code>.vuepress</code>
│   │   ├── <code>public</code>
│   │   ├── <code>theme</code>
│   │   │   ├── <code>global-components</code>
│   │   │   ├── <code>layouts</code>
│   │   │   ├── <code>styles</code>
│   │   │   │   ├── index.styl
│   │   │   │   └── palette.styl
│   │   │   └── index.js
│   │   │
│   │   └── config.js
│   │
│   ├── <code>icons</code>
│   └── README.md</p>
</code></pre><div><p>Alternative Directory Structure</p>
<p>If you recall from the <a href="/vuepress-tutorial-4/">VuePress Tutorial 4 - Directory Structure</a> post, you also have the option of creating your <code>index.styl</code> file in the following location <code>.vuepress/styles/index.styl</code>.</p>
</div>
<p>We'll be updating the <code>index.styl</code> file we just created later on in this post, but first we're going to take a look at the overriding priority.</p>
<h2 id="overriding"> Overriding</h2>
<p>Both the <code>palette.styl</code> and <code>index.styl</code> files follow a certain overriding priority.</p>
<h3 id="palette-styl-2"> palette.styl</h3>
<p>The user's <code>palette.styl</code> file which is located in <code>.vuepress/styles/palette.styl</code> has a higher priority than the theme's <code>palette.styl</code> file which is located in <code>theme/styles/palette.styl</code>. The theme's <code>palette.styl</code> file has a higher priority than any predefined <code>palette.styl</code> file which is located in <code>node_modules/@vuepress/core/lib/client/style/config.styl</code> in the case of the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>This means a theme can define it's own global styling variables and a user can override them as they see fit.</p>
<p>Here's an example of a global styling variable defined in each type of <code>palette.styl</code> file to make this concept clearer:</p>
<code-group>
<code-block title="Predefined Variable">
<div><pre><code><span>// node_modules/@vuepress/core/lib/client/style/config.styl</span>
<span><span>$accentColor</span> <span>=</span> <span>#0099ff</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="Theme Variable">
<div><pre><code><span>// theme/styles/palette.styl</span>
<span><span>$accentColor</span> <span>=</span> <span>#cc99ff</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="User Variable">
<div><pre><code><span>// .vuepress/styles/palette.styl</span>
<span><span>$accentColor</span> <span>=</span> <span>#ccff33</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<p>Here, the final value for <code>$accentColor</code> will be <code>#ccff33</code>.</p>
<div><p>Absence of User palette.styl File</p>
<p>As we develop the blog we won't be using the user's <code>palette.styl</code> file located in <code>.vuepress/styles/palette.styl</code> We'll just be using the theme's <code>palette.styl</code> file located in <code>theme/styles/palette.styl</code> which will allow us to override any predefined variables.</p>
</div>
<h3 id="index-styl-2"> index.styl</h3>
<p>The same overriding priority applies to the <code>index.styl</code> file as well. So, a user's <code>index.styl</code> file which is located in <code>.vuepress/styles/index.styl</code> has a higher priority than the theme's <code>index.styl</code> file which is located in <code>theme/styles/index.styl</code>. The theme's <code>index.styl</code> file has a higher priority than any predefined <code>index.styl</code> file which is located in <code>node_modules/@vuepress/theme-default/styles/index.styl</code> in the case of the <a href="https://vuepress.vuejs.org/theme/default-theme-config.html" target="_blank" rel="noopener noreferrer">default theme<i>Content not supported</i></a>.</p>
<p>This means a theme can define it's own global styles and a user can override them as they see fit.</p>
<p>Both the user's <code>index.styl</code> file and the theme's <code>index.styl</code> file will get generated into the final <code>CSS</code> file used in the site, but the user's style gets generated later which is what gives it a higher priority than the theme's style.</p>
<p>Here's an example of a style defined in a user's <code>index.styl</code> and a style defined in a theme's <code>index.styl</code> file to make this concept clearer:</p>
<code-group>
<code-block title="Theme Style">
<div><pre><code><span><span>// theme/styles/index.styl</span>
.example-style</span>
  <span><span>font-size</span><span>:</span> <span>1</span><span>rem</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<code-group>
<code-block title="User Style">
<div><pre><code><span><span>// .vuepress/styles/index.styl</span>
.example-style</span>
  <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br></div></div></code-block>
</code-group>
<p>Here's the final <code>CSS</code> file generated for the site:</p>
<code-group>
<code-block title="Final CSS File">
<div><pre><code><span><span>/* theme/styles/index.styl */</span>
.example-style <span>{</span></span>
  <span><span>font-size</span><span>:</span> <span>1</span><span>rem</span><span>;</span></span>
<span>}</span>

<span><span>/* .vuepress/styles/index.styl */</span>
.example-style <span>{</span></span>
  <span><span>font-size</span><span>:</span> <span>1.25</span><span>rem</span><span>;</span></span>
<span>}</span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br></div></div></code-block>
</code-group>
<p>Notice how the user's style comes after the theme's style in the final <code>CSS</code> file. This is what gives the user's style a higher priority than the theme's style.</p>
<div><p>Absence of User index.styl File</p>
<p>As we develop the blog we won't be using the user's <code>index.styl</code> file located in <code>.vuepress/styles/index.styl</code>. Instead we'll just be using the theme's <code>index.styl</code> file located in <code>theme/styles/index.styl</code> which will allow us to override any predefined styles.</p>
</div>
<p>Now that we have a good understanding of how overriding works for both the <code>palette.styl</code> and <code>index.styl</code> files, we're now ready to override some predefined styling and add our own styling to the homepage of the blog.</p>
<h2 id="homepage-styles"> Homepage Styles</h2>
<p>To start the homepage styling we'll be overriding and adding global styling variables to the <code>palette.styl</code> file. These global styling variables will then be used in the <code>index.styl</code> file as well as other files as we continue the development of the blog.</p>
<p>When overriding and adding styles to your site you can look at the predefined styling files to determine what properties you need to override. Along with looking at the predefined styling files you can also inspect your browser, go to the <code>Elements</code> tab, and then locate a tag or class that you want to override.</p>
<p>Be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.</p>
<p>If you're developing your own site, then you can check out these useful resources for coming up with color schemes and palettes for your site:</p>
<ul>
<li><span><a href="https://coolors.co/" target="_blank" rel="noopener noreferrer">Coolors<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.canva.com/colors/color-palettes/" target="_blank" rel="noopener noreferrer">Canva Color Palettes<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/colors/default.asp" target="_blank" rel="noopener noreferrer">Colors Tutorial<i>Content not supported</i></a></span></li>
<li><span><a href="https://www.w3schools.com/colors/colors_picker.asp" target="_blank" rel="noopener noreferrer">HTML Color Picker<i>Content not supported</i></a></span></li>
</ul>
<p>If you don't feel comfortable with the CSS discussed below, then here's a good resource to go through <a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">CSS Tutorial<i>Content not supported</i></a>.</p>
<p>You can also view the <code>palette.styl</code> and <code>index.styl</code> files in the <code>tutorial-9</code> branch of the <a href="https://github.com/codemonkeysio/code-monkeys-blog-tutorials/tree/tutorial-9" target="_blank" rel="noopener noreferrer">code-monkeys-blog-tutorials<i>Content not supported</i></a> repository.</p>
<p>Now let's override and add some global styling variables to the <code>palette.styl</code> file.</p>
<h3 id="palette-styl-3"> palette.styl</h3>
<p>Here's what the <code>palette.styl</code> file looks like after overriding some predefined global styling variables and adding our own global styling variables:</p>
<code-group>
<code-block title="palette.styl">
<div><pre><code><span><span>$backgroundColor</span> <span>=</span> <span>#1f2229</span></span>

<span><span>$accentColor</span> <span>=</span> <span>#eb7132</span></span>

<span><span>$textColor</span> <span>=</span> <span>#e6e6e6</span></span>

<span><span>$borderColor</span> <span>=</span> <span>#754d34</span></span>
<span><span>$darkBorderColor</span> <span>=</span> <span>#16181d</span></span>
</code></pre>
<div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>$backgroundColor</code> is used as the background color of the homepage as well as the whole blog.</li>
<li><code>$accentColor</code> is used to color the action button on the homepage and to add styling to internal and external links.</li>
<li><code>$textColor</code> is used to color the text on the homepage as well as the navbar text and other text throughout the blog.</li>
<li><code>$borderColor</code> is used to style the border in the features section as well as the border in the navbar and other borders throughout the blog.</li>
<li><code>$darkBorderColor</code> will be used to style the border and box shadow around the main card on the homepage.</li>
</ul>
<p>Now let's take a look at overriding and adding some styles to the <code>index.styl</code> file.</p>
<h3 id="index-styl-3"> index.styl</h3>
<p>We're going to start by overriding the <code>background-color</code> in the <code>html</code> tag:</p>
<code-group>
<code-block title="index.styl">
<div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
</code></pre>
<div><span>1</span><br><span>2</span><br></div></div></code-block>
</code-group>
<ul>
<li>Updates the <code>background-color</code> of the content below the <code>Footer</code> component to be the color specified by the <code>$backgroundColor</code> global styling variable we just added in the <code>palette.styl</code> file.</li>
</ul>
<p>Next we'll override the <code>background-color</code> in the <code>body</code> tag:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><div>&nbsp;</div><div>&nbsp;</div><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br></div></div></code-block>
</code-group>
<ul>
<li>Updates the <code>background-color</code> of the <code>body</code> of the site to be the color specified by the <code>$backgroundColor</code> global styling variable.</li>
</ul>
<p>Now we're going to update the <code>padding</code> around the <code>main</code> tag which we'll select using the <code>home</code> class:</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>0</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br></div></div></code-block>
</code-group>
<ul>
<li>Updates the <code>padding</code> of the <code>main</code> tag with a class of <code>home</code> to be zero on all sides.</li>
</ul>
<p>We're now going to update the styles for the <code>hero</code> class which is given to the <code>header</code> tag inside of the <code>main</code> tag and contains the logo, the title, the description, and the action button.</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>0</span></span>
      <span>.hero</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
        <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
        <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
        <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
        <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>margin-left: 2rem</code> adds a margin of <code>2rem</code> to the left of the <code>header</code> tag.</li>
<li><code>margin-right: 2rem</code> adds a margin of <code>2rem</code> to the right of the <code>header</code> tag.</li>
<li><code>border: 0.125rem solid $darkBorderColor</code> adds a border around the <code>header</code> tag with a thickness of <code>0.125rem</code>, with a style of <code>solid</code>, and has a color of <code>$darkBorderColor</code> which was defined in the <code>palette.styl</code> file.</li>
<li><code>box-shadow: 0 0.5rem 1rem 0 $darkBorderColor</code> adds a box shadow around the <code>header</code> tag.</li>
<li><code>border-radius: 5.625rem</code> adds a border radius to the <code>header</code> tag border.</li>
<li><code>margin-bottom: 0.625rem</code> adds a margin of <code>0.625rem</code> to the bottom of the <code>header</code> tag.</li>
<li><code>padding: 2rem</code> adds padding of <code>2rem</code> around the <code>header</code> tag.</li>
</ul>
<p>Here's a resource for the <a href="https://www.w3schools.com/cssref/css3_pr_box-shadow.asp" target="_blank" rel="noopener noreferrer">CSS box-shadow Property<i>Content not supported</i></a> if you are interested in learning more about how it works.</p>
<p>Finally, we're going to update the styles for the <code>features</code> class which is given to the <code>div</code> tag inside of the <code>main</code> tag and contains the Learn, Code, and Crush text.</p>
<code-group>
<code-block title="index.styl">
<div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><br></div><pre><code><span>html</span>
  <span><span>background-color</span><span>:</span> $backgroundColor</span>
  <span>body</span>
    <span><span>background-color</span><span>:</span> $backgroundColor</span>
    <span>.home</span>
      <span><span>padding</span><span>:</span> <span>0</span></span>
      <span>.hero</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border</span><span>:</span> <span>0.125</span><span>rem</span> solid $darkBorderColor</span>
        <span><span>box-shadow</span><span>:</span> <span>0</span> <span>0.5</span><span>rem</span> <span>1</span><span>rem</span> <span>0</span> $darkBorderColor</span>
        <span><span>border-radius</span><span>:</span> <span>5.625</span><span>rem</span></span>
        <span><span>margin-bottom</span><span>:</span> <span>0.625</span><span>rem</span></span>
        <span><span>padding</span><span>:</span> <span>2</span><span>rem</span></span>
      <span>.features</span>
        <span><span>margin-left</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>margin-right</span><span>:</span> <span>2</span><span>rem</span></span>
        <span><span>border-top</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span><span>border-bottom</span><span>:</span> <span>0.125</span><span>rem</span> solid $borderColor</span>
        <span>.feature</span>
          <span><span>text-align</span><span>:</span> center</span>
          <span>h2</span>
            <span><span>font-size</span><span>:</span> <span>1.4</span><span>rem</span></span>
</code></pre><div><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br></div></div></code-block>
</code-group>
<ul>
<li><code>margin-left: 2rem</code> adds a margin of <code>2rem</code> to the left of the <code>div</code> tag.</li>
<li><code>margin-right: 2rem</code> adds a margin of <code>2rem</code> to the right of the <code>div</code> tag.</li>
<li><code>border-top: 0.125rem solid $borderColor</code> adds a border to the top of the <code>div</code> tag with a thickness of <code>0.125rem</code>, with a style of <code>solid</code>, and has a color of <code>$borderColor</code> which was defined in the <code>palette.styl</code> file.</li>
<li><code>border-bottom: 0.125rem solid $borderColor</code> adds a border to the bottom of the <code>div</code> tag with a thickness of <code>0.125rem</code>, with a style of <code>solid</code>, and has a color of <code>$borderColor</code> which was defined in the <code>palette.styl</code> file.</li>
<li><code>text-align: center</code> horizontally aligns the text in each <code>div</code> tag with a class of <code>feature</code> that are inside of the <code>div</code> tag with a class of <code>features</code>.</li>
<li><code>font-size: 1.4rem</code> sets a font size of <code>1.4rem</code> for the <code>h2</code> tags that are inside of the <code>div</code> tag with a class of <code>feature</code>.</li>
</ul>
<h2 id="next-steps"> Next Steps</h2>
<p>You may have noticed the main card on the homepage is being covered by the navbar. In the next tutorial we'll be fixing this issue as well as applying some hover effects to the logo and to the box shadow around the main card on the homepage.</p>
]]></content:encoded>
    </item>
    <item>
      <title>Bitcoin</title>
      <link>https://codemonkeys.tech/resources/bitcoin/</link>
      <guid>https://codemonkeys.tech/resources/bitcoin/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Bitcoin</source>
      <description>Ready to go down the Bitcoin rabbit hole? These resources include free and open source software recommendations that allow you to interact with Bitcoin in a sovereign and private way! ₿🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="bitcoin-₿-🐒"> Bitcoin <div>₿ 🐒</div></h1>
</template><p>Here you'll find a list of resources related to Bitcoin presented in alphabetical order. While I believe these links are to resources that will help you gain a better conceptual and practical understanding of Bitcoin, I haven't personally used and verified all of them. Be sure to do your own research and always double check the links are bringing you to the correct sites. Don't trust, verify.</p>
<div>
<h2 id="blockchain-explorers"> Blockchain Explorers</h2>
<p><a href="https://blockstream.info/" target="_blank" rel="noopener noreferrer">Blockstream Explorer<i>Content not supported</i></a> - Open source blockchain explorer that supports Bitcoin mainnet, Bitcoin testnet, Liquid mainnet, and Liquid testnet that can be used with Tor to conceal your IP address</p>
<p><a href="https://mempool.space/" target="_blank" rel="noopener noreferrer">Mempool.space<i>Content not supported</i></a> - Open source self-hostable mempool explorer and blockchain explorer for Bitcoin that can be used with Tor to conceal your IP address</p>
</div>
<div>
<h2 id="books"> Books</h2>
<p><a href="https://21lessons.com/" target="_blank" rel="noopener noreferrer">21 Lessons<i>Content not supported</i></a> - Distillation of the lessons learned after falling down the Bitcoin rabbit hole written by Gigi</p>
<p><a href="https://www.btcwip.com/" target="_blank" rel="noopener noreferrer">Bitcoin: A Work in Progress<i>Content not supported</i></a> - Focused on guiding the reader through the latest developments in Bitcoin through the eyes of Sjors Provoost one of the many Bitcoin core developers</p>
<p><a href="https://github.com/bitcoinbook/bitcoinbook" target="_blank" rel="noopener noreferrer">Mastering Bitcoin<i>Content not supported</i></a> - Focused on providing developers with a technical understanding of Bitcoin written by Andreas M. Antonopoulos</p>
<p><a href="https://github.com/lnbook/lnbook" target="_blank" rel="noopener noreferrer">Mastering the Lightning Network<i>Content not supported</i></a> - Focused on providing developers with a technical understanding of the Lightning Network written by Andreas M. Antonopoulos, Olaoluwa Osuntokun, and Rene Pickhardt</p>
<p><a href="https://programmingbitcoin.com/programming-bitcoin-book/" target="_blank" rel="noopener noreferrer">Programming Bitcoin<i>Content not supported</i></a> - Learn how to program a Bitcoin library with this hands-on guide that goes over the math, blocks, network, transactions, proof-of-work, and more written by Jimmy Song a Bitcoin core developer and educator</p>
<p><a href="https://programmingbitcoin.com/thank-god-for-bitcoin/" target="_blank" rel="noopener noreferrer">Thank God for Bitcoin<i>Content not supported</i></a> - Explores the creation of money, its corruption, and its potential redemption by examining the effects Bitcoin is having on transitioning the world to a sound monetary standard</p>
<p><a href="https://saifedean.com/tbs" target="_blank" rel="noopener noreferrer">The Bitcoin Standard<i>Content not supported</i></a> - Analyzes the historical context of the rise of Bitcoin, the economic properties that have allowed it to grow quickly, and its likely economic, political, and social implications written by Saifedean Ammous</p>
<p><a href="https://saifedean.com/tfs" target="_blank" rel="noopener noreferrer">The Fiat Standard<i>Content not supported</i></a> - Provides an examination of twentieth century monetary technology and explains its benefits, drawbacks, and its many modes of failure written by Saifedean Ammous</p>
<p><a href="https://programmingbitcoin.com/the-little-bitcoin-book/" target="_blank" rel="noopener noreferrer">The Little Bitcoin Book<i>Content not supported</i></a> - Focused on describing in simple terms what Bitcoin is, how it works, why it's valuable, and how it affects individual freedom and opportunities of people everywhere written by the Bitcoin Collective</p>
</div>
<div>
<h2 id="collaborative-custody"> Collaborative Custody</h2>
<p><a href="https://unchained.com/" target="_blank" rel="noopener noreferrer">Unchained Capital<i>Content not supported</i></a> - Trusted multisig storage solution where you are making the decision to trust Unchained Capital with your privacy but not with your funds in exchange for better security, redundancy, and support when storing your Bitcoin</p>
</div>
<div>
<h2 id="dashboard"> Dashboard</h2>
<p><a href="https://bitcoin.clarkmoody.com/dashboard/" target="_blank" rel="noopener noreferrer">Clark Moody's Dashboard<i>Content not supported</i></a> - A single page view into the metrics of the Bitcoin ecosystem which includes market data, network data, mining data, and more</p>
</div>
<div>
<h2 id="education"> Education</h2>
<p><a href="https://bitcoiner.guide/" target="_blank" rel="noopener noreferrer">Bitcoiner.Guide<i>Content not supported</i></a> - A collection of resources from BitcoinQnA focused on providing Bitcoin education with an emphasis on how to use Bitcoin in a sovereign and private way</p>
<p><a href="https://bitcoin-only.com/" target="_blank" rel="noopener noreferrer">Bitcoin Only<i>Content not supported</i></a> - A collection of high quality Bitcoin resources including meetups, books, wallets, hardware, podcasts, and more</p>
<p><a href="https://bitcoinops.org/" target="_blank" rel="noopener noreferrer">Bitcoin Optech<i>Content not supported</i></a> - Helping Bitcoin users and businesses integrate scaling technologies by providing workshops, documentation, weekly newsletters, original research, case studies and announcements, analysis of Bitcoin software and services, and a podcast</p>
<p><a href="https://bitcoin-resources.com/" target="_blank" rel="noopener noreferrer">Bitcoin Resources<i>Content not supported</i></a> - Provides numerous Bitcoin related resources including videos, books, articles, podcasts, and more</p>
<p><a href="https://bitcoin.stackexchange.com/" target="_blank" rel="noopener noreferrer">Bitcoin Stack Exchange<i>Content not supported</i></a> - Question and answer site for Bitcoin cryptocurrency enthusiasts</p>
<p><a href="https://www.youtube.com/@Bitcoin_University" target="_blank" rel="noopener noreferrer">Bitcoin University<i>Content not supported</i></a> - Educational content devoted to Bitcoin, financial freedom, self-sovereignty, and relevant macro and financial news</p>
<p><a href="https://en.bitcoin.it/wiki/Main_Page" target="_blank" rel="noopener noreferrer">Bitcoin Wiki<i>Content not supported</i></a> - Wiki dedicated to providing all of your Bitcoin information needs including how to get started, software, mining, exchanges, technical content, economics, and more</p>
<p><a href="https://www.btcsessions.ca/" target="_blank" rel="noopener noreferrer">BTC Sessions<i>Content not supported</i></a> - Bitcoin educator focused on helping people gain an understanding of Bitcoin by providing tutorials on wallets, hardware, security, exchanges, and more</p>
<p><a href="https://www.econoalchemist.com/" target="_blank" rel="noopener noreferrer">Econoalchemist<i>Content not supported</i></a> - Blog focused on bringing you articles about interacting with Bitcoin in a self-custodial, censorship-resistant, and private way</p>
<p><a href="https://k3tan.com/" target="_blank" rel="noopener noreferrer">k3tan<i>Content not supported</i></a> - Focused on providing educational content on how to transition to a Bitcoin standard by showing people how to hold their own keys, use their own node, and more</p>
<p><a href="https://odell.xyz/" target="_blank" rel="noopener noreferrer">Odell<i>Content not supported</i></a> - A Bitcoin entrepreneur attempting to stay humble and stack sats with a focus on using Bitcoin and free and open source software as sovereignly and privately as possible</p>
<p><a href="https://werunbtc.com/" target="_blank" rel="noopener noreferrer">We Run BTC<i>Content not supported</i></a> - Focused on providing guides and resources about Bitcoin with an emphasis on how to interact with Bitcoin in a sovereign and private way</p>
</div>
<div>
<h2 id="entertainment"> Entertainment</h2>
<p><a href="https://www.youtube.com/@bitcoinyoda8321" target="_blank" rel="noopener noreferrer">Bitcoin Yoda<i>Content not supported</i></a> - An entertaining YouTube channel that makes funny videos about Bitcoin like The Bitcoin HODL Dance, Money Printer Goes Brrr! (Central Bank's Favorite Song), Michael Saylor's Investment Advice, and more</p>
</div>
<div>
<h2 id="hardware-wallets"> Hardware Wallets</h2>
<p><a href="https://seedsigner.com/" target="_blank" rel="noopener noreferrer">SeedSigner<i>Content not supported</i></a> - Build your own air-gapped and stateless hardware wallet using publicly available hardware components. The benefits of creating your own hardware wallet are you're not relying on centralized companies, and you can buy the pieces privately from multiple vendors spaced out over time. Note that there are no secure elements used to store your private key and you're relying on closed source hardware since it uses a Raspberry Pi</p>
<p><a href="https://trezor.io/" target="_blank" rel="noopener noreferrer">Trezor Model T<i>Content not supported</i></a> - Open source hardware and software that has numerous security features including PIN and passphrase entry directly into the device, shamir backup, FIDO2 and U2F authentication standards, transaction anonymization using CoinJoin, and more. Note that there are no secure elements used to store your private key</p>
</div>
<div>
<h2 id="jobs"> Jobs</h2>
<p><a href="https://bitcoinerjobs.com/" target="_blank" rel="noopener noreferrer">Bitcoiner Jobs<i>Content not supported</i></a> - Leading career site with the goal of helping to build the emerging Bitcoin industry and the careers of Bitcoiners within it</p>
<p><a href="https://www.pleblab.com/" target="_blank" rel="noopener noreferrer">PlebLab<i>Content not supported</i></a> - Bitcoin hackerspace and community accelerator based in Austin, Texas focused on supporting early stage Bitcoin start-ups and developers building the future of Bitcoin</p>
</div>
<div>
<h2 id="media"> Media</h2>
<p><a href="https://bitcoinmagazine.com/" target="_blank" rel="noopener noreferrer">Bitcoin Magazine<i>Content not supported</i></a> - Source of news, information and expert commentary on Bitcoin, its underlying blockchain technology and the industry that has been built up around it</p>
<p><a href="https://bitcointv.com/" target="_blank" rel="noopener noreferrer">BitcoinTV<i>Content not supported</i></a> - A repository of educational video content for the Bitcoin community, without distractions like advertising, altcoins, or third-party trackers</p>
<p><a href="https://www.nobsbitcoin.com/" target="_blank" rel="noopener noreferrer">No BS Bitcoin<i>Content not supported</i></a> - A news desk for Bitcoiners by Bitcoiners without ads, paywalls, or clickbait includes Bitcoin related news, updates, research, guides, weekly digest, and more</p>
<p><a href="https://tftc.io/" target="_blank" rel="noopener noreferrer">TFTC<i>Content not supported</i></a> - A media company focused on Bitcoin, Beauty, and Freedom in the Digital Age</p>
</div>
<div>
<h2 id="meetups"> Meetups</h2>
<p><a href="https://www.meetup.com/bitcoinpark/" target="_blank" rel="noopener noreferrer">Bitcoin Park<i>Content not supported</i></a> - Community supported campus in Nashville, Tennessee focused on grassroots Bitcoin adoption and a home for Bitcoiners to work, learn, collaborate, and build</p>
<p><a href="https://www.meetup.com/find/?source=EVENTS&amp;keywords=bitcoin" target="_blank" rel="noopener noreferrer">Bitcoin Meetup Groups<i>Content not supported</i></a> - Find a local Bitcoin meetup group by searching for upcoming meetups near you. Remember to do your own research to avoid any sketchy meetups, and don't share any personal information that you don't want others to know</p>
</div>
<div>
<h2 id="nodes"> Nodes</h2>
<p><a href="https://mynodebtc.com/" target="_blank" rel="noopener noreferrer">myNode<i>Content not supported</i></a> - Open source prebuilt Bitcoin and Lightning node that comes with many features including Tor support, Bitcoin Explorer, Electrum Server, multisig tools, an easy-to-use web interface, and more</p>
<p><a href="https://www.nodl.eu/" target="_blank" rel="noopener noreferrer">Nodl<i>Content not supported</i></a> - Open source prebuilt Bitcoin and Lightning full node that comes with many features including BTCPay Server, Tor support, Electrum Rust Server (Electrs), Ride the Lightning (RTL), BTC RPC Explorer, and more</p>
<p><a href="https://raspibolt.org/" target="_blank" rel="noopener noreferrer">RaspiBolt<i>Content not supported</i></a> - Set up your own Bitcoin and Lightning node from scratch doing everything yourself. You'll learn about Linux, Bitcoin, and Lightning</p>
<p><a href="https://ronindojo.io/" target="_blank" rel="noopener noreferrer">RoninDojo<i>Content not supported</i></a> - Open source high performance plug and play full node with an emphasis on maintaining strong privacy while interacting with Bitcoin</p>
<p><a href="https://start9.com/" target="_blank" rel="noopener noreferrer">Start9<i>Content not supported</i></a> - They develop the open source Linux-based Operating System (OS) embassyOS which is built specifically for self-hosting open source software like a Bitcoin full node, a Lightning full node, Mempool.space, and more. You have the option of buying a prebuilt server or you can build your own server and install embassyOS on it</p>
<p><a href="https://umbrel.com/" target="_blank" rel="noopener noreferrer">Umbrel<i>Content not supported</i></a> - Open source Operating System (OS) for running a personal server in your home that allows you to self-host numerous apps like Nextcloud, a Bitcoin full node, a Lightning node, and more</p>
</div>
<div>
<h2 id="payment-processors"> Payment Processors</h2>
<p><a href="https://btcpayserver.org/" target="_blank" rel="noopener noreferrer">BTCPay Server<i>Content not supported</i></a> - Open source self-hostable cryptocurrency payment processor focused on providing secure, private, and censorship-resistant payments</p>
</div>
<div>
<h2 id="peer-to-peer-p2p-exchanges"> Peer-to-Peer (P2P) Exchanges</h2>
<h3 id="reviews"> Reviews</h3>
<p><a href="https://kycnot.me/" target="_blank" rel="noopener noreferrer">KYCNOT.ME<i>Content not supported</i></a> - Open source privacy focused website with the goal of providing a list of Non KYC exchanges and ranking them based on how well you can use them in an anonymous way. The website may not always be up to date, so be sure to do your own research. Don't trust, verify!</p>
<h3 id="exchanges"> Exchanges</h3>
<p><a href="https://bisq.network/" target="_blank" rel="noopener noreferrer">Bisq<i>Content not supported</i></a> - Open source peer-to-peer (P2P) exchange that you run on your own hardware over Tor, accepts Bitcoin, Monero, and cash, allows you to swap coins, doesn't require an account, uses a non-custodial wallet, and no JavaScript needed to use the service</p>
<p><a href="https://hodlhodl.com/?filters%5Bcurrency_code%5D=UAH" target="_blank" rel="noopener noreferrer">Hodl Hodl<i>Content not supported</i></a> - Closed source peer-to-peer (P2P) exchange without Tor support, accepts Bitcoin lightning payments and cash, allows you to swap coins, requires an account that doesn't need to use any personally identifiable information, uses a non-custodial wallet, JavaScript is needed to use the service, the service has an API available, and refunds may require KYC</p>
<p><a href="https://peachbitcoin.com/" target="_blank" rel="noopener noreferrer">Peach<i>Content not supported</i></a> - Closed source peer-to-peer (P2P) exchange without Tor support, accepts Bitcoin and cash, doesn't allow you to swap coins, doesn't require an account, uses a non-custodial wallet, no JavaScript needed to use the service, Android and iOS apps are available, and refunds are handled without the need of a KYC procedure</p>
<p><a href="https://learn.robosats.com/" target="_blank" rel="noopener noreferrer">Robosats<i>Content not supported</i></a> - Open source peer-to-peer (P2P) exchange with Tor support, accepts Bitcoin lightning payments and cash, allows you to swap coins, doesn't require an account, uses a non-custodial wallet, and the service has an API available</p>
</div>
<div>
<h2 id="podcasts"> Podcasts</h2>
<p><a href="https://podcasters.spotify.com/pod/show/bitcoin-explained" target="_blank" rel="noopener noreferrer">Bitcoin Explained<i>Content not supported</i></a> - If you're interested in learning more about the technical side of Bitcoin, then you should check out this podcast with Bitcoin Magazine's Technical editor Aaron van Wirdum and Bitcoin core contributor Sjors Provoost</p>
<p><a href="https://podcasters.spotify.com/pod/show/jimmysong" target="_blank" rel="noopener noreferrer">Bitcoin Fixes This<i>Content not supported</i></a> - An exploration of the impact Bitcoin has had and continues to have on multiple aspects of society hosted by Jimmy Song</p>
<p><a href="https://www.theinvestorspodcast.com/bitcoin-fundamentals/" target="_blank" rel="noopener noreferrer">Bitcoin Fundamentals<i>Content not supported</i></a> - Show focused on discussing Bitcoin fundamentals, investing, and news hosted by Preston Pysh</p>
<p><a href="https://citadeldispatch.com/" target="_blank" rel="noopener noreferrer">Citadel Dispatch<i>Content not supported</i></a> - An interactive live show about Bitcoin and freedom tech with an emphasis on actionable steps one can take to become more sovereign and private when using Bitcoin hosted by Matt Odell</p>
<p><a href="https://rhr.tv/" target="_blank" rel="noopener noreferrer">Rabbit Hole Recap<i>Content not supported</i></a> - Recap of the weeks events in the world of Bitcoin hosted by Matt Odell and Marty Bent</p>
<p><a href="https://saifedean.com/podcast" target="_blank" rel="noopener noreferrer">The Bitcoin Standard Podcast<i>Content not supported</i></a> - Discusses Bitcoin, Austrian economics, and various news and events hosted by Saifedean Ammous</p>
<p><a href="https://www.whatbitcoindid.com/" target="_blank" rel="noopener noreferrer">What Bitcoin Did<i>Content not supported</i></a> - A tri-weekly Bitcoin podcast where host Peter McCormack interviews experts in the world of Bitcoin development, privacy, investment and adoption</p>
</div>
<div>
<h2 id="products"> Products</h2>
<p><a href="https://www.cryptocloaks.com/" target="_blank" rel="noopener noreferrer">Crypto Cloaks<i>Content not supported</i></a> - Company focused on designing and manufacturing 3D printed Bitcoin related products like node shells, hardware wallet mounts, home mining devices, and more</p>
</div>
<div>
<h2 id="website"> Website</h2>
<p><a href="https://bitcoin.org/en/" target="_blank" rel="noopener noreferrer">Bitcoin<i>Content not supported</i></a> - Bitcoin core website that has introductory resources for individuals, businesses, and developers, resources, ways to participate, FAQs, and more</p>
</div>
<div>
<h2 id="seed-storage"> Seed Storage</h2>
<h3 id="reviews-2"> Reviews</h3>
<p><a href="https://jlopp.github.io/metal-bitcoin-storage-reviews/" target="_blank" rel="noopener noreferrer">Metal Bitcoin Seed Storage Reviews<i>Content not supported</i></a> - Stress tests and reviews of seed storage devices by Jameson Lopp the grades are based on how well the devices resist heat, corrosion, and being crushed</p>
<h3 id="storage-devices"> Storage Devices</h3>
<p><a href="https://www.bitplates.com/" target="_blank" rel="noopener noreferrer">Bitplates<i>Content not supported</i></a> - Multiple plate sizes available, uses stainless steel (Marine Grade 316L), plates are laser cut for precision and engraved to ensure permanent marking, suitable for use with BIP39 and SLIP39 compatible Bitcoin wallets, up to 24 seed words per plate, and received an overall grade of A from Jameson Lopp</p>
<p><a href="https://www.blockplate.com/" target="_blank" rel="noopener noreferrer">Blockplate<i>Content not supported</i></a> - Inventor of center punch style seed storage, 12 word, 24 word, and passphrase plates available, uses thick 12 gauge stainless steel, plates are laser cut for precision and engraved to ensure permanent marking, received an overall grade of A from Jameson Lopp, and made in the USA</p>
<p><a href="https://codl.co/" target="_blank" rel="noopener noreferrer">Codl<i>Content not supported</i></a> - Multiple plate sizes and types of plates available including passphrase plates, uses 304 stainless steel, received an overall grade of A from Jameson Lopp, made in the USA, and they make a really cool stainless steel copy of the Bitcoin white paper</p>
<p><a href="https://qreg.tech/" target="_blank" rel="noopener noreferrer">Quadrat Register<i>Content not supported</i></a> - Multiple plate sizes and types of plates available, uses AISI 316 Ti stainless steel, received an overall grade of A from Jameson Lopp, made in Germany</p>
</div>
<div>
<h2 id="software-wallets"> Software Wallets</h2>
<h3 id="lightning-and-on-chain"> Lightning and On-Chain</h3>
<p><a href="https://bluewallet.io/" target="_blank" rel="noopener noreferrer">Blue Wallet<i>Content not supported</i></a> - Open source wallet for Android and iOS that supports numerous features including multiple wallets, watch-only wallets, multisig vault, fee and transaction control, plausible deniability, batch transactions, coin control, PayJoin, ability to use your own Bitcoin and Lightning nodes, and more</p>
<p><a href="https://electrum.org/#home" target="_blank" rel="noopener noreferrer">Electrum<i>Content not supported</i></a> - Open source wallet for Linux, macOS, Windows, and Android that supports numerous features including multiple wallets, watch-only wallets, multisig, fee and transaction control, passphrases, coin control, ability to use your own Bitcoin node, and more</p>
<p><a href="https://fullynoded.app/" target="_blank" rel="noopener noreferrer">Fully Noded<i>Content not supported</i></a> - Open source wallet for iOS and macOS that automatically prompts you to connect your own Bitcoin full node and acts as an offline signer using your node as a watch-only wallet</p>
<p><a href="https://muun.com/" target="_blank" rel="noopener noreferrer">Muun<i>Content not supported</i></a> - Open source wallet for Android and iOS that uses a unique 2 of 2 multisig setup that stores only one private key on your phone and both of the private keys in an emergency kit which allows for a balance between hot and cold storage</p>
<h3 id="lightning-only"> Lightning Only</h3>
<p><a href="https://getalby.com/" target="_blank" rel="noopener noreferrer">Alby<i>Content not supported</i></a> - Open source browser extension that allows you to connect one or multiple Lightning wallets and control them in your browser, generate and manage multiple Nostr keys, and interact with numerous Bitcoin applications seamlessly. Note connecting your own Lightning node is an experimental feature, so the extension uses a custodial Lightning node which means you're trusting a third-party with your funds and privacy</p>
<p><a href="https://breez.technology/" target="_blank" rel="noopener noreferrer">Breez<i>Content not supported</i></a> - Open source Android and iOS full-service, non-custodial Lightning client that offers many features like cloud backups, connecting to multiple nodes including your own, built-in next-generation podcast player, and more</p>
<p><a href="https://phoenix.acinq.co/" target="_blank" rel="noopener noreferrer">Phoenix<i>Content not supported</i></a> - Open source Android and iOS non-custodial Lightning wallet and node that offers many features and is powered by Eclair</p>
<p><a href="https://github.com/Ride-The-Lightning/RTL" target="_blank" rel="noopener noreferrer">RTL<i>Content not supported</i></a> - Open source full function, device agnostic, web user interface Lightning wallet and node management tool available on Lightning Network Daemon (LND), Core Lightning, and Eclair implementations</p>
<p><a href="https://zeusln.app/" target="_blank" rel="noopener noreferrer">Zeus<i>Content not supported</i></a> - Open source Android and iOS non-custodial Lightning wallet that offers many features including connecting to your own Lightning node</p>
<h3 id="on-chain-only"> On-Chain Only</h3>
<p><a href="https://nunchuk.io/" target="_blank" rel="noopener noreferrer">Nunchuk<i>Content not supported</i></a> - Open source wallet available for Android, iOS, Linux, macOS, and Windows with an emphasis on combining security and ease of use. It supports numerous features including multisig, collaborative custody, inheritance planning, Tapsigner integration, connecting to your own Bitcoin full node, and more</p>
<p><a href="https://sparrowwallet.com/" target="_blank" rel="noopener noreferrer">Sparrow<i>Content not supported</i></a> - Open source wallet for Linux, macOS, and Windows that supports numerous features including the ability to use all Hierarchical Deterministic (HD) wallets, strong encryption, detailed wallet history, coin control, connecting to your own Bitcoin full node, using your own blockchain explorer, and more</p>
<p><a href="https://specter.solutions/desktop/" target="_blank" rel="noopener noreferrer">Specter<i>Content not supported</i></a> - Open source wallet for Linux, macOS, and Windows that supports numerous features including the ability to connect your own Bitcoin full node, support for numerous hardware wallets, multisig, coin control, and more</p>
</div>
<div>
<h2 id="support"> Support</h2>
<p><a href="https://bitcoindevlist.com/" target="_blank" rel="noopener noreferrer">Bitcoin Dev List<i>Content not supported</i></a> - Open source Bitcoin donation portal that lists people working on Bitcoin and related projects with the goal of increasing visibility of contributors to the space that are accepting donations</p>
<p><a href="https://opensats.org/" target="_blank" rel="noopener noreferrer">OpenSats<i>Content not supported</i></a> - Focused on helping to support and maintain a sustainable ecosystem of funding for free and open source projects and contributors related to Bitcoin</p>
<p><a href="https://ten31.vc/" target="_blank" rel="noopener noreferrer">Ten31<i>Content not supported</i></a> - Venture capital fund focused exclusively on investing in the Bitcoin ecosystem</p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>Free and Open Source Software (FOSS)</title>
      <link>https://codemonkeys.tech/resources/foss/</link>
      <guid>https://codemonkeys.tech/resources/foss/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Free and Open Source Software (FOSS)</source>
      <description>Ready to learn about free and open source software (FOSS)? These resources will explain what FOSS is, why it's important, and provide you with some useful applications! 💻🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="free-and-open-source-software-foss-💻-🐒"> Free and Open Source Software (FOSS) <div>💻 🐒</div></h1>
</template><p>Here you'll find a list of resources related to free and open source software (FOSS) presented in alphabetical order that should help you gain a better conceptual and practical understanding of the topic.</p>
<div>
<h2 id="education"> Education</h2>
<p><a href="https://dzone.com/articles/free-software-vs-open-source-vs-freeware-whats-the" target="_blank" rel="noopener noreferrer">Free Software vs Open Source vs Freeware<i>Content not supported</i></a> - Clarifies the differences between free software, open source, and freeware which are often confusingly used interchangeably</p>
<p><a href="https://lukesmith.xyz/" target="_blank" rel="noopener noreferrer">Luke Smith<i>Content not supported</i></a> - A LandChad that emphasizes the importance of using FOSS as well as self-hosting your own websites and applications</p>
<p><a href="https://www.gnu.org/philosophy/free-sw.html" target="_blank" rel="noopener noreferrer">What is Free Software?<i>Content not supported</i></a> - Description of the philosophy and principles behind free software from the Free Software Foundation (FSF)</p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>Notes and Other Stuff Transmitted by Relays (Nostr)</title>
      <link>https://codemonkeys.tech/resources/nostr/</link>
      <guid>https://codemonkeys.tech/resources/nostr/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Notes and Other Stuff Transmitted by Relays (Nostr)</source>
      <description>Ready to learn about Notes and Other Stuff Transmitted by Relays (Nostr)? These resources will explain what Nostr is, why it's important, and provide you with some useful applications! 🗒️🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="notes-and-other-stuff-transmitted-by-relays-nostr-🗒️-🐒"> Notes and Other Stuff Transmitted by Relays (Nostr) <div>🗒️ 🐒</div></h1>
</template><p>Here you'll find a list of resources related to Notes and Other Stuff Transmitted by Relays (Nostr) presented in alphabetical order. The way the Nostr protocol works along with the fact that it is still in early development means you may come across inappropriate material on some of the sites.</p>
<p>While I believe these links are to resources that are attempting to remove unrelated and inappropriate content and will help you gain a better conceptual and practical understanding of Nostr, I cannot guarantee that will always be the case. Be sure to do your own research and always double check the links are bringing you to the correct sites. Don't trust, verify.</p>
<div>
<h2 id="clients"> Clients</h2>
<p><a href="https://github.com/damus-io/damus" target="_blank" rel="noopener noreferrer">Damus<i>Content not supported</i></a> - A Twitter-like client for iPhone, iPad, and MacOS</p>
</div>
<div>
<h2 id="documentation"> Documentation</h2>
<p><a href="https://nostr.com/" target="_blank" rel="noopener noreferrer">Nostr<i>Content not supported</i></a> - Documentation about what Nostr is, why we need it, and how to use it</p>
</div>
<div>
<h2 id="protocol"> Protocol</h2>
<p><a href="https://github.com/nostr-protocol/nostr" target="_blank" rel="noopener noreferrer">Nostr<i>Content not supported</i></a> - The simplest open protocol that is able to create a censorship-resistant global &quot;social&quot; network once and for all</p>
<p><a href="https://github.com/nostr-protocol/nips" target="_blank" rel="noopener noreferrer">NIPs<i>Content not supported</i></a> - Nostr Implementation Possibilities</p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>Resources</title>
      <link>https://codemonkeys.tech/resources/</link>
      <guid>https://codemonkeys.tech/resources/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Resources</source>
      <description>Ready to take your Code Monkey skills to the next level? Then check out these useful resources which include free and open source software recommendations! 💻🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="giving-credit-to-the-great-apes-🦍-🍌-🐒"> Giving Credit to the Great <div>Apes!!! 🦍 🍌 🐒</div></h1>
</template><p>Here you'll find a list of topics I'm interested in presented in alphabetical order. The goal of providing resources for these topics is to help people learn more about programming as well as to provide people with free and open source software that also respects their privacy.</p>
<p>Moving over to using only free and open source software that also respects users' privacy is a process, so don't feel like you have to switch everything at once. I'm still using proprietary software that doesn't respect users' privacy, and I may continue to do so if I feel the pros outweigh the cons. However, over time if possible I would prefer to phase out all of the proprietary software I'm using.</p>
<p>While I believe these links are to resources that will help you gain a better conceptual and practical understanding of the topics, I haven't personally used and verified all of these resources. Be sure to do your own research and always double check the links are bringing you to the correct sites, especially when dealing with a site related to privacy or finances. Don't trust, verify.</p>
<p>I'll be updating these resources from time to time, so if you have any suggestions on how to improve them let me know.</p>
<div
 
  @click="handleNavigation('/resources/bitcoin', $event)"
>
<div>
<h2 id="bitcoin"> Bitcoin</h2>
</div>
<p>&quot;The root problem with conventional currency is all the trust that’s required to make it work. The central bank must be trusted not to debase the currency, but the history of fiat currencies is full of breaches of that trust.&quot; - Satoshi Nakamoto</p>
<p>Bitcoin is a decentralized digital currency that enables instant payments to anyone, anywhere in the world. Bitcoin uses peer-to-peer (P2P) technology to operate with no central authority: transaction management and money issuance are carried out collectively by the network.</p>
</div>
<div
 
  @click="handleNavigation('/resources/foss', $event)"
>
<div>
<h2 id="free-and-open-source-software-foss"> Free and Open Source Software (FOSS)</h2>
</div>
<p>“Free software” means software that respects users' freedom and community. Roughly, it means that the users have the freedom to run, copy, distribute, study, change, and improve the software.</p>
<p>&quot;Open source software&quot; also gives the users the ability to run, copy, distribute, study, change, and improve the software; however, it does not share the same goal of making sure the software that is being developed is actually attempting to improve users' freedom.</p>
</div>
<div
 
  @click="handleNavigation('/resources/nostr', $event)"
>
<div>
<h2 id="notes-and-other-stuff-transmitted-by-relays-nostr"> Notes and Other Stuff Transmitted by Relays (Nostr)</h2>
</div>
<p>The simplest open protocol that is able to create a censorship-resistant global &quot;social&quot; network once and for all.</p>
<p>It doesn't rely on any trusted central server, hence it is resilient; it is based on cryptographic keys and signatures, so it is tamperproof; it does not rely on peer-to-peer (P2P) techniques, and therefore it works.</p>
</div>
<div
 
  @click="handleNavigation('/resources/privacy', $event)"
>
<div>
<h2 id="privacy"> Privacy</h2>
</div>
<p>“Privacy is the power to selectively reveal oneself to the world.&quot; - Eric Hughes</p>
<p>To learn more about why privacy is important especially in our digital age, then be sure to check out these resources which include tools that you can use to increase and maintain your privacy.</p>
</div>
<div
 
  @click="handleNavigation('/resources/webdev', $event)"
>
<div>
<h2 id="web-development"> Web Development</h2>
</div>
<p>To learn about the process of building, programming, and maintaining websites and web applications using HTML, CSS, JavaScript, TypeScript, etc., then be sure to check out these resources.</p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>Web Development</title>
      <link>https://codemonkeys.tech/resources/webdev/</link>
      <guid>https://codemonkeys.tech/resources/webdev/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Web Development</source>
      <description>Ready to learn about web development? These resources will explain what web development is, why it's important, and provide you with some useful tools for learning! 🕸️🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="web-development-🕸️-🐒"> Web Development <div>🕸️ 🐒</div></h1>
</template><p>Here you'll find a list of resources related to web development presented in alphabetical order that should help you gain a better conceptual and practical understanding of the topic.</p>
<div>
<h2 id="tutorials"> Tutorials</h2>
<p><a href="https://netninja.dev/" target="_blank" rel="noopener noreferrer">Net Ninja<i>Content not supported</i></a> - Black belt your coding skills</p>
<p><a href="https://www.traversymedia.com/" target="_blank" rel="noopener noreferrer">Traversy Media<i>Content not supported</i></a> - Practical project-based courses that are easy to understand and
straight to the point with no fluff</p>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>Privacy</title>
      <link>https://codemonkeys.tech/resources/privacy/</link>
      <guid>https://codemonkeys.tech/resources/privacy/</guid>
      <source url="https://codemonkeys.tech/rss.xml">Privacy</source>
      <description>Ready to learn how to counter global mass surveillance? These resources will explain what privacy is, why it's important, and provide you with some useful tools! 🔒🐒</description>
      <content:encoded><![CDATA[<template #header><h1 id="privacy-🔒-🐒"> Privacy <div>🔒 🐒</div></h1>
</template><p>Here you'll find a list of resources related to privacy presented in alphabetical order. While I believe these links are to resources that will help you gain better privacy, I haven't personally used and verified all of them. Also, using these recommended resources doesn't guarantee that you'll achieve perfect privacy. Be sure to do your own research and always double check the links are bringing you to the correct sites. Don't trust, verify.</p>
<div>
<h2 id="android-web-browsers"> Android Web Browsers</h2>
<p><a href="https://brave.com/" target="_blank" rel="noopener noreferrer">Brave<i>Content not supported</i></a> - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired</p>
<p><a href="https://www.bromite.org/" target="_blank" rel="noopener noreferrer">Bromite<i>Content not supported</i></a> - Open source Chromium based mobile browser with privacy and security focused enhancements including built-in ad blocking</p>
<p><a href="https://www.mozilla.org/en-US/firefox/browsers/mobile/android/?v=2" target="_blank" rel="noopener noreferrer">Firefox<i>Content not supported</i></a> - Open source browser that doesn't have the best privacy and security defaults, so it's recommended to harden the browser by adjusting the settings and installing additional browser add-ons which is limited on Android</p>
<p><a href="https://www.mozilla.org/en-US/firefox/browsers/mobile/focus/" target="_blank" rel="noopener noreferrer">Firefox Focus<i>Content not supported</i></a> - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking</p>
<p><a href="https://www.torproject.org/download/#android" target="_blank" rel="noopener noreferrer">Tor<i>Content not supported</i></a> - Open source browser that prioritizes privacy, anonymity, and censorship resistance and it comes pre-installed with all the privacy add-ons you should need, encryption, and an advanced proxy</p>
</div>
<div>
<h2 id="app-stores"> App Stores</h2>
<p><a href="https://f-droid.org/" target="_blank" rel="noopener noreferrer">F-Droid<i>Content not supported</i></a> - App store that contains free and open source software (FOSS) applications for Android</p>
</div>
<div>
<h2 id="card-aliasing"> Card Aliasing</h2>
<p><a href="https://mysudo.com/" target="_blank" rel="noopener noreferrer">MySudo<i>Content not supported</i></a> - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution</p>
<p><a href="https://privacy.com/" target="_blank" rel="noopener noreferrer">Privacy<i>Content not supported</i></a> - A proprietary credit/debit card aliasing solution when making online purchases</p>
</div>
<div>
<h2 id="cloud-storage"> Cloud Storage</h2>
<p><a href="https://nextcloud.com/" target="_blank" rel="noopener noreferrer">Nextcloud<i>Content not supported</i></a> - Open source, self-hostable, and scalable suite for storing photos, documents, files, contacts, and more. It's similar in functionality to Dropbox, Office 365, and Google Drive</p>
</div>
<div>
<h2 id="desktop-web-browsers"> Desktop Web Browsers</h2>
<p><a href="https://brave.com/" target="_blank" rel="noopener noreferrer">Brave<i>Content not supported</i></a> - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired</p>
<p><a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noopener noreferrer">Firefox<i>Content not supported</i></a> - Open source browser that doesn't have the best privacy and security defaults, so it's recommended to harden the browser by adjusting the settings and installing additional browser add-ons. You can use <a href="https://ffprofile.com/" target="_blank" rel="noopener noreferrer">Firefox Profilemaker<i>Content not supported</i></a> to adjust the settings for your needs or use the <a href="https://github.com/arkenfox/user.js/" target="_blank" rel="noopener noreferrer">Arkenfox user.js<i>Content not supported</i></a> file instead of the default settings. It's also recommended to download the browser releases from the <a href="https://ftp.mozilla.org/pub/firefox/releases/" target="_blank" rel="noopener noreferrer">Mozilla FTP<i>Content not supported</i></a> to avoid telemetry tracking on your download</p>
<p><a href="https://librewolf.net/" target="_blank" rel="noopener noreferrer">LibreWolf<i>Content not supported</i></a> - Open source Firefox based browser with a focus on improving privacy and security by handling the majority of Firefox hardening for you and does a good job of maintaining security updates</p>
<p><a href="https://www.torproject.org/" target="_blank" rel="noopener noreferrer">Tor<i>Content not supported</i></a> - Open source browser that prioritizes privacy, anonymity, and censorship resistance and it comes pre-installed with all the privacy add-ons you should need, encryption, and an advanced proxy</p>
<p><a href="https://github.com/ungoogled-software/ungoogled-chromium" target="_blank" rel="noopener noreferrer">UnGoogled Chromium<i>Content not supported</i></a> - Open source Chromium based browser with a focus on removing the remaining Google privacy concerns from the open source Chromium browser. Be aware that security updated tend to be a bit slower</p>
</div>
<div>
<h2 id="electronic-sim-esim"> Electronic SIM (eSIM)</h2>
<p><a href="https://silent.link/" target="_blank" rel="noopener noreferrer">Silent Link<i>Content not supported</i></a> - A proprietary anonymous electronic SIM (eSIM) that supports global mobile 4G/5G internet as well as inbound texting and calling for US and UK phone numbers that can be used with any modern eSIM compatible smartphone</p>
</div>
<div>
<h2 id="email"> Email</h2>
<p><a href="https://proton.me/mail" target="_blank" rel="noopener noreferrer">ProtonMail<i>Content not supported</i></a> - Open source email based in Switzerland with an emphasis on privacy and security by providing users with end-to-end encryption (E2EE), zero-access encryption, anti-phishing, anti-spam, two-factor authentication (2FA), and accessibility via Tor</p>
<p><a href="https://tutanota.com/" target="_blank" rel="noopener noreferrer">Tutanota<i>Content not supported</i></a> - Open source email based in Germany with an emphasis on privacy and security by providing users with end-to-end encryption (E2EE), two-factor authentication (2FA), session handling, phishing protection, and more features</p>
</div>
<div>
<h2 id="email-aliasing"> Email Aliasing</h2>
<p><a href="https://simplelogin.io/" target="_blank" rel="noopener noreferrer">SimpleLogin<i>Content not supported</i></a> - Open source and self-hostable email aliasing solution built with privacy and security in mind</p>
</div>
<div>
<h2 id="encryption"> Encryption</h2>
<p><a href="https://gnupg.org/" target="_blank" rel="noopener noreferrer">GNU Privacy Guard (GnuPG)<i>Content not supported</i></a> - Open source, complete, and free implementation of the OpenPGP standard. Allows you to encrypt and sign your data and communications</p>
<p><a href="https://veracrypt.fr/en/Home.html" target="_blank" rel="noopener noreferrer">VeraCrypt<i>Content not supported</i></a> - Open source encryption software that allows you to create virtual encrypted disks within files and to encrypt entire partitions or storage devices</p>
</div>
<div>
<h2 id="file-sharing"> File Sharing</h2>
<p><a href="https://keybase.io/" target="_blank" rel="noopener noreferrer">Keybase<i>Content not supported</i></a> - Open source end-to-end encryption (E2EE) for messaging and file sharing</p>
<p><a href="https://onionshare.org/" target="_blank" rel="noopener noreferrer">OnionShare<i>Content not supported</i></a> - Open source tool that lets you securely and anonymously share files, host websites, and chat using the Tor network</p>
<p><a href="https://syncthing.net/" target="_blank" rel="noopener noreferrer">Syncthing<i>Content not supported</i></a> - Open source continuous file synchronization tool that encrypts all communication and allows users to sync files between authenticated devices</p>
</div>
<div>
<h2 id="guides"> Guides</h2>
<p><a href="https://www.activism.net/cypherpunk/manifesto.html" target="_blank" rel="noopener noreferrer">A Cypherpunk's Manifesto<i>Content not supported</i></a> - A summary of the importance of privacy in the digital age written by Eric Hughes</p>
<p><a href="https://prism-break.org/en/all/" target="_blank" rel="noopener noreferrer">Prism Break<i>Content not supported</i></a> - Website dedicated to providing information about privacy services, tools, and protocols</p>
<p><a href="https://privacytests.org/" target="_blank" rel="noopener noreferrer">Privacy Tests<i>Content not supported</i></a> - Open source tests of web browser privacy</p>
<p><a href="https://www.privacyguides.org/en/" target="_blank" rel="noopener noreferrer">Privacy Guides<i>Content not supported</i></a> - Website that provides information for protecting your data security and privacy, and their mission is to inform the public about the value of digital privacy and global government initiatives which aim to monitor your online activity</p>
<p><a href="https://www.privacytools.io/private-browser" target="_blank" rel="noopener noreferrer">Privacy Tools<i>Content not supported</i></a> - Website dedicated to providing privacy services, tools, and guides. A lot of the services and tools listed here were initially found through this website, so it's a great site to learn more about them as well as privacy in general</p>
<p><a href="https://sethforprivacy.com/" target="_blank" rel="noopener noreferrer">Seth for Privacy<i>Content not supported</i></a> - An individual interested in educating and learning more about privacy and technology. Check out the <a href="https://optoutpod.com/" target="_blank" rel="noopener noreferrer">Opt Out<i>Content not supported</i></a> podcast where he sits down with passionate people within the privacy community to discuss why privacy matters, the tools and techniques they've found and use, and to encourage others towards achieving personal privacy and data sovereignty</p>
<p><a href="https://techlore.tech/index" target="_blank" rel="noopener noreferrer">Techlore<i>Content not supported</i></a> - A team dedicated to spreading privacy and security to the masses by producing projects, communities, and content to help individuals achieve personal privacy. A lot of the services and tools listed here were initially found through their website and content, so it's a great site to learn more about them as well as privacy in general</p>
<p><a href="https://anonymousplanet.org/guide" target="_blank" rel="noopener noreferrer">The Hitchhiker’s Guide to Online Anonymity<i>Content not supported</i></a> - Open source and non-profit guide dedicated to providing an introduction to various online tracking techniques, online ID verification techniques, and detailed guidance to creating and maintaining anonymous online identities</p>
<p><a href="https://thenewoil.org/en/" target="_blank" rel="noopener noreferrer">The New Oil<i>Content not supported</i></a> - Aimed at people who are new to privacy and/or do not consider themselves “tech savvy”, and goes over the basics of various ideas, subjects, and concepts to help you feel educated and capable of making decisions that are right for you without going too in depth to the point that you feel overwhelmed</p>
</div>
<div>
<h2 id="ios-web-browsers"> iOS Web Browsers</h2>
<p><a href="https://brave.com/" target="_blank" rel="noopener noreferrer">Brave<i>Content not supported</i></a> - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired</p>
<p><a href="https://www.mozilla.org/en-US/firefox/browsers/mobile/ios/" target="_blank" rel="noopener noreferrer">Firefox<i>Content not supported</i></a> - Open source browser that doesn't have the best privacy and security defaults, so it's recommended to harden the browser by adjusting the settings and installing additional browser add-ons which is significantly limited on iOS</p>
<p><a href="https://www.mozilla.org/en-US/firefox/browsers/mobile/focus/" target="_blank" rel="noopener noreferrer">Firefox Focus<i>Content not supported</i></a> - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking</p>
<p><a href="https://onionbrowser.com/" target="_blank" rel="noopener noreferrer">Onion Browser<i>Content not supported</i></a> - Open source unofficial Tor browser that prioritizes privacy, anonymity, and censorship resistance, but be aware that iOS limitations means it should not be considered as safe as Tor</p>
</div>
<div>
<h2 id="messengers"> Messengers</h2>
<p><a href="https://briarproject.org/" target="_blank" rel="noopener noreferrer">Briar<i>Content not supported</i></a> - Open source, Tor routed, peer-to-peer (P2P), end-to-end encrypted (E2EE) messaging. The messages are stored securely on your device not in the cloud, and it can be used without internet access by connecting directly with nearby contacts using bluetooth or WiFi</p>
<p><a href="https://keybase.io/" target="_blank" rel="noopener noreferrer">Keybase<i>Content not supported</i></a> - Open source end-to-end encryption (E2EE) for messaging and file sharing</p>
<p><a href="https://matrix.org/" target="_blank" rel="noopener noreferrer">Matrix<i>Content not supported</i></a> - Open standard for interoperable, secure, decentralized, and real-time communication over IP with end-to-end encryption (E2EE) enabled by default for direct messaging and invite-only rooms. You have the option to self host your own server or to use a public server. One of the more popular clients to use when connecting to the Matrix protocol is <a href="https://element.io/" target="_blank" rel="noopener noreferrer">Element<i>Content not supported</i></a></p>
<p><a href="https://getsession.org/" target="_blank" rel="noopener noreferrer">Session<i>Content not supported</i></a> - Open source messenger that uses end-to-end encryption (E2EE), doesn't collect user data, accounts are completely anonymous, i.e., no phone number is required, messages can be sent through an onion routing network, and is more censorship resistant than other messengers</p>
<p><a href="https://www.signal.org/" target="_blank" rel="noopener noreferrer">Signal<i>Content not supported</i></a> - Open source messenger that uses end-to-end encryption (E2EE) with a simple interface that requires a phone number to create an account</p>
<p><a href="https://threema.ch/en" target="_blank" rel="noopener noreferrer">Threema<i>Content not supported</i></a> - Open source messenger that uses end-to-end encryption (E2EE) and can be used without disclosing your phone number or email. Payment is required to use the application which can be paid with Bitcoin</p>
</div>
<div>
<h2 id="mobile-phone"> Mobile Phone</h2>
<p><a href="https://calyxos.org/" target="_blank" rel="noopener noreferrer">Calyx<i>Content not supported</i></a> - Open source Android mobile operating system that focuses on improving privacy and security</p>
<p><a href="https://grapheneos.org/" target="_blank" rel="noopener noreferrer">GrapheneOS<i>Content not supported</i></a> - Non-profit open source mobile operating system project with Android app compatibility that focuses on improving privacy and security</p>
<p><a href="https://puri.sm/products/librem-5/" target="_blank" rel="noopener noreferrer">Librem 5<i>Content not supported</i></a> - Uses PureOS which is a Linux distribution with a focus on privacy and security and it incorporates open hardware specifications when possible</p>
<p><a href="https://www.pine64.org/pinephonepro/" target="_blank" rel="noopener noreferrer">PinePhone Pro<i>Content not supported</i></a> - Uses an open source Linux based mobile operating system that incorporates open hardware specifications when possible</p>
</div>
<div>
<h2 id="notes"> Notes</h2>
<p><a href="https://standardnotes.com/" target="_blank" rel="noopener noreferrer">Standard Notes<i>Content not supported</i></a> - Open source self-hostable note-taking application that uses end-to-end encryption (E2EE)</p>
</div>
<div>
<h2 id="operating-systems"> Operating Systems</h2>
<p><a href="https://archlinux.org/" target="_blank" rel="noopener noreferrer">Arch<i>Content not supported</i></a> - Independently developed open source GNU/Linux distribution that provides the latest stable versions of most software by following a rolling-release model. The default installation is a minimal base system configured by the user to only add what they require and offers the flexibility to harden the OS as the user sees fit</p>
<p><a href="https://www.debian.org/" target="_blank" rel="noopener noreferrer">Debian<i>Content not supported</i></a> - Open source GNU/Linux distribution that offers users security, stability, and reliability</p>
<p><a href="https://getfedora.org/" target="_blank" rel="noopener noreferrer">Fedora<i>Content not supported</i></a> - Open source GNU/Linux distribution that that focuses on providing users with strong privacy and security by default</p>
<p><a href="https://pop.system76.com/" target="_blank" rel="noopener noreferrer">Pop!_OS<i>Content not supported</i></a> - Open source GNU/Linux distribution developed and maintained by System76 with a focus on providing users with privacy, security, and reliability while maintaining ease of use</p>
<p><a href="https://www.qubes-os.org/" target="_blank" rel="noopener noreferrer">Qubes OS<i>Content not supported</i></a> - Open source security focused operating system for single user desktop computing that leverages Xen based virtualization to allow for the creation and management of isolated compartments called qubes which are implemented as virtual machines (VMs). Basically it allows you to separate operating systems and the installed programs on those operating systems into multiple and secure environments</p>
</div>
<div>
<h2 id="operating-systems-live"> Operating Systems (Live)</h2>
<p><a href="https://tails.boum.org/" target="_blank" rel="noopener noreferrer">Tails<i>Content not supported</i></a> - Open source live operating system that routes all traffic through Tor for privacy and anonymity when online and deletes all of your data when you shutdown your computer</p>
<p><a href="https://www.whonix.org/" target="_blank" rel="noopener noreferrer">Whonix<i>Content not supported</i></a> - Open source live and virtual operating system that runs inside your current operating system. All traffic is routed through Tor for privacy and anonymity when online</p>
</div>
<div>
<h2 id="password-managers"> Password Managers</h2>
<p><a href="https://bitwarden.com/" target="_blank" rel="noopener noreferrer">Bitwarden<i>Content not supported</i></a> - Open source, self-hostable, and cloud-based option password manager that uses zero knowledge end-to-end encryption (E2EE)</p>
<p><a href="https://keepass.info/" target="_blank" rel="noopener noreferrer">KeePass<i>Content not supported</i></a> - Open source password manager that uses industry standard encryption and stores all password databases locally on your device</p>
</div>
<div>
<h2 id="phone-number-aliasing"> Phone Number Aliasing</h2>
<p><a href="https://hushed.com/" target="_blank" rel="noopener noreferrer">Hushed<i>Content not supported</i></a> - A proprietary Voice over IP (VoIP) temporary and secondary US and Canadian phone number aliasing app for data calling and texting that can be used over WiFi</p>
<p><a href="https://jmp.chat/" target="_blank" rel="noopener noreferrer">JMP.chat<i>Content not supported</i></a> - An open source XMPP based solution that turns your XMPP account into a fully functional US or Canadian phone number that can make and receive calls, texts, and picture messages to standard phone numbers</p>
<p><a href="https://mysudo.com/" target="_blank" rel="noopener noreferrer">MySudo<i>Content not supported</i></a> - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution</p>
<p><a href="https://www.textverified.com/" target="_blank" rel="noopener noreferrer">Textverified<i>Content not supported</i></a> - A proprietary fully functional US phone number aliasing solution that you can use for phone and SMS verification</p>
<p><a href="https://www.viber.com/en/" target="_blank" rel="noopener noreferrer">Viber<i>Content not supported</i></a> - A proprietary Voice over IP (VoIP) phone number aliasing solution that supports worldwide numbers</p>
</div>
<div>
<h2 id="prebuilt-computers"> Prebuilt Computers</h2>
<p><a href="https://puri.sm/" target="_blank" rel="noopener noreferrer">Purism<i>Content not supported</i></a> - Engineer and manufacture personal computing devices with a focus on privacy and security by producing devices that rely on open hardware and open firmware when possible and open source software</p>
<p><a href="https://system76.com/" target="_blank" rel="noopener noreferrer">System76<i>Content not supported</i></a> - Engineer and manufacture premium Linux computers and keyboards that use open hardware and open firmware when possible and open source software with a focus on allowing users to freely upgrade and repair their computers, the freedom to use and alter the software on their computer, and to provide the ability for users to learn how their system works</p>
</div>
<div>
<h2 id="search-engines"> Search Engines</h2>
<p><a href="https://search.brave.com/" target="_blank" rel="noopener noreferrer">Brave Search<i>Content not supported</i></a> - Proprietary privacy-focused search engine that uses its own independent search index for search results</p>
<p><a href="https://searx.github.io/searx/" target="_blank" rel="noopener noreferrer">Searx<i>Content not supported</i></a> - Open source configurable and self-hostable metasearch engine which aggregates results from numerous search engines and can be used over Tor for online anonymity</p>
<p><a href="https://www.startpage.com/" target="_blank" rel="noopener noreferrer">Startpage<i>Content not supported</i></a> - Proprietary privacy-focused search engine that consists of privately proxied Google search results without the unwanted tracking, third-party cookies, and targeted ads</p>
</div>
<div>
<h2 id="two-factor-authentication-2fa"> Two-Factor Authentication (2FA)</h2>
<h3 id="software"> Software</h3>
<p><a href="https://getaegis.app/" target="_blank" rel="noopener noreferrer">Aegis<i>Content not supported</i></a> - Open source time-based one-time passwords (TOTP) service for Android that gives you the ability to encrypt your tokens at rest as well as to export your tokens</p>
<p><a href="https://www.tofuauth.com/" target="_blank" rel="noopener noreferrer">Tofu<i>Content not supported</i></a> - Open source counter-based and time-based one-time passwords (TOTP) service for iOS that requires no network or cellular connection and account details are stored in the iOS keychain</p>
<h3 id="hardware"> Hardware</h3>
<p><a href="https://www.yubico.com/" target="_blank" rel="noopener noreferrer">Yubico<i>Content not supported</i></a> - Proprietary phishing-resistant multi-factor authentication (MFA)</p>
<p><a href="https://solokeys.com/" target="_blank" rel="noopener noreferrer">SoloKeys<i>Content not supported</i></a> - First open source fast identity online 2 (FIDO2) security key</p>
<p><a href="https://www.nitrokey.com/" target="_blank" rel="noopener noreferrer">Nitrokey<i>Content not supported</i></a> - Open source device that enables secure login, email encryption, encrypted mobile storage, disk and file encryption, key and certificate management, and server administration using secure shell (SSH). The company also provides other devices including phones, personal computers, laptops, and more</p>
</div>
<div>
<h2 id="vpns"> VPNs</h2>
<p><a href="https://www.ivpn.net/" target="_blank" rel="noopener noreferrer">IVPN<i>Content not supported</i></a> - Open source, transparent, and secure VPN provider based in Gibraltar</p>
<p><a href="https://mullvad.net/en" target="_blank" rel="noopener noreferrer">Mullvad<i>Content not supported</i></a> - Open source, transparent, and secure VPN provider based in Sweden</p>
<p><a href="https://protonvpn.com/" target="_blank" rel="noopener noreferrer">ProtonVPN<i>Content not supported</i></a> - Open source, transparent, and secure VPN provider based in Switzerland</p>
</div>
]]></content:encoded>
    </item>
  </channel>
</rss>